Antworten:
Es gibt einen Abschnitt über Pixelmanipulation in der W3C - Dokumentation.
Hier ist ein Beispiel zum Invertieren eines Bildes :
var context = document.getElementById('myCanvas').getContext('2d');
// 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);
Haben Sie die Methode getImageData ausprobiert?
var data = context.getImageData(x, y, 1, 1).data;
var rgb = [ data[0], data[1], data[2] ];
idx = (y * width + x) * 4
der Antwort von Georg zu berechnen . Vergessen Sie jedoch nicht, das zwischengespeicherte Objekt jedes Mal zu aktualisieren, wenn sich das Bild ändert.
Color()
Konstruktor? Das scheint nirgendwo zu existieren
Ja sicher, vorausgesetzt, Sie haben den Kontext. Wie bekomme ich Canvas-Kontext?
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);
}
PS: Wenn Sie vorhaben, die Daten zu mutieren und auf die Leinwand zurück zu zeichnen, können Sie sie verwendensubarray
var
a = getPixel(idt, 188411), // Array(4) [0, 251, 0, 255]
b = idt.data.subarray(188411*4, 188411*4 + 4) // Uint8ClampedArray(4) [0, 251, 0, 255]
a[0] = 255 // does nothing
getPixel(idt, 188411), // Array(4) [0, 251, 0, 255]
b[0] = 255 // mutates the original imgData.data
getPixel(idt, 188411), // Array(4) [255, 251, 0, 255]
// or use it in the function
function getPixel(imgData, index) {
var i = index*4, d = imgData.data;
return imgData.data.subarray(index, index+4) // returns subarray [R,G,B,A]
}
Sie können damit auf http://qry.me/xyscope/ experimentieren. Der Code dafür befindet sich in der Quelle. Kopieren Sie ihn einfach in die Konsole.
context.getImageData(x, y, 1, 1);
function GetPixel(context, x, y)
{
var p = context.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);
}
Ja, schauen Sie sich getImageData () an. Hier ist ein Beispiel für das Brechen von Captcha mit JavaScript mithilfe von Canvas:
// 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];
Praktischer langer Oneliner mit langen Lesepixeln (Pixel hier zeichnen )
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
Die erste Zeile ist der erste Teil, in dem Sie die Canvas-Auswahl ändern können s='.myCanvas'
. Dieser praktische Oneliner eignet sich gut für Testalgorithmen oder Proof-of-Concept, aber für Produktionscode ist es besser, anderen klareren und lesbareren Code zu verwenden.
Wenn Sie eine bestimmte Pixelfarbe extrahieren möchten, indem Sie die Pixelkoordinaten in die Funktion übergeben, ist dies hilfreich
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
Ist die Koordinate Sie herausfiltern Farbe wünschen.
var color=detectColor(x,y)
Die Farbe ist das Objekt, werden Sie den RGB - Wert von erhalten color.r
, color.g
, color.b
.