How to save canvas as png image

In JavaScript, we can save a Canvas as a PNG image by following these steps:

1. Obtain a reference to the Canvas element.
2. Use the toDataURL method to convert the Canvas content to a data URL, specifying the PNG format as the parameter.
3. Create an <a> element and set its href attribute to the data URL obtained in the previous step, then set the download attribute to provide a default filename for saving.
4. Trigger a click event on this <a> element to initiate the download.

Here is a specific implementation example:

javascript
// Assuming we have a <canvas> element with id 'myCanvas'
const canvas = document.getElementById('myCanvas');

// Convert the canvas to a data URL, with 'image/png' specifying the PNG format
const imageURL = canvas.toDataURL('image/png');

// Create an <a> element to trigger the download
const downloadLink = document.createElement('a');

// Set the download filename, e.g., 'my-canvas-image.png'
downloadLink.download = 'my-canvas-image.png';

// Set the converted image URL as the href attribute of the <a> tag
downloadLink.href = imageURL;

// Hide this element
downloadLink.style.display = 'none';

// Append the link element to the DOM
document.body.appendChild(downloadLink);

// Trigger a click event on the <a> tag
downloadLink.click();

// Remove the element from the DOM after completion
document.body.removeChild(downloadLink);

In this example, a hidden <a> element is created and added to the document. We set its href attribute to the Canvas data URL and specify the filename for download. Then, by programmatically triggering the click event on this link, the browser begins downloading the PNG image.

Note that this method may be restricted by the same-origin policy in certain scenarios. If the Canvas contains cross-origin image resources, the toDataURL method may throw a security error in the absence of appropriate CORS headers.

Here's a straightforward solution for this issue without requiring any external or additional script libraries: Define this function within a JavaScript tag or file: Assuming your canvas is identified by the ID 'canvas':

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

Specify the button in the HTML body:

html
<a id="download" download="image.png"><button type="button" onClick="download()">Download</button></a>

This works effectively, and the download link appears as a button. Tested in Firefox and Chrome.

I use this solution to set the filename:

html
<a href="#" id="downloader" onclick="download()" download="image.png">Download!</a>
<canvas id="canvas"></canvas>

javascript
function download(){
    document.getElementById("downloader").download = "image.png";
    document.getElementById("downloader").href = document.getElementById("canvas").toDataURL("image/png").replace(/^data:image/[^;]/, 'data:application/octet-stream');
}