業(yè)務(wù)場景：html生成海報和截圖

一、html2canvas

1. 安裝：

npm install html2canvas -S

2. 引入

import html2canvas from 'html2canvas'

3. 使用

html部分

<div id="my_paper">
    <!-- 用背景圖片的話會出現(xiàn)生成的圖片模糊問題，建議用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, // 可以提高海報清晰度的兩個參數(shù)
        scale: 4
    }).then((canvas)=> {
        let url = canvas.toDataURL("image/png");
        console.log('url', url) // 生成的圖片是base64格式
    }).catch(err => {
        console.log('err', err)
    })
},

更多參數(shù)請參考文檔：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();
    });

生成其它格式圖片和其它參數(shù)請參考文檔：http://nicethemes.cn/news/txtlist_i31456v.html