Downloading Canvas Element to an Image

Downloading Canvas element to an image

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

from canvas.toDataURL() to download the image

I found an answer actually to this question, lol.

var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();

How to automatically download a image taken from a canvas element?

Below is sample code..!

<!DOCTYPE html><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">Your browser does not support the canvas element.</canvas><button  onclick="downloadImage()">Save image</button>
<script  src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script><script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");ctx.font = "30px Arial";ctx.fillText("Hello World",10,50);
    function downloadImage(){        var canvas = document.getElementById("myCanvas");     canvas.toBlob(function(blob) {      saveAs(blob, "canvas_images.png");     });    }</script></body></html>

How to download different html canvas after drawing on it?

To lift from question comment:

Loading images is asynchronous, so callback is called asynchronously.
If all canvas combinations (of different sets of multiple images) have been completed in less than a second, the setTimeout call to download only sees the canvas in its final state. To resolve this you can either
- Wait for each download to be initiated before creating the next download, or
- Use multiple canvas elements, or perhaps
- Store data URLs in an array for each canvas combination for downloading later.
If the images are loaded across domains, and the server doesn't allow cross domain requests, canvas.toDataURL throws a security exception. Fixing the fiddle using the URLs provided in it became impossible because of this.

Download canvas as image with button

When you create an instance of drawer

const drawer = new DrawerJs.Drawer(null, { ...options });

You can call

drawer.api.getCanvasAsImage()

To get the canvas converted to base64 which you can then use it to Post to a backend server or download it.

Took at look at download.js maybe you could try using it to help with saving.

Download a Html5 canvas element as an image with the file extension with Javascript

In order to force/suggest a file name in the browser's download dialog, you would need to send the Content-Disposition: attachment; filename=foobar.png header.

This is not possible to do via window.open, so you're out of luck unless there are some browser-specific hacks for this.

If you really need the filename, you could try using the new download attribute in a, <a href="put stuff here" download="filename here">. It isn't very widely supported yet though.

Another alternative would be to first submit the data to the server using ajax, then redirect the browser to some server-side script which would then serve the data with the correct header.

Downloading Canvas Element to an Image