[HTML] [JS] HTML Canvas Download Image

  To enable the download of an image from an HTML canvas element, the following steps are typically performed using JavaScript:

• Retrieve the Canvas Element: Obtain a reference to the HTML <canvas> element from which the image will be downloaded.

JavaScript

    const canvas = document.getElementById('myCanvas');

• Convert Canvas to Data URL: Use the toDataURL() method of the canvas element to convert its current content into a data URL. This data URL represents the image in a base64-encoded format. The toDataURL() method can accept arguments for image format (e.g., 'image/png', 'image/jpeg') and quality (for JPEG/WebP).

JavaScript

    const imageDataURL = canvas.toDataURL('image/png'); // Or 'image/jpeg', 'image/webp'

• Create a Download Link: Dynamically create an anchor (<a>) element in the DOM. This element will act as the download link.

JavaScript

    const downloadLink = document.createElement('a');

• Set Link Attributes: Configure the href and download attributes of the newly created anchor element.
  • The href attribute is set to the imageDataURL obtained in the previous step.
  • The download attribute is set to the desired filename for the downloaded image. This attribute triggers the download behavior when the link is clicked.

JavaScript

    downloadLink.href = imageDataURL;
    downloadLink.download = 'my_canvas_image.png'; // Specify desired filename and extension