Base64 PNG data to HTML5 canvas

Question

I want to load a PNG image encoded in Base64 to canvas element  I have this code    lt html gt   lt head gt   lt  head gt   lt body gt   lt canvas id  c  gt  lt  canvas gt   lt script type  text javascript  gt   var canvas   document getElementById  c    var ctx   canvas getContext  2d     data     data image png base64 iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE h1AAAAAElFTkSuQmCC    ctx drawImage data  0  0     lt  script gt   lt  body gt   lt  html gt    In Chrome 8 I get the error  Uncaught TypeError  Type error  And in Firefox s Firebug this   The type of an object is incompatible with the expected type of the parameter associated to the object  code   17   In that base64 is 5x5px black PNG square that I have made in GIMP and turn it to base64 in GNU Linux s program base64

User · Accepted Answer

By the looks of it you need to actually pass drawImage an image object like so

_x000D_

var canvas = document.getElementById("c");_x000D_
var ctx = canvas.getContext("2d");_x000D_
_x000D_
var image = new Image();_x000D_
image.onload = function() {_x000D_
  ctx.drawImage(image, 0, 0);_x000D_
};_x000D_
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";

_x000D_

<canvas id="c"></canvas>

_x000D_

I've tried it in chrome and it works fine.

User · Answer

Jerryf s answer is fine  except for one flaw      The onload event should be set before the src  Sometimes the src can   be loaded instantly and never fire the onload event     Like Totty js pointed out    var canvas   document getElementById  c    var ctx   canvas getContext  2d     var image   new Image    image onload   function         ctx drawImage image  0  0      image src    data image   png base64 iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE h1AAAAAElFTkSuQmCC

[html] Base64 PNG data to HTML5 canvas

Examples related to html

Examples related to canvas

Examples related to png

Examples related to base64