How Can I Save an HTML Canvas as a PNG Image?

Capturing HTML Canvas Output as Various Image Formats

Question:

Can an HTML canvas's content be captured or printed as an image or PDF? Specifically, how can an image be generated from a canvas and saved as a PNG?

Answer:

Using HTML5's advanced features, capturing and saving canvas output as an image has become a straightforward process:

const canvas = document.getElementById('mycanvas');
const img = canvas.toDataURL('image/png');

Once the desired image data is stored in the img variable, it can be used in various ways:

• Generate a new image:

document.getElementById('existing-image-id').src = img;

• Display directly in HTML:

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

This script enables you to capture and save your canvas output as a PNG image, providing convenient methods for further use or distribution.

The above is the detailed content of How Can I Save an HTML Canvas as a PNG Image?. For more information, please follow other related articles on the PHP Chinese website!