从HTML画布中获取Pixel？

Question

从HTML画布中获取Pixel是否可以查询HTML画布对象以获得特定位置的颜色？

Answer 1

有一节是关于像素操纵在W3C文档中。

这是关于如何倒置图像的一个例子:

// 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);

Answer 2

您试过getImageData方法吗？

var data = context.getImageData(x, y, 1, 1).data;var rgb = [ data[0], data[1], data[2] ];

Answer 3

是的，当然，只要你有它的背景。如何获得画布上下文？

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/ORfunction getPixelXY(imgData, x, y) {
  return getPixel(imgData, y*imgData.width+x);}