HTML5 canvas export as png or jpeg

Hello,

Today we will see how we can export our canvas to an image in well known formats

  1. png
  2. jpeg
I will also give you a trick to download a file the HTML5 way using the new download attribute that ships with HTML5 out of the box

Lets start with declaring our markup

The Markup

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

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

Thats where we are telling our canvas function to export it as png file. To export it as jpeg do this instead

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.

The Javascript

Updated exportCanvas() method is shown below

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

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.

VN:F [1.9.22_1171]
Rating: 4.5/5 (4 votes cast)
VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)
HTML5 canvas export as png or jpeg, 4.5 out of 5 based on 4 ratings

Comments

  1. 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

  2. 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!

  3. 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?

Leave a Reply