getPixel aus HTML Canvas?
-
21-08-2019 - |
Frage
Ist es möglich, ein HTML-Canvas-Objekt abzufragen, um die Farbe an einer bestimmten Stelle zu bekommen?
Lösung
Es gibt einen Abschnitt über Pixelmanipulation in der W3C-Dokumentation .
Hier ist ein Beispiel dafür, wie ein Bild invertieren :
// 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);
Andere Tipps
Haben Sie die getImageData Methode versucht?
var data = context.getImageData(x, y, 1, 1).data;
var rgb = [ data[0], data[1], data[2] ];
Ja sicher, vorausgesetzt, Sie haben ihren Kontext. Wie Leinwand Kontext zu bekommen?
var imgData = context.getImageData(0,0,canvas.width,canvas.height);
// { data: [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);
}
Yup Besuche getImageData (). Hier ist ein Beispiel des Brechens captcha mit JavaScript Leinwand mit:
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);
}
Beachten Sie, dass getImageData einen Snapshot zurückgibt. Auswirkungen sind:
- Die Änderungen werden erst wirksam, wenn nachfolgende putImageData unter
- getImageData und putImageData Anrufe sind relativ langsam
// 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];
Sie können i << 2
verwenden.
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]
});
}
Wenn Sie, indem die Koordinaten des Pixels in die Funktion bestimmte Farbe der Pixel extrahieren möchten, dies wird sich als nützlich
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function detectColor(x,y){
data=ctx.getImageData(x,y,1,1).data;
col={
r:data[0],
g:data[1],
b:data[2]
};
return col;
}
x, y die Koordinate Sie Farbe auszufiltern.
var color=detectColor(x,y)
Die Farbe ist das Objekt, werden Sie den RGB-Wert von color.r, color.g, color.B erhalten.
Handy lange Lese-Pixel oneliner (ziehen Pixel hier )
let rp=((s='.myCanvas',c=document.querySelector(s),ctx=c.getContext('2d')) => (x,y)=>Object.values(ctx.getImageData(x, y, 1, 1).data))();
rp(10,20) // rp(x,y) returns: [r,g,b,a] with values 0-255
let rp=((s='.myCanvas',c=document.querySelector(s),ctx=c.getContext('2d')) => (x,y)=>Object.values(ctx.getImageData(x, y, 1, 1).data))();
let pp= ((s='.myCanvas',c=document.querySelector(s),ctx=c.getContext('2d'),id=ctx.createImageData(1,1)) => (x,y,r=0,g=0,b=0,a=255)=>(id.data.set([r,g,b,a]),ctx.putImageData(id, x, y),c))()
// draw point
pp(50,60, 198,236,247,250) // x,y, r,g,b,a
// read color
let c = rp(50,60);
console.log(c);
<canvas class="myCanvas" width=100 height=100 style="background: black"></canvas>
Die erste Zeile ist Anfangsteil, wo Sie Leinwand Selektor s='.myCanvas'
ändern können. Dieser handliche oneliner ist gut für Testalgorithmen oder Proof of Concept machen, aber für die Produktion Code ist besser anderen klaren und lesbaren Code zu verwenden.