First install HTML2Canvas, canvas2Image

npm i html2canvas
npm i canvas2image
Copy the code

reference

import html2canvas from 'html2canvas';
import canvas2image from 'canvas2image'; . var box =document.getElementById("box"); // The generated DOM element
var img = document.getElementById("img"); // Display the image
/ / generated canvas
html2canvas(box).then(function(canvas) {
    // Generate the image
    let url = canvas2image.saveAsPNG(canvas,true).getAttribute('src');
    img.src = url;
});
Copy the code

Pay attention to item

If a page references cross-domain resource images, the resulting image will miss those resources. It is recommended to use homologous resources or use the html2Canvas configuration item allowTaint; Do not use THE CSS Translate attribute in the page. Some offset positions may be lost.Copy the code

Html2canvas configuration items