Best IT Recipes

How to save a canvas as an image With canvas.toDataURL ()?

I am currently creating my own HTML5 / Phonegap web application and I cannot figure out how to save my canvas as an image using canvas.toDataURL() . Can someone help me?

Here is the code, what's wrong with it?

// My canvas was called "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:



 <div id="createPNGButton"> <button onclick="putImage()">Save as Image</button> </div>
+75
javascript html5 save cordova canvas
May 20 '12 at 11:46
source share
8 answers

Here is the code. without mistakes.

 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
+82
Mar 28 '13 at 15:16
source share

You can use canvas2image to request a download.

I had the same problem, here is a simple example that adds an image to a page and causes the browser to load it:

 <html> <head> <script src="http://hongru.imtqy.com/proj/canvas2image/canvas2image.js"></script> <script> 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); } </script> </head> <body onload="draw()"> <canvas width=200 height=200 id="thecanvas"></canvas> <div><button onclick="to_image()">Draw to Image</button></div> <image id="theimage"></image> </body> </html>
+18
May 20 '12 at 12:39
source share

I created a small library that does this (along with some other convenient conversions). It was called reimg and it is really easy to use.

ReImg.fromCanvas(yourCanvasElement).toPng()

+5
Aug 28 '15 at 10:10
source share

This work for me: (Google Chrome only)

 <html> <head> <script> 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); } </script> </head> <body onload="draw()"> <canvas width=200 height=200 id="thecanvas"></canvas> <div><button onclick="downloadImage()">Download</button></div> <image id="theimage"></image> </body> </html>
+5
Mar 03 '16 at 21:28
source share

Instead imageElement.src = myImage; you should use window.location = myImage;

And even after that, the browser will display the image. You can right-click and use the "Save Link" button to upload the image.

See this link for more information.

+1
May 20 '12 at 11:58 a.m.
source share

Like 1000Bugy's answer , but easier because you don’t need to do the on-the-fly binding and manually send the click event (plus IE fix).

If you make the download button an anchor, you can execute it before the default snap functionality is launched. So, onAnchorClick you can set the href binding to the base64 canvas image and the anchor loading attribute for what you want to call your image.

This does not work in (current) IE, because it does not implement the load attribute and does not allow uris data to be loaded. But this can be fixed using window.navigator.msSaveBlob .

Thus, your anchor event handler will follow (where anchor , canvas and fileName are scopes):

 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 is the violin

+1
Jun 02 '17 at 8:10
source share

This solution allows you to change the name of the downloaded file:

HTML:

 <a id="link"></a>

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();
0
Jun 11 '17 at 19:28
source share

@Wardenclyffe and SColvin, both of you are trying to save the image using canvas, rather than using canvas'context. you should try ctx.toDataURL ();

Try the following:

var canvas1 = document.getElementById ("yourCanvasId");
var ctx = canvas1.getContext ("2d");
var img = new Image ();
img.src = ctx.toDataURL ('image / png');
ctx.drawImage (IMG, 200150);

You can also link to the 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

-8
Feb 21 '13 at 9:22
source share


More articles:


All Articles