Ist es möglich, ein HTML-Canvas-Objekt abzufragen, um die Farbe an einer bestimmten Stelle zu erhalten?getPixel von HTML Canvas?
Antwort
Es gibt einen Abschnitt über pixel manipulation in der W3C-Dokumentation.
Hier 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);
Yup Besuche getImageData(). Hier ist ein Beispiel der Captcha Bruch mit JavaScript mit Leinwand:
Haben Sie die getImageData Methode versucht?
data = context.getImageData(x, y, 1, 1).data;
color = new Color([data[0], data[1], data[2]]);
Beachten Sie, dass getImageData einen Snapshot zurückgibt. Auswirkungen sind:
- Die Änderungen werden erst wirksam, wenn nachfolgende putImageData
- getImageData und putImageData Anrufe entgegennehmen
Ja sicher, relativ langsam sind, vorausgesetzt, Sie seinen Kontext haben. 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);
}
Yay! Danke, es funktioniert sehr gut und es ist waay schneller als das Aufrufen von 'context.getImageData (x, y, 1, 1);' – adelriosantiago
Ja, es ist 10x schneller: [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);
}
sollte dies nicht context.getImageData() und nicht canvas.getImageData() sein? – Crashalot
@Crashalot hängt davon ab, was die Var "Leinwand" enthält, es könnte einfach der Kontext einer Leinwand mit einem beschissenen var Namen sein. – tbleckert
Wow, sehr elegant! Ich dachte über die Suche nach dem Punkt im gesamten Kontext nach, aber das ist viel klüger. – TheOne