如何检查是否在画布上绘制了某些内容

Question

如何检查画布上是否有数据或某些内容？

我有这个<canvas id="my-canvas"></canvas>元素,我想检查我的画布上是否画了一些东西.

Answer 1

我找到的一个好方法是使用该toDataURL()函数并将其与另一个空白画布进行比较.如果它们不同,那么你要比较它的东西就有了它.像这样的东西:

canvas = document.getElementById('editor');
ctx = canvas.getContext('2d');

canvas.addEventListener('mousemove',function(e){
    ctx.lineTo(e.pageX,e.pageY);
    ctx.stroke();
});

document.getElementById('save').addEventListener('click',function(){
    if(canvas.toDataURL() == document.getElementById('blank').toDataURL())
        alert('It is blank');
    else
        alert('Save it!');
});

这是一个小提琴

我不能相信这一点,我只是偶然发现了它并解决了我同样的问题.也许这会在某些时候帮助某人.

Answer 2

而不是检查每个单个像素,仅在每次画布被填充或描边时记录可能更有效.

一旦填充或中风或已经发生,那么你就知道已经绘制了一些东西.

当然'how'是非常特定于应用程序的,因为我们不知道如何首先绘制画布.

Answer 3

到目前为止,我还没有在Stackoverflow中看到过这样的问题..但是有趣的一个回答..

只有这样,(我猜)是由像素通过像素检查,即检查R, G, B, A每一个像素的,
如果这些值都等于零,那么我们可以说,像素是空的..
这是我以前写的技术下面的代码片段..只是通过它

window.onload = function() {
  var canvas  = document.getElementById('canvas');
  if(!canvas.getContext) return;
  var ctx     = canvas.getContext('2d');
  var w       = canvas.width = canvas.height = 100;
  var drawn   = null;
  var d       = ctx.getImageData(0, 0, w, w); //image data 
  var len     = d.data.length;
  for(var i =0; i< len; i++) {
    if(!d.data[i]) {
      drawn = false;
    }else if(d.data[i]) {
      drawn = true;
      alert('Something drawn on Canvas');
      break;
    }
  }
  if(!drawn) {
    alert('Nothing drawn on canvas.. AKA, Canvas is Empty');
  }
}

在这里测试一下