To achieve partial page screenshots saved to the local

The requirement is to click Save Image to save the Echarts diagram of the page and the corresponding form generated image to the local

Package used: HTML2Canvas

The installation

NPM I [email protected]

use

import html2canvas from 'html2canvas'; generateShareImage() { const canvas = document.createElement("canvas") let canvasBox = document.getElementById('imageWrapper') const width = canvasBox.offsetWidth const height = canvasBox.offsetHeight Canvas. Width = width * 2 canvas. Height = height * 2 canvas. // const context = Canvas. GetContext ("2d"); / / context. Scale (1.5, 1.5); const options = { backgroundColor: null, canvas: canvas, useCORS: true }; html2canvas(canvasBox, options).then((canvas) => { let dataURL = canvas.toDataURL("image/png"); Download this. / / downloadImage (dataURL); Var share = document.getElementById('shareImg'); var share = document.getElementById('shareImg'); share.src = dataURL; }) }, downloadImage(url) { let link = document.createElement("a"); link.href = url; Link.setAttribute ("download", "screenshot.png "); link.click(); }

complete