क्या किसी विशिष्ट स्थान पर रंग प्राप्त करने के लिए HTML कैनवास ऑब्जेक्ट से पूछना संभव है?एचटीएमएल कैनवास से पिक्सेल?
उत्तर
डब्ल्यू 3 सी दस्तावेज में pixel manipulation के बारे में एक अनुभाग है।
यहाँ an example on how to invert an image है:
// Get the CanvasPixelArray from the given coordinates and dimensions.
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;
// Loop over each pixel and invert the color.
for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i ] = 255 - pix[i ]; // red
pix[i+1] = 255 - pix[i+1]; // green
pix[i+2] = 255 - pix[i+2]; // blue
// i+3 is alpha (the fourth element)
}
// Draw the ImageData at the given (x,y) coordinates.
context.putImageData(imgd, x, y);
हाँ, getImageData की जाँच()। यहाँ कैनवास का उपयोग कर जावास्क्रिप्ट के साथ कैप्चा तोड़ने का एक उदाहरण है:
आप की कोशिश की है getImageData विधि?
data = context.getImageData(x, y, 1, 1).data;
color = new Color([data[0], data[1], data[2]]);
ध्यान दें कि ImageData एक स्नैपशॉट प्राप्त करता है। निहितार्थ हैं:
- परिवर्तन बाद putImageData जब तक प्रभाव लेने नहीं होगा
- getImageData और putImageData कॉल अपेक्षाकृत धीमी गति से
हाँ यकीन है, आप उसके संदर्भ है प्रदान की है। How to get canvas context?
var imgData = context.getImageData(0,0,canvas.width,canvas.height);
// array [r,g,b,a,r,g,b,a,r,g,..]
function getPixel(imgData, index) {
var i = index*4, d = imgData.data;
return [d[i],d[i+1],d[i+2],d[i+3]] // returns array [R,G,B,A]
}
// AND/OR
function getPixelXY(imgData, x, y) {
return getPixel(imgData, y*imgData.width+x);
}
यय मौजूद नहीं है! धन्यवाद यह बहुत अच्छी तरह से काम करता है और यह 'context.getImageData (x, y, 1, 1) को कॉल करने से तेज़ तेज़ है;' – adelriosantiago
हाँ यह 10x तेज है: [jsbench] (http://jsben.ch/#/zPZ4e) – Dantevg
// Get pixel data
var imageData = context.getImageData(x, y, width, height);
//color at (x,y) position
var color = [];
color['red'] = imageData.data[((y*(imageData.width*4)) + (x*4)) + 0];
color['green'] = imageData.data[((y*(imageData.width*4)) + (x*4)) + 1];
color['blue'] = imageData.data[((y*(imageData.width*4)) + (x*4)) + 2];
color['alpha'] = imageData.data[((y*(imageData.width*4)) + (x*4)) + 3];
function GetPixel(x, y)
{
var p = ctx.getImageData(x, y, 1, 1).data;
var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
return hex;
}
function rgbToHex(r, g, b) {
if (r > 255 || g > 255 || b > 255)
throw "Invalid color component";
return ((r << 16) | (g << 8) | b).toString(16);
}
- 1. एचटीएमएल 5 कैनवास पिक्सेल प्रतिपादन
- 2. एचटीएमएल 5 कैनवास किसी भी उप-पिक्सेल प्रतिपादन से बचें
- 3. एचटीएमएल 5 कैनवास
- 4. एचटीएमएल 5 कैनवास
- 5. डब्ल्यूपीएफ कैनवास - एकल पिक्सेल ग्रिड
- 6. एचटीएमएल 5 कैनवास इकाइयों
- 7. एचटीएमएल 5 कैनवास
- 8. एचटीएमएल 5 कैनवास
- 9. एचटीएमएल कैनवास
- 10. एचटीएमएल कैनवास
- 11. एचटीएमएल कैनवास
- 12. एचटीएमएल कैनवास
- 13. एचटीएमएल कैनवास ट्रेसिंग
- 14. एचटीएमएल 5 से वीडियो से कैनवास
- 15. एचटीएमएल 5 कैनवास
- 16. एचटीएमएल 5 कैनवास और एंड्रॉइड कैनवास
- 17. एचटीएमएल 5 कैनवास
- 18. एचटीएमएल 5 के कैनवास
- 19. एचटीएमएल कैनवास तत्व
- 20. एचटीएमएल 5 कैनवास
- 21. एचटीएमएल 5 कैनवास
- 22. एचटीएमएल 5 कैनवास तत्व
- 23. एचटीएमएल 5 कैनवास
- 24. एचटीएमएल 5 कैनवास बेजियर
- 25. एचटीएमएल 5 कैनवास
- 26. एचटीएमएल 5 कैनवास
- 27. एक एचटीएमएल कैनवास
- 28. एचटीएमएल 5 कैनवास
- 29. एचटीएमएल कैनवास - ड्राइंग
- 30. एचटीएमएल 5 कैनवास
इस context.getImageData() और नहीं canvas.getImageData नहीं होना चाहिए()? – Crashalot
@ क्रैशलॉट वैर "कैनवास" में क्या निर्भर करता है, यह केवल एक क्रैपी var नाम के साथ कैनवास का संदर्भ हो सकता है। – tbleckert
वाह, बहुत सुरुचिपूर्ण! मैंने पूरे संदर्भ में बिंदु की खोज करने के बारे में सोचा, लेकिन यह बहुत चालाक है। – TheOne