将html转换成图片

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