html2canvas和dom-to-image用法(个人笔记)

业务场景：html生成海报和截图

一、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

二、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();
    });

生成其它格式图片和其它参数请参考文档：http://nicethemes.cn/news/txtlist_i31456v.html