Có thể truy vấn đối tượng Canvas HTML để lấy màu tại một vị trí cụ thể không?getPixel từ HTML Canvas?
Trả lời
Có một phần về pixel manipulation trong tài liệu W3C.
Dưới đây là 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, hãy kiểm tra getImageData(). Dưới đây là một ví dụ về vi phạm Captcha với JavaScript sử dụng vải:
Bạn đã thử phương pháp getImageData?
data = context.getImageData(x, y, 1, 1).data;
color = new Color([data[0], data[1], data[2]]);
Lưu ý rằng getImageData trả về ảnh chụp nhanh. Những gợi ý là:
- thay đổi sẽ không có hiệu lực cho đến khi putImageData sau
- getImageData và putImageData gọi là tương đối chậm
Có chắc chắn, miễn là bạn có ngữ cảnh của nó. 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! Cảm ơn nó hoạt động rất tốt và nó là waay nhanh hơn gọi 'context.getImageData (x, y, 1, 1);' – adelriosantiago
Vâng nó nhanh hơn 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);
}
không nên này được context.getImageData() và không canvas.getImageData()? – Crashalot
@Crashalot phụ thuộc vào những gì var "canvas" chứa, nó có thể chỉ đơn giản là bối cảnh của một canvas với một tên var crappy. – tbleckert
Wow, rất tao nhã! Tôi nghĩ về việc tìm kiếm điểm trong toàn bộ ngữ cảnh, nhưng điều này thông minh hơn nhiều. – TheOne