提交之前的画布检查
问题描述:
我有一个页面,用户可以在画布上绘制并将图像保存到服务器上的文件中。 画布有默认的黑色背景。有没有办法检查用户是否在使用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;
}
}
}
答
假设的东西是在画布上绘制,当你点击它,你可以点击绑定甚至表明画布一直是设置一个标志画布绘制。
例如使用jQuery:
var canvasDrawnOn = false;
$("#canvas").click(function(){
canvasDrawnOn = true;
});
答
我前一阵子想出了这一点,但它不适合我的目的。
首先,我把图像数据以base64:
var imgdata = canvas.toDataURL();
然后我得到一个MD5哈希(我在PHP中做到这一点,但它并不重要;要做到这一点在JavaScript中,你必须使用的图像数据的库,如this):
if(h == EMPTYCANVAS) ...
:
var h = $.md5(imgdata);
在此之后,可以用一个空的画布的预先计算的散列比较MD
它不适用于我,因为用户设置图像尺寸,而不同尺寸的画布将具有不同的散列。克服这个问题的建议(同时避免逐像素遍历)会很棒。
什么是用来让用户画?它可能有某种可以阅读的事件或财产。 如果没有,只需从画布上读出数据并检查每个像素以查找其颜色。 – 2010-05-26 20:23:00
有没有其他的方法,而不是循环和检查每个像素? – smokinguns 2010-05-26 20:30:00
这取决于。你用什么库让用户画图?毕竟,这不是一个内置功能。 – 2010-05-26 21:13:12