Question

我有一个页面，用户可以在画布上绘制并将图像保存到服务器上的文件中。画布具有默认的黑色背景。有没有办法检查用户是否在使用toDataURL（）函数提交画布图像的数据URL表示之前在画布上绘制了任何内容？因此，如果用户没有在画布上绘制任何内容（它将是带有黑色背景的空白画布），则不会在服务器上创建图像。我应该遍历画布的每个像素来确定这个吗？这是我目前正在做的事情：

var currentPixels  = context.getImageData(0, 0, 600, 400);
    for (var y = 0; y < currentPixels.height; y += 1) {

         for (var x = 0; x < currentPixels.width; x += 1) {
                for (var c = 0; c < 3; c += 1) {

                var i = (y*currentPixels.width + x)*4 + c;

                if(currentPixels.data[i]!=0)
                break;

                }

         }

  }

Answer 1

假设在单击它时在画布上绘制了某些内容，您甚至可以将一个单击绑定到画布上，该画布设置一个标志，指示画布已被绘制。

例如使用jQuery：

var canvasDrawnOn = false;

$("#canvas").click(function(){
    canvasDrawnOn = true;
});

Answer 2

我刚才想出了这个，但它不符合我的目的。

首先我在base64中获取图像数据：

var imgdata = canvas.toDataURL();

然后我得到一个MD5哈希（我在PHP中执行此操作，但无关紧要;要在JavaScript中执行此操作，您必须使用图像数据的库，例如this）：

var h = $.md5(imgdata);

在此之后，您可以将MD5与空白画布的预先计算的哈希进行比较：

if(h == EMPTYCANVAS) ...

它对我不起作用，因为用户设置图像尺寸，不同尺寸的画布会有不同的散列。克服这个问题的建议（虽然避免逐个像素地遍历）会很棒。

提交前画布检查

2 个答案: