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

Question

I am working on an application in which an image is created/edited on a HTML5 canvas and then saved into a file-store/cloud. The problem is that of \"saving efficiency\". On sav

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

UPDATE:

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.

Answer 2

This isn't native, but this should work, because a blank canvas always generates the same data URL.

So, you could create a hidden canvas, get that canvas's data URL and if it matches that of your editor, then don't upload it. Simple as that.

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