1、html2canvas：?對css3部分不支持

? ? 這個(gè)網(wǎng)上推薦比較多，但是對css3部分不支持，復(fù)雜頁面比較惱火

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

? ? 使用

? ??npm install html2canvas

????importhtml2canvasfrom'html2canvas'

html2canvas(document.body).then( function(canvas){? ???????// 將canvas轉(zhuǎn)換成Base64格式的圖片?????????const dataURL = ????canvas.toDataURL('image/png')? ????????// 創(chuàng)建FormData對象并添加File數(shù)據(jù)? ? ?? ???????

? ? const formData = new FormData()

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

? // 上傳文件

});

2.dom-to-image ：比html2canvas支持的css3多點(diǎn)

????溢出元素也會被裁剪，對圖片的一些樣式支持不是很好

? ? 地址：?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上做的一些擴(kuò)展，對html5,css3能更好的支持

? ? 比較推薦這個(gè)插件

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

?});