Question

大家，

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

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

_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;
   }

任何帮助将不胜感激。

Answer 1

对于此方案，您可以执行以下操作：

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

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

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上提取部分缓冲区，但是您不需要创建第二个画布，这可能是执行此操作的可选方式。 / p>

希望这有帮助！

canvas getImageData两个图像

1 个答案: