1、html2canvas：?對(duì)css3部分不支持
? ? 這個(gè)網(wǎng)上推薦比較多，但是對(duì)css3部分不支持倍宾，復(fù)雜頁(yè)面比較惱火
? ? 文檔地址：?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對(duì)象并添加File數(shù)據(jù)? ? ?? ???????
? ? const formData = new FormData()
? ? formData.append('file', dataURLtoFile(dataURL, id + '.png')? ? ? ?
? // 上傳文件
});
2.dom-to-image ：比html2canvas支持的css3多點(diǎn)
????溢出元素也會(huì)被裁剪旅急，對(duì)圖片的一些樣式支持不是很好
? ? 地址：?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ò)展，對(duì)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');
?});
