Loading a Canvas Element into an Image

Question

What are the different ways to save a canvas object?

In my research, I 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 picture.

Are there other ways to do this?

Can I customize the name of the uploaded file?

Answer 1

One way to save is exported as an image ... You have already found this solution, and this is the best I think;)

  var canvas = document.getElementById("mycanvas"); var img = canvas.toDataURL("image/png"); document.write('<img src="'+img+'"/>'); 

You can use different types of images. Change the mimetype type in this function:

  canvas.toDataURL("image/jpeg"); 

Another way to save canvas data (in PDF) is wkhtmltopdf library

Greetings. Franc

frankneff.ch/@frankneff

Answer 2

This solution is better:

 function download() { var download = document.getElementById("download"); var image = document.getElementById("myCanvas").toDataURL("image/png") .replace("image/png", "image/octet-stream"); download.setAttribute("href", image); //download.setAttribute("download","archive.png"); } 

 <a id="download" download="triangle.png"> <button type="button" onClick="download()">Download</button> </a> <canvas id="myCanvas" width="720" height="450">Your browser does not support Canvas.</canvas> 

Answer 3

A solution that does not require a button.

 var download = function(){ var link = document.createElement('a'); link.download = 'filename.png'; link.href = document.getElementById('canvas').toDataURL() link.click(); } 

Useful if you have other triggers for downloading or triggers that you cannot easily reference.

Answer 4

 var c = document.getElementById("popup"); var link = document.getElementById('cropImageLink'); link.setAttribute('download', 'MintyPaper.png'); link.setAttribute('href', c.toDataURL("image/png").replace("image/png", "image/octet-stream")); link.click(); 

I hope this code will work. But first, create an Anchor tag in the canvas tag whose id is "cropImageLink". than after checking. but it does not work in IE browser

Answer 5

You can use the reimg library to do this very easily.

Convert canvas to img: ReImg.fromCanvas(document.getElementById('yourCanvas')).toPng()

And downloading this image for the user can be done as follows: ReImg.fromCanvas(document.getElementById('canvas')).downloadPng()

About providing a username file, if you look at the library code (which is very short and easy to understand), you will find that you can change the name.
Here is a link to a specific line: https://github.com/gillyb/reimg/blob/master/reimg.js#L56

Answer 6

Try something like this ...

 var downloadCanvasAsImage = function(){ let canvasImage = document.getElementById('canvas').toDataURL('image/png'); // this can be used to download any image from webpage to local disk let xhr = new XMLHttpRequest(); xhr.responseType = 'blob'; xhr.onload = function () { let a = document.createElement('a'); a.href = window.URL.createObjectURL(xhr.response); a.download = 'image_name.jpg'; a.style.display = 'none'; document.body.appendChild(a); a.click(); a.remove() }; xhr.open('GET', canvasImage); // This is to download the canvas Image xhr.send(); }