Question

我正在开发一个应用程序，在该应用程序中，在HTML5画布上创建/编辑图像，然后将其保存到文件存储/云中。问题在于“节约效率”。在保存空白画布时，即使用toDataURL()发送完全透明的空白PNG。检测空白PNG的一种方法是在点击任何编辑/绘图功能时切换布尔值，并在清除屏幕上重置该值。

然而，这种方法并非万无一失，因为用户可以在点击绘制/编辑功能后保存图像，但不能绘制任何内容。是否有更原生的方法来检测画布是否返回自浏览器打开后已更改的二进制字符串？或者其他一些方法来确保在客户端检测到空白的透明PNG？

Answer 1

HTML：

<canvas id="canvas_img" width="300" height="200" border="0"></canvas>

SCRIPT：

isCanvasTransparent(document.getElementById("canvas_img"));

function isCanvasTransparent(canvas) { // true if all pixels Alpha equals to zero
  var ctx=canvas.getContext("2d");
  var imageData=ctx.getImageData(0,0,canvas.offsetWidth,canvas.offsetHeight);
  for(var i=0;i<imageData.data.length;i+=4)
    if(imageData.data[i+3]!==0)return false;
  return true;
}

<强>更新：

不要为border: 1px solid black;使用CANVAS之类的CSS样式声明，因为边框包含在画布图像中，因此，alpha chanel始终不等于零。

Answer 2

这不是原生的，但这应该有效，因为空白画布总是生成相同的数据URL。

因此，您可以创建一个隐藏的画布，获取该画布的数据URL，如果它与您的编辑器匹配，则不要上传它。就这么简单。

Demo. First, go hit save without going over the canvas. Then go over it and then hit save. Tada!

如何检测通过画布生成的图像是否为空白（透明PNG）？

2 个答案: