一、引用庫

html2canvas.js和canvas2image.js的下載地址：

html2canvas.js: http://html2canvas.hertzen.com/dist/html2canvas.min.js
canvas2image.js: https://github.com/SuperAL/canvas2image/blob/master/canvas2image.js

二、使用

需要已引入jQ庫。如果瀏覽器沒有引入，可以自行引入

http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js

同步寫法

function save_html_as_png(filename = 'image') {
    var
 
 opts = {
        //scale: scale, // 新增的scale 引數
        //canvas: canvas, //自定義 canvas
        //logging: false, //日誌開關，便於檢視html2canvas的內部執行流程
        //width: width, //dom 原始寬度
        //height: height,
        useCORS: true // 【重要】開啟跨域配置
    };
    html2canvas($('body')[0], opts).then(canvas => {
        //document.body.appendChild(canvas);
        // canvas寬度
        var
 
 canvasWidth = canvas.width;
        // canvas高度
        var canvasHeight = canvas.height;
        console.log(canvasHeight, canvasWidth);
        //sleep(2);
        // 呼叫Canvas2Image外掛
        var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
        // 呼叫Canvas2Image外掛
        Canvas2Image.saveAsImage(canvas, canvasWidth, canvasHeight, 'png', filename);
        console.log('ok');
    });
}
 

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

非同步寫法

async function async_save_html_as_png(filename="image") {
    var opts = {
        //scale: scale, // 新增的scale 引數
        //canvas: canvas, //自定義 canvas
        //logging: false, //日誌開關，便於檢視html2canvas的內部執行流程
        //width: width, //dom 原始寬度
        //height: height,
        useCORS: true // 【重要】開啟跨域配置
    };
    var canvas = await html2canvas($('body')[0], opts);
    // canvas寬度
    var canvasWidth = canvas.width;
    // canvas高度
    var canvasHeight = canvas.height;
    console.log(canvasHeight, canvasWidth);
    //sleep(2);
    // 呼叫Canvas2Image外掛
    var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
    // 呼叫Canvas2Image外掛
    Canvas2Image.saveAsImage(canvas, canvasWidth, canvasHeight, 'png', filename);

    console.log('ok');
}

直接呼叫我包裝好的程式即可。

要點說明：

1、html2canvas傳入的是dom物件。這是一個非同步函式。可以截圖指定元素區域。

2、html2canvas 的useCORS 預設是False（跨域）。如果不跨域，則截圖中無法載入跨域圖片。

3、Canvas2Image.convertToImage是同步函式。可以指定圖片區域大小。型別可以是jpeg/png/bmp等（不區分大小寫）。檔名不需要字尾。Canvas2Image.convertToImage 只會下載圖片檔案。無法存放到指定路徑。