Question

26

Downloading Canvas element to an image

rated 0 times [ 29] [ 3] / answers: 1 / hits: 155731 / 13 Years ago, mon, november 14, 2011, 12:00:00

What are the different ways to save a canvas object?

In my research, I've found two approaches:

var data = canvas.toDataURL();

var prev = window.location.href;

window.location.href = data.replace(image/png, image/octet-stream);

window.location.href = prev;

Another way is to take a snapshot.

Are there other ways to do this?

Is it possible to customize the download filename?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nicholas

Add To Favorites

Follow

Total Points: 188

Total Questions: 76

Total Answers: 103

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

nicholas questions

1 Pass props to styled-components

Wed, Feb 12, 20, 00:00, 4 Years ago

1 How to exclude characters from express-validators escape() function

Sat, Jan 11, 20, 00:00, 4 Years ago

1 Can I use Destructuring to create a deep copy?

Tue, Jul 23, 19, 00:00, 5 Years ago

1 Puppeteer: page.evaluate throws TypeError: cannot read innerText of null

Thu, Jun 6, 19, 00:00, 5 Years ago

1 Testing a function which uses setTimeout with Jest: why is this test failing?

Wed, Mar 27, 19, 00:00, 5 Years ago

View All

answered 13 Years ago krystadesiraeo · Accepted Answer

The one way to save is exporting as an image... You already found this solution, and it's the best one i think ;)

    var canvas = document.getElementById(mycanvas);

    var img    = canvas.toDataURL(image/png);

    document.write('<img src='+img+'/>');

You can use different image types. Change the mimetype in this function:

    canvas.toDataURL(image/jpeg);

An other way to save canvas data (into a PDF) is using the wkhtmltopdf Library

Cheers. Frank

frankneff.ch / @frankneff