如何檢測通過畫布生成的圖像是否為空白（透明PNG）？

Question

我正在開發一個應用程序，在該應用程序中，在HTML5畫布上創建/編輯圖像，然后將其保存到文件存儲/雲中。 問題在於“節約效率”。 在保存空白畫布時，即使用toDataURL()發送完全透明的空白PNG。 檢測空白PNG的一種方法是在點擊任何編輯/繪圖功能時切換布爾值，並在清除屏幕上重置該值。

然而，這樣的方法並非萬無一失，因為用戶可以在點擊繪制/編輯功能之后保存圖像但是不繪制任何東西。 是否有更原生的方法來檢測畫布是否返回自瀏覽器打開后已更改的二進制字符串？ 或者其他一些方法來確保在客戶端檢測到空白的透明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;
}

更新 ：

不要使用像border: 1px solid black;這樣的CSS樣式聲明border: 1px solid black; 對於CANVAS ，因為邊框包含在畫布圖像中，因此，alpha chanel始終不等於零。

Answer 2

這不是原生的，但這應該有效，因為空白畫布總是生成相同的數據URL。

因此，您可以創建一個隱藏的畫布，獲取該畫布的數據URL，如果它與您的編輯器匹配，則不要上傳它。 就那么簡單。

演示。 首先，不經過畫布就去保存。 然后過去然后點擊保存。 田田！