html2canvas和dom-to-image的兼容性问题

一、html2canvas

1. 安装：

npm install html2canvas -S

2. 引入

import html2canvas from 'html2canvas'

3. 使用

html部分

<div id="my_paper">
    <!-- 用背景图片的话会出现生成的图片模糊问题，建议用img图片 -->
    <img src="../../../assets/images/basics/poster_bg_old.png">
</div>

js部分

// 生成海报
handleDownLoad() {
    var dom = document.getElementById('my_paper')
    html2canvas(dom, {
        dpi: window.devicePixelRatio * 4, // 可以提高海报清晰度的两个参数
        scale: 4
    }).then((canvas)=> {
        let url = canvas.toDataURL("image/png");
        console.log('url', url) // 生成的图片是base64格式
    }).catch(err => {
        console.log('err', err)
    })
},

更多参数请参考文档：http://html2canvas.hertzen.com/configuration

IOS建议使用：htmltocanvas
兼容ios注意事项：
① 不使用 flex 布局
② 不动态生成 img 标签，只是修改器src属性
③ 一定要使用html2canvas 1.0.0-rc.4.js版本 (重点注意)
④ rc4版本不支持ssr，需要head的script引入或者动态导入：import (‘html2canvas’).then(({default: html2canvas}) => {})
⑤ rc4版本在iOS端不支持css:LinearGradient! 会直接报错进入catch
2、如果截图内容过多，或者是弹框截图，加上setTimeout延时器会有效解决截图空白问题

二、dom-to-image

1. 安装

npm install dom-to-image -S

2. 引入

import domtoimage from 'dom-to-image'

3. 使用
   (1)生成一个 base64编码格式的 PNG 图片，并在页面展示出来：

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

(2)生成一个 Blob 格式的 PNG 图片，并下载它（此处的下载使用 FileSaver, 可自行下载）：

import FileSaver from 'file-saver'
...
domtoimage.toBlob(document.getElementById('my-node'))
    .then(function (blob) {
        FileSaver.saveAs(blob, 'my-node.png');
    });

(3)生成并下载一个被压缩的 JPEG 图片：

domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.download = 'my-image-name.jpeg';
        link.href = dataUrl;
        link.click();
    });

更多参数请参考文档：https://github.com/tsayen/dom-to-image