There are two commonly used plug-ins for turning nodes into pictures, among which HTML2Canvas and DOM-to-iamge are one.

Html2canvase has too big compatibility problem, so bloggers consider using DOM-to-image.

General use:

npm install dom-to-image

Import corresponding packages.

Common methods (toSvg, toJpeg, toBlob, toPixelData can also be used)

ToSvg // convert toSvg, Base64 data format, can solve the ios incompatibility problem

ToJpeg // convert toJpeg files

ToBolb // converts to a file stream

ToPixelData // Get pixel data

domtoimage.toPng(node, {scale: 4, bgcolor: "#fff", width: (node? .clientWidth || 0), height: (node? .clientHeight || 0) }).then((url: any) => {}) .catch((error: any) => { console.log("error:", error) })Copy the code

The first problem with this approach is:

The resulting image is too pixelated to view the corresponding image.

Solution:

The local import method is adopted to separately take the DOM-to-image. js file and modify the source file.

Modify the code module:

Remember: be sure to include the scale parameter, the scale multiple.

I encountered the second problem: ios compatibility problem. I loaded elements for the first time, but the generated image elements were blank after the elements were loaded.

Solution:

1. The toSvg file format is adopted, but the application does not support this format.

2. For ios system, this node element is transformed twice and toPng method is called twice. Can solve the problem