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

How to detect if an image generated via canvas is blank (transparent PNG)?

本文关键字：是否 图像 空白 PNG 透明 何检测 检测 布生成      更新时间：2023-09-26

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

然而，这样的方法并不是万无一失的，因为用户可能在点击绘制/编辑功能后保存图像，但却没有绘制任何东西。是否有一种更原生的方法来检测画布是否返回一个二进制字符串，该字符串在浏览器上打开后发生了变化?或者其他一些方法来确保在客户端检测到空白的透明PNG ?

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

:

不要使用CSS样式声明像border: 1px solid black;的CANVAS，因为边界包含在画布图像，并且，作为结果，alpha香奈儿总是不等于零。

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

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

演示。首先，点击保存，不要越过画布。然后浏览一下，然后点击保存。大作。

相关文章：