13

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 save of a blank canvas, i.e. a totally transparent blank PNG is sent with toDataURL(). One way of detecting a blank PNG is by switching a boolean value upon click of any editing/drawing functionality and reseting that value upon clear-screen.

However, such a method is not foolproof because a user may save the image after clicking a draw/edit function and yet not draw anything. Is there a more native approach to detect if the canvas returns a binary string that has changed since opening up on the browser? Or some other way to ensure that a blank transparent PNG is detected at client side?

pimvdb
  • 151,816
  • 78
  • 307
  • 352
Marvin Danig
  • 3,738
  • 6
  • 39
  • 71

2 Answers2

15

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.

Andrew D.
  • 8,130
  • 3
  • 21
  • 23
  • Whoa! That's the native approach :-) So which is a better answer in terms of resource utilization? My belief is that dataURL comparison will be less expensive than detecting via alpha/transparency, isn't it? – Marvin Danig Nov 03 '11 at 09:03
  • @marvindanig --> Your code works at first when the canvas has not been drawn yet but when the canvas had been drawn and cleared. The canvas blank detection fails? Why was it? – alyssaeliyah May 18 '15 at 03:42
  • Your code works at first when the canvas has not been drawn yet but when the canvas had been drawn and cleared. The canvas blank detection fails? Why was it? – alyssaeliyah May 18 '15 at 03:43
  • 1
    @Alyssa Gono What You mean by "cleared"? Do you mean [CanvasRenderingContext2D.clearRect()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect) ? Check just created simple example: http://jsbin.com/xepipayalo/1/edit?html,js,output It's tested in FireFox and Chrome and worked as expected – Andrew D. May 18 '15 at 05:19
  • Is this the kind of situation you're in?: http://stackoverflow.com/a/2390361/605396 (Just guessing!) – Marvin Danig May 19 '15 at 05:17
9

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!

Some Guy
  • 15,854
  • 10
  • 58
  • 67
  • +1 As a side note though, you're building up your path which becomes more and more complex each time. You'd better reset it after each stroke: http://jsfiddle.net/pimvdb/rX572/1/. – pimvdb Nov 03 '11 at 07:13
  • Also, you should probably cache the blank data URL – Casey Chu Aug 14 '12 at 08:38