H5通过html2canvas，canvas2image生成图片

首先安装html2canvas，canvas2image

npm i html2canvas
npm i canvas2image
复制代码

引用

import html2canvas from 'html2canvas';
import canvas2image from 'canvas2image';  

....  

var box = document.getElementById("box"); //生成的DOM元素  
var img = document.getElementById("img"); //需要展示的图片
//生成canvas
html2canvas(box).then(function(canvas) {
    //生成图片
    let url = canvas2image.saveAsPNG(canvas,true).getAttribute('src');
    img.src = url;
});
复制代码

注意项

页面中如果引用跨域的资源图片，最终生成的图片会漏掉这些资源。建议使用同源资源
或者使用 html2canvas 的配置项 allowTaint；
页面中不要使用 css translate 属性，可能会丢失偏移的部分位置； 
复制代码

html2canvas配置项

转载于:https://juejin.im/post/5c4f0aa06fb9a049f5718a58