saveAsImage Function

This function converts an SVG (Scalable Vector Graphics) element into a rasterized image (PNG/JPEG) format and provides the ability to save it as a downloadable image file.

Parameters

• canvas (HTMLCanvasElement): The canvas element to render the image onto.
• code (string): The SVG code (string format) to be converted into an image.

Function Overview

1. File Type and Extension Detection:
   The function supports the following image types:

   • png: Will output the image in PNG format.
   • jpeg or jpg: Will output the image in JPEG format. If no type is provided, the default output is a .jpg image.

2. SVG Parsing and Rendering:
   The function dynamically creates a div element and inserts the provided SVG code (code). The div is then queried to extract the svg element. Width and height are retrieved either from attributes or computed styles.

3. Canvas Setup:
   The width and height of the SVG are applied to the provided canvas element.

4. SVG to Image Conversion:
   The SVG is serialized into a string, wrapped in a Blob object, and used to create an image source. The image is drawn onto the canvas once it has loaded.

5. Image Saving (Commented Out):
   Although the function includes code to create a downloadable link and save the image as a file (commented out), it is not currently active in the provided code.

Example Usage

var canvas = document.createElement('canvas');
var svgCode = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect x="10" y="10" width="80" height="80" style="fill:blue;"/></svg>';

saveAsImage(canvas, svgCode);