javascript - 如何检测通过 Canvas 生成的图像是否为空白(透明 PNG)？

Question

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

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

Answer 1

HTML:

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

脚本:

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;
}

更新:

不要对 CANVAS 使用 border: 1px solid black; 这样的 CSS 样式声明，因为 border 包含在 canvas 图像中，因此，alpha chanel 总是不等于归零。