且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-11-29 15:52:16

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 样式声明,因为边框包含在画布图像中,因此 alpha chanel 总是不等于归零.

Dont use CSS style declarations like border: 1px solid black; for CANVAS, because border included into canvas image, and, as result, alpha chanel is always not equals to zero.