如何将HTML页面保存为图片？
- 将DOM改写为canvas，然后利用canvas的toDataURL方法实现将DOM输出为包含图片展示的data url。
- 使用HtmlCanvas2实现
话不多说，直接上代码.......
1.npm下载 和html2canvas：
npm install html2canvas2.引入 html2canvas：
import html2canvas from 'html2canvas'3.调用方法
基于html2canvas.js可将一个元素渲染为canvas，只需要简单的调用html2canvas(element[, options]);即可。下列html2canvas方法会返回一个包含有<canvas>元素的promise：
html2canvas(document.body).then(function(canvas) {document.body.appendChild(canvas);
});此时就将想要转化的dom元素转成了canvas形式，但是可能输出效果并不如意，所以这里还可以加限制条件，就是html2canvas的第二个参数，此外通过Canvas2Image的convertToImage方法，将canvas转化为img，
注?? 这里返回的 img，是一个 dom ，所以可以加入到其他的dom里，如果需要图片的base64，则是 img.src。
var opts = {scale: scale, canvas: canvas, logging: true, width: width, height: height,backgroundcolor: '#FFFFFF',useCORS: true // 用于解决图片跨域};html2canvas(shareContent, opts).then(function (canvas) {var context = canvas.getContext('2d');var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);document.body.appendChild(img);$(img).css({"width": canvas.width / 2 + "px","height": canvas.height / 2 + "px",})});这里就得到了由dom节点转化的海报了，然后就是保存这个图片。这里直接附上两个函数，直接调用即可。
/*** @description: 下载图片* @param {string} url 图片信息，这里是base64* @param {string} name 图片的名字*/
downloadByBlob(url, name) {let image = new Image();image.setAttribute("crossOrigin", "anonymous");image.src = url;image.onload = () => {let canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;let ctx = canvas.getContext("2d");ctx.drawImage(image, 0, 0, image.width, image.height);canvas.toBlob((blob) => {let url = URL.createObjectURL(blob);this.download(url, name);// 用完释放URL对象URL.revokeObjectURL(url);});};
},/*** @description: 下载图片* @param {string} url 图片信息，这里是base64* @param {string} name 图片的名字*/
download(href, name) {let eleLink = document.createElement('a')eleLink.download = nameeleLink.href = hrefeleLink.click()eleLink.remove()
}总结：亲身实验的效果，确实能够达到目的，但是下载图片清晰度不够，展示效果不太好，如果想达到清晰度，可以降低canvas抗锯齿，详细说明看如下链接：
https://segmentfault.com/a/1190000011478657