Drawing an image from a data URL to a canvas

Question

How can i open an image in a Canvas    which is encoded  I am using the   var strDataURI   oCanvas toDataURL       The output is the encoded base 64 image  How can i draw this image on a canvas   I want to use the strDataURI  and create the Image   Is it poosible   If its not then what possibly can be the solution for loading the image on a canvas

User · Answer

Perhaps this fiddle would help ThumbGen - jsFiddle It uses File API and Canvas to dynamically generate thumbnails of images    function  doc        var oError   null      var oFileIn   doc getElementById  fileIn        var oFileReader   new FileReader        var oImage   new Image        oFileIn addEventListener  change   function              var oFile   this files 0           var oLogInfo   doc getElementById  logInfo            var rFltr        image  bmp image  cis -cod image  gif image  ief image  jpeg image  jpeg image  jpeg image  pipeg image  png image  svg  xml image  tiff image  x -cmu -raster image  x -cmx image  x -icon image  x -portable -anymap image  x -portable -bitmap image  x -portable -graymap image  x -portable -pixmap image  x -rgb image  x -xbitmap image  x -xpixmap image  x -xwindowdump   i         try               if  rFltr test oFile type                     oFileReader readAsDataURL oFile                   oLogInfo setAttribute  class    message info                    throw  Preview for     oFile name                else                   oLogInfo setAttribute  class    message error                    throw oFile name     is not a valid image                           catch  err                if  oError                    oLogInfo removeChild oError                   oError   null                      logInfo   fadeOut                        imgThumb   fadeOut                              oError   doc createTextNode err               oLogInfo appendChild oError                   logInfo   fadeIn                     false       oFileReader addEventListener  load   function  e            oImage src   e target result         false       oImage addEventListener  load   function              if  oCanvas                oCanvas   null              oContext   null                  imgThumb   fadeOut                      var oCanvas   doc getElementById  imgThumb            var oContext   oCanvas getContext  2d            var nWidth    this width  gt  500    this width   4   this width          var nHeight    this height  gt  500    this height   4   this height          oCanvas setAttribute  width   nWidth           oCanvas setAttribute  height   nHeight           oContext drawImage this  0  0  nWidth  nHeight               imgThumb   fadeIn           false      document

User · Answer

Given a data URL  you can create an image  either on the page or purely in JS  by setting the src of the image to your data URL  For example   var img   new Image  img src   strDataURI    The drawImage   method of HTML5 Canvas Context lets you copy all or a portion of an image  or canvas  or video  onto a canvas   You might use it like so   var myCanvas   document getElementById  my canvas id    var ctx   myCanvas getContext  2d    var img   new Image  img onload   function      ctx drawImage img 0 0      Or at whatever offset you like    img src   strDataURI    Edit  I previously suggested in this space that it might not be necessary to use the onload handler when a data URI is involved  Based on experimental tests from this question  it is not safe to do so  The above sequence   create the image  set the onload to use the new image  and then set the src   is necessary for some browsers to surely use the results

User · Answer

function drawDataURIOnCanvas strDataURI  canvas         use strict       var img   new window Image        img addEventListener  load   function              canvas getContext  2d   drawImage img  0  0               img setAttribute  src   strDataURI

User · Answer

You might wanna clear the old Image before setting a new Image    You also need to update the Canvas size for a new Image    This is how I am doing in my project          on image load update Canvas Image      this image onload        gt              Clear Old Image and Reset Bounds       canvasContext clearRect 0  0  this canvas width  this canvas height         this canvas height   this image height        this canvas width   this image width            Redraw Image       canvasContext drawImage          this image          0          0          this image width          this image height

User · Answer

in javascript   using jquery for canvas id selection     var Canvas2       canvas2   0           var Context2   Canvas2 getContext  2d            var image   new Image            image src    images eye jpg           Context2 drawImage image  0  0     html5    lt canvas id  canvas2  gt  lt  canvas gt

User · Answer

Just to add to the other answers  In case you don t like the onload callback approach  you can  quot promisify quot  it like so  let url    quot data image gif base64 R0lGODl    quot   let img   new Image    await new Promise r   gt  img onload r  img src url      now do something with img

[image] Drawing an image from a data URL to a canvas

Examples related to image

Examples related to html

Examples related to canvas

Examples related to data-uri