getPixel de HTML Canvas?
est-il possible d'interroger un objet HTML Canvas pour obtenir la couleur à un endroit précis?
92
demandé sur
Liam
2009-03-20 20:00:05
8 réponses
il y a une section sur manipulation de pixels dans la documentation du W3C.
Voici un exemple sur la façon d'inverser une 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);
148
répondu
Georg Schölly
2009-03-20 17:13:54
avez-vous essayé la méthode getImageData ?
data = context.getImageData(x, y, 1, 1).data;
color = new Color([data[0], data[1], data[2]]);
46
répondu
Theo.T
2013-10-28 13:57:30
Ouais, découvrez getImageData(). Voici un exemple de rupture de captcha avec JavaScript en utilisant canvas:
8
répondu
Annika Backstrom
2009-03-20 17:07:09
Oui bien sûr, à condition que vous ayez son contexte. Comment obtenir le contexte canvas?
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);
}
8
répondu
Qwerty
2017-05-23 12:10:26
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);
}
8
répondu
someone
2015-04-17 13:44:39
notez que getImageData renvoie un snapshot. Les Implications sont les suivantes:
- les modifications n'entreront pas en vigueur avant la putImageData ultérieure."
- les cris de getImageData et de putImageData sont relativement lents
5
répondu
Don Park
2010-12-31 07:51:00
// 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];
4
répondu
Foreever
2015-02-06 11:03:17
vous pouvez utiliser i << 2
.
const data = context.getImageData(x, y, width, height).data;
const pixels = [];
for (let i = 0, dx = 0; dx < data.length; i++, dx = i << 2) {
pixels.push({
r: data[dx ],
g: data[dx+1],
b: data[dx+2],
a: data[dx+3]
});
}
0
répondu
Hors Sujet
2018-07-15 11:13:40