html2canvas：將html的dom變成圖片，並儲存

dlnu2015250622發表於2020-10-14
HTMLCanvas

如何將HTML頁面儲存為圖片？

  • 將DOM改寫為canvas，然後利用canvas的toDataURL方法實現將DOM輸出為包含圖片展示的data url。
  • 使用HtmlCanvas2實現

話不多說，直接上程式碼.......

1.npm下載 和html2canvas：

npm install html2canvas

2.引入 html2canvas：

import html2canvas from 'html2canvas'

3.呼叫方法

      基於html2canvas.js可將一個元素渲染為canvas，只需要簡單的呼叫html2canvas(element[, options]);即可。下列html2canvas方法會返回一個包含有<canvas>元素的promise：

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

此時就將想要轉化的dom元素轉成了canvas形式，但是可能輸出效果並不如意，所以這裡還可以加限制條件，就是html2canvas的第二個引數，此外通過Canvas2Image的convertToImage方法，將canvas轉化為img，

注⚠️  這裡返回的 img，是一個 dom ，所以可以加入到其他的dom裡，如果需要圖片的base64，則是 img.src。

var opts = {
        scale: scale, 
        canvas: canvas, 
        logging: true, 
        width: width, 
        height: height,
        backgroundcolor: '#FFFFFF',
        useCORS: true   // 用於解決圖片跨域
    };
    html2canvas(shareContent, opts).then(function (canvas) {
        var context = canvas.getContext('2d');

        var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);

        document.body.appendChild(img);
        $(img).css({
            "width": canvas.width / 2 + "px",
            "height": canvas.height / 2 + "px",
        })
    });

這裡就得到了由dom節點轉化的海報了，然後就是儲存這個圖片。這裡直接附上兩個函式，直接呼叫即可。

/**
 * @description: 下載圖片
 * @param {string} url 圖片資訊，這裡是base64
 * @param {string} name 圖片的名字
 */    
downloadByBlob(url, name) {
    let image = new Image();
    image.setAttribute("crossOrigin", "anonymous");
    image.src = url;
    image.onload = () => {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0, image.width, image.height);
        canvas.toBlob((blob) => {
            let url = URL.createObjectURL(blob);
            this.download(url, name);
            // 用完釋放URL物件
            URL.revokeObjectURL(url);
        });
    };
},
/**
 * @description: 下載圖片
 * @param {string} url 圖片資訊，這裡是base64
 * @param {string} name 圖片的名字
 */ 
download(href, name) {
    let eleLink = document.createElement('a')
    eleLink.download = name
    eleLink.href = href
    eleLink.click()
    eleLink.remove()
}

總結：親身實驗的效果，確實能夠達到目的，但是下載圖片清晰度不夠，展示效果不太好，如果想達到清晰度，可以降低canvas抗鋸齒，詳細說明看如下連結：

https://segmentfault.com/a/1190000011478657

相關文章