Question

我在200x200px画布元素上移动鼠标时，用clearRect删除了一些像素。现在，我想检查是否没有要删除的像素（所有40.000px被删除），然后重置或加载新图像。

canvas.onmousemove = function(e) {
  x = e.clientX - e.target.offsetLeft;
  y = e.clientY - e.target.offsetTop;
  context.clearRect(x, y, 20, 20);
}

Answer 1

有两种方法可以检测画布是否为空白：

比较data-uris

在开始绘制之前，首先从空白画布中抓取一个字符串。如果更改画布的大小，还需要更新此字符串。

var blankCanvas = canvas.toDataURL('image/bmp');

这将在支持此格式的浏览器中获得BMP（未压缩）图像，否则默认为PNG。获取未压缩的图像会增加内存使用量，但在获取字符串时也会提高性能（但在比较时会减慢，如果很大）。

然后在你想比较的时候做同样的事情：

var currentCanvas = canvas.toDataURL('image/bmp');

if (currentCanvas === blankCanvas) {
    /* it's empty */
}

比较像素

唯一的方法是遍历像素以查看所有值是否为黑色透明。

这是一种方法：每次需要检查时调用此方法（通常在mouseup事件上） -

function hasPixels() {

    var idata = context.getImageData(0, 0, canvas.width, canvas.height),
        buffer = new Uint32Array(idata.data.buffer),  // use 32-bit buffer
        len = buffer.length,
        i;

    for(; i < len; i++) {
        if (buffer[i] !== 0) return true;
    }

    return false;
}

如果画布上还有任何像素，则返回true。

32位缓冲区允许我们当时检查一个完整的像素，并且在比较每个组件时表现更好。

备注

这两种方法都需要CORS requirements才能满足图像的要求才能实现。这是浏览器中的一种安全机制，可防止从画布交叉原点中提取像素。

哪种方法更快取决于各种因素，例如画布大小，浏览器实现等等。您需要检查您的方案。我可能会为第二种解决方案添加一个硬币以供一般使用，同时还有低资源消耗的好处。但对于200x200的画布，两者都应该可以正常工作。

HTML5 canvas clearRect计数剩余像素

1 个答案:

比较data-uris

比较像素

备注