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');
});
