[mxcad_2d API documentation] (../README. md)/[tools] (../modules/tools. md)/MxCanvas2Image

Class: MxCanvas2Image

tools.MxCanvas2Image

Canvas to Image Tool Class, used to convert canvas content in the browser into images and support downloading or generating image elements.

Description

This class is mainly used to export canvas drawing results to common image formats such as PNG, JPEG, BMP, GIF, etc. on front-end pages, and is suitable for scenarios such as screenshot, chart export, graphic sharing, and local saving. It can complete: -Determine whether the current environment supports capabilities such as canvas, toDataURL, ImageData, etc; -Scale the canvas according to the specified width and height; -Convert canvas to DataURL or image object; -Save as an image file locally; -Perform special encoding on BMP types to generate downloadable bitmap content.

Usage:

1. Instantiate MxCanvas2Image;
2. Pass in the canvas element or element ID;
3. Call saveAsImage () to download images, or call convertToImage() to obtain image nodes;
4. Export size and format can be controlled through width, height, and type parameters;
5. If BMP needs to be exported, bitmap data can be automatically generated according to the underlying encoding method.

Summary: MxCanvas2Image is a specialized tool class for handling canvas export and download, suitable for quickly converting drawn content into storable image files or presentable IMG elements on the web.

Example

import { MxCanvas2Image } from "mxcad";

const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
const converter = new MxCanvas2Image(document);

//Download directly as PNG
converter.saveAsImage(canvas, 800, 600, "png");

//Convert to image node and insert into page
const img = converter.convertToImage(canvas, 800, 600, "jpg");
document.body.appendChild(img);

//Convert to BMP and download
converter.saveAsImage(canvas, 1024, 768, "bmp");

Table of contents

Constructors

• constructor

Methods

• convertToImage
• saveAsImage

Constructors

constructor

• new MxCanvas2Image(in_document?)

Parameters

Name	Type	Default value
in_document	any	undefined

Methods

convertToImage

▸ convertToImage(canvas, width, height, type): undefined | HTMLImageElement

Convert the current canvas to an image element.

Parameters

Name	Type	Description
Canvas	any	Canvas element or its ID
Width	any	Export the width of the image. If not specified, use the original canvas width.
Height	any	Export the height of the image. If not specified, use the original canvas height.
Type	any	The type of exported image, with optional values of 'png', 'jpeg', 'bmp', 'gif', and a default value of 'png'.

Returns

undefined | HTMLImageElement

Description

This method will convert the canvas content into an image based on the specified width, height, and image type of the passed canvas element or its ID, and return an HTMLImageElement object that can be directly inserted into the page.

---

saveAsImage

▸ saveAsImage(canvas, width, height, type): void

Convert the current canvas to an image and save it locally.

Parameters

Name	Type	Description
Canvas	any	Canvas element or its ID
Width	any	Export the width of the image. If not specified, use the original canvas width.
Height	any	Export the height of the image. If not specified, use the original canvas height.
Type	any	The type of exported image, with optional values of 'png', 'jpeg', 'bmp', 'gif', and a default value of 'png'.

Returns

void

Description

This method will convert the canvas content into an image according to the specified width, height, and image type based on the passed canvas element or its ID, and trigger the browser download.