1. 利用 html2canvas 脚本 (存在保存的图片模糊,ios3.6.1版本的问题)
该脚本允许您直接在用户浏览器上拍摄网页或其中一部分的“屏幕截图”。屏幕截图基于DOM,因此可能无法真实表示100%的准确度,因为它无法生成实际的屏幕截图,而是根据页面上的可用信息构建屏幕截图。
安装 npm安装
npm install html2canvas
import html2canvas from 'html2canvas';
使用
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
调用之后会生成一个 convas 标签,用户可以保持图片到本地
2. 利用 dom-to-image 脚本 (推荐)
安装 npm安装
npm install dom-to-image
引入
/* in ES 6 */
import domtoimage from 'dom-to-image';
/* in ES 5 */
var domtoimage = require('dom-to-image');
<script src="path/to/dom-to-image.min.js" />
<script>
domtoimage.toPng(node)
//...
</script>
使用
var node = document.getElementById('my-node');
// 获取一个PNG图像blob并下载
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);
});
// 保存并下载压缩的JPEG图像:
domtoimage.toBlob(document.getElementById('my-node'))
.then(function (blob) {
window.saveAs(blob, 'my-node.png');
});