1、html2canvas： 对css3部分不支持

    这个网上推荐比较多，但是对css3部分不支持，复杂页面比较恼火

    文档地址： https://html2canvas.hertzen.com/getting-started

    使用

    npm install html2canvas

    importhtml2canvasfrom'html2canvas'

html2canvas(document.body).then( function(canvas){         // 将canvas转换成Base64格式的图片         const dataURL =     canvas.toDataURL('image/png')          // 创建FormData对象并添加File数据              

    const formData = new FormData()

    formData.append('file', dataURLtoFile(dataURL, id + '.png')       

  // 上传文件

});

2.dom-to-image ：比html2canvas支持的css3多点

    溢出元素也会被裁剪，对图片的一些样式支持不是很好

    地址： https://github.com/tsayen/dom-to-image

npm install dom-to-image

/* in ES 6 */ import domtoimage from 'dom-to-image'; 

/* in ES 5 */ var domtoimage = require('dom-to-image');

var node = document.getElementById('my-node'); 

domtoimage.toPng(node) .then(function (dataUrl) { 

     var img = new Image(); 

     img.src = dataUrl; 

    document.body.appendChild(img);

}).catch(function (error) { console.error('oops, something went wrong!', error); });

3. html-to-image: 在dom-to-image上做的一些扩展，对html5,css3能更好的支持

    比较推荐这个插件

     https://github.com/bubkoo/html-to-image

npm install --save html-to-image

import * as htmlToImage from 'html-to-image';

import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

var node = document.getElementById('my-node');

htmlToImage.toPng(document.getElementById('my-node')).then(function (dataUrl) {

    download(dataUrl, 'my-node.png');

 });