Hello,
Today we will see how we can export our canvas to an image in well known formats
- png
- jpeg
Lets start with declaring our markup
The Markup
|
1 2 3 4 |
<canvas id="mycanvas" width="700" height="700"> Your browser does not support HTML5 Canvas. Try downloading latest Chrome, Firefox, Safari, Opera or Internet explorer. </canvas> <a href="javscript:void(0)" onclick="exportCanvas()">Export</a> |
Above markup is pretty much what I have used in my previous posts so it must be now familiar to you. Notice our anchor tag has a click event handler.
Lets now check what JavaScript functionality is required. There are gazillion ways to do what I have done below so don’t judge on the code but rather see how our problem is solved.
The JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
function getCanvasContext() { var mycanvas = document.getElementById("mycanvas"); var canvas_context = null; var x,y = 0; if(mycanvas && mycanvas.getContext) { canvas_context = mycanvas.getContext("2d"); } else { return false; } return canvas_context; } function canvasImgExperiment() { canvas_context = getCanvasContext(); if(canvas_context) { canvas_context.fillStyle = "#FFFFFF"; canvas_context.fillRect(0,0,700,700); // draw something canvas_context.fillStyle = "#C00000"; canvas_context.font = "40px arial"; canvas_context.fillText("This canvas will be exported",100,300); } } function exportCanvas(){ var mycanvas = document.getElementById("mycanvas"); if(mycanvas && mycanvas.getContext) { var img = mycanvas.toDataURL("image/png;base64;"); //img = img.replace("image/png","image/octet-stream"); // force download, user would have to give the file name. // you can also use anchor tag with download attribute to force download the canvas with file name. window.open(img,"","width=700,height=700"); } else { alert("Can not export"); } } canvasImgExperiment(); |
So we are just drawing a string “This canvas will be exported” on our canvas and our exportCanvas() method is responsible for exporting our canvas to an image file that opens in new window from where users can right click on the image and save it on their disk.
Notice this line
|
1 |
var img = mycanvas.toDataURL("image/png;base64;"); |
Thats where we are telling our canvas function to export it as png file. To export it as jpeg do this instead
|
1 |
var img = mycanvas.toDataURL("image/jpeg;base64;"); |
Demo
http://jaspreetchahal.org/examples/html5/canvas-image-export.html
Above is just a basic usage example. But you should get an idea
Another way to force download an image using JavaScript would be to feed our canvas data URL to an anchor href with download attribute as shown below
The Markup (method 2 – force download)
Be aware that this works only on browsers that supports download attribute such as Google Chrome. We will change our exportCanvas() method in a sec.
|
1 2 |
<a href="javscript:void(0)" onclick="exportCanvas()">Prepare</a> <a href="" id="download" download="canvasexport.png"></a> |
The Javascript
Updated exportCanvas() method is shown below
|
1 2 3 4 5 6 7 |
var mycanvas = document.getElementById("mycanvas"); if(mycanvas && mycanvas.getContext) { var img = mycanvas.toDataURL("image/png;base64;"); anchor = document.getElementById("download"); anchor.href = img; anchor.innerHTML = "Download"; } |
Remember that this is just a pointer. How you end up using above functionality is solely upto you. Also remember that download attribute is not supported in majority of browsers yet so be aware relying on this method.
Here you are with the demo of what we did above. Try it in Google Chrome
Demo
Force download canvas as png or jpeg image with filename. Remember that our filename is what we set in download attribute as shown below
|
1 |
<a href="" id="download" download="canvasexport.png"></a> |
http://jaspreetchahal.org/examples/html5/canvas-image-export2.html
I hope that this helps
In case you want to improve on what I mentioned or if I got any fact wrong please leave your comments as It will be helpful to others too. I am also learning everyday so learning together and sharing experiences is fun.
Cheers.
I want to export to jpg, even if I used:
var img = mycanvas.toDataURL(“image/jpeg;base64;”);
IE 10, IE 11 does not work, still get png file.
Pleases for any help
Hey Jaspreet,
Neat post. Especially liked the concise way in which you explained multiple ways of downloading the canvas.
In case you haven’t noticed, http://jaspreetchahal.org/examples/html5/canvas-image-export2.html also links to the first example itself. But when I copy and paste the above URL, the second example shows up, so that was useful.
Thanks a lot! This has been very useful to me!
I’m not sure where to start…
A) I love your site and how you explain things!
B) I design web pages as a hobby, among other stuff, and have yet to see such a skillful use of serif fonts! (I’m not really a fan of them…)
C) Can I give the site 5-star ratings until it’s rated at 5?