0

大家，

我需要获取画布对象中图像的颜色。

这就是我现在正在做的事情：

_canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;

这就是我想要的，但我有两张图片...一张没有颜色只是绘制...另一个是相同的，但每个部分都有颜色...我想向用户展示..没有颜色的图像......当鼠标悬停时......获得“返回”颜色。

我希望你明白我在这里想要做什么。

我以这种方式添加图像：

loadIMLImage(context, "http://localhost:51413/img/image_color.png");
loadIMLImage(context, "http://localhost:51413/img/image.png");

这就是方法

   function loadIMLImage(context, source) {
       base_image = new Image();
       base_image.src = source;
       base_image.onload = function () {
           context.drawImage(base_image, 100, 100);
       }
       return base_image;
   }

任何帮助将不胜感激。

4

1 回答 1

0

对于这种情况，您可以执行以下操作：

  • 先绘制后缓冲图像
  • 提取像素缓冲区以供重复使用（全局存储）
  • 绘制主图像
  • 使用已提取的缓冲区获取坐标检查时

假设您已加载图像的示例：

var context = _canvas.getContext('2d'),
    buffer;

...image loaded and ready here...

// draw back image
context.drawImage(backImage, 0, 0);

// extract buffer right away
buffer = context.getImageData(0, 0, _canvas.width, _canvas.height).data;

// draw main image on top (clear canvas first if smaller)
context.drawImage(mainImage, 0, 0);

缓冲区和画布现已准备就绪。您拥有的缓冲区是一个副本，提取后不会受到更改的影响，因此我们可以安全地应对更改。

现在对于以事件为参数的每个事件调用：

function getPixel(e) {

    var rect = _canvas.getBoundingClientRect(), // get canvas abs. position
        x = e.clientX - rect.left,              // adjust mouse positions
        y = e.clientY - rect.top,
        p = (y * _canvas.width + x) * 4;        // calc offset in buffer

    return {
        r: buffer[p],
        g: buffer[p+1],
        b: buffer[p+2],
        a: buffer[p+3]
    };
}

这不仅工作得更快，因为您不需要每次都通过 CPU 提取缓冲区的一部分，而且您也不需要创建第二个画布，这将是可选的方法。

希望这可以帮助！

于 2014-03-31T00:50:05.710 回答