How To Save Canvas As An Image With canvas toDataURL

Question

I m currently building a HTML5 web app Phonegap native app and I can t seem to figure out how to save my canvas as an image with canvas toDataURL    Can somebody help me out   Here s the code  what s wrong with it     My canvas was named  canvasSignature   JavaScript     function putImage       var canvas1   document getElementById  canvasSignature              if  canvas1 getContext         var ctx   canvas1 getContext  2d                         var myImage   canvas1 toDataURL  image png                var imageElement   document getElementById  MyPix        imageElement src   myImage                                    HTML5      lt div id  createPNGButton  gt       lt button onclick  putImage    gt Save as Image lt  button gt           lt  div gt

User · Answer

Instead of imageElement src   myImage  you should use window location   myImage    And even after that the browser will display the image itself  You can right click and use  Save Link  for downloading the image   Check this link for more information

User · Answer

Similar to 1000Bugy s answer but simpler because you don t have to make an anchor on the fly and dispatch a click event manually  plus an IE fix   If you make your download button an anchor you can highjack it right before the default anchor functionality is run  So onAnchorClick you can set the anchor href to the canvas base64 image and the anchor download attribute to whatever you want to name your image  This does not work in  the current  IE because it doesn t implement the download attribute and prevents download of data uris  But this can be fixed by using window navigator msSaveBlob instead  So your anchor click event handler would be as followed  where anchor  canvas and fileName are scope lookups   function onClickAnchor e      if  window navigator msSaveBlob        window navigator msSaveBlob canvas msToBlob    fileName       e preventDefault        else       anchor setAttribute  download   fileName       anchor setAttribute  href   canvas toDataURL            Here s a fiddle

User · Answer

Wardenclyffe and  SColvin  you both are trying to save image using the canvas  not by using canvas s context  both you should try to ctx toDataURL    Try This    var canvas1   document getElementById  yourCanvasId      lt br gt  var ctx   canvas1 getContext  2d    lt br gt  var img   new Image    lt br gt  img src   ctx toDataURL  image png    lt br gt  ctx drawImage img 200 150   lt br gt    Also you may refer to following links   http   tutorials jenkov com html5-canvas todataurl html  http   www w3 org TR 2012 WD-html5-author-20120329 the-canvas-element html the-canvas-element

User · Answer

This work for me   Only google chrome    lt html gt   lt head gt       lt script gt              function draw                    var canvas   document getElementById  thecanvas                    var ctx   canvas getContext  2d                    ctx fillStyle    rgba 125  46  138  0 5                    ctx fillRect 25 25 100 100                   ctx fillStyle    rgba  0  146  38  0 5                    ctx fillRect 58  74  125  100                              function downloadImage                                 var canvas   document getElementById  thecanvas                    var image   canvas toDataURL                     var aLink   document createElement  a                    var evt   document createEvent  HTMLEvents                    evt initEvent  click                    aLink download    image png                   aLink href   image                  aLink dispatchEvent evt                      lt  script gt   lt  head gt   lt body onload  draw    gt       lt canvas width 200 height 200 id  thecanvas  gt  lt  canvas gt       lt div gt  lt button onclick  downloadImage    gt Download lt  button gt  lt  div gt       lt image id  theimage  gt  lt  image gt   lt  body gt   lt  html gt

User · Answer

You can use canvas2image to prompt for download   I had the same issue  here s a simple example that both adds the image to the page and forces the browser to download it    lt html gt       lt head gt           lt script src  http   hongru github io proj canvas2image canvas2image js  gt  lt  script gt           lt script gt              function draw                    var canvas   document getElementById  thecanvas                    var ctx   canvas getContext  2d                    ctx fillStyle    rgba 125  46  138  0 5                    ctx fillRect 25 25 100 100                    ctx fillStyle    rgba  0  146  38  0 5                    ctx fillRect 58  74  125  100                              function to image                    var canvas   document getElementById  thecanvas                    document getElementById  theimage   src   canvas toDataURL                    Canvas2Image saveAsPNG canvas                          lt  script gt       lt  head gt       lt body onload  draw    gt           lt canvas width 200 height 200 id  thecanvas  gt  lt  canvas gt           lt div gt  lt button onclick  to image    gt Draw to Image lt  button gt  lt  div gt           lt image id  theimage  gt  lt  image gt       lt  body gt   lt  html gt

User · Answer

You can try this  create a dummy HTML anchor  and download the image from there like        Convert canvas to image document getElementById  btn-download   addEventListener  click   function e        var canvas   document querySelector   my-canvas         var dataURL   canvas toDataURL  image jpeg   1 0        downloadImage dataURL   my-canvas jpeg            Save   Download image function downloadImage data  filename    untitled jpeg         var a   document createElement  a        a href   data      a download   filename      document body appendChild a       a click

User · Answer

This solution allows you to change the name of the downloaded file   HTML    lt a id  link  gt  lt  a gt    JAVASCRIPT     var link   document getElementById  link      link setAttribute  download    MintyPaper png      link setAttribute  href   canvas toDataURL  image png   replace  image png    image octet-stream       link click

User · Answer

You cannot use the methods previously mentioned to download an image when running in Cordova   You will need to use the Cordova File Plugin  This will allow you to pick where to save it and leverage different persistence settings  Details here  https   cordova apache org docs en latest reference cordova-plugin-file   Alternatively  you can convert the image to base64 then store the string in localStorage but this will fill your quota pretty quickly if you have many images or high-res

User · Answer

I created a small library that does this  along with some other handy conversions   It s called reimg  and it s really simple to use   ReImg fromCanvas yourCanvasElement  toPng

User · Answer

Here is some code  without any error   var image   canvas toDataURL  image png   replace  image png    image octet-stream        here is the most important part because if you dont replace you will get a DOM 18 exception    window location href image     it will save locally

[javascript] How To Save Canvas As An Image With canvas.toDataURL()?

Examples related to javascript

Examples related to html

Examples related to cordova

Examples related to canvas

Examples related to save