一, 匯入html2canvas.min.js

大家可以去html2canvas官網看看  http://html2canvas.hertzen.com/

二，把html頁面生成base64碼

//把html生成圖片

htmltoimg() {

let w = $(".contentbox").width();

let h = $(".contentbox").height();//要將 canvas 的寬高設定成容器寬高的 2 倍

let canvas = document.createElement("canvas");

canvas.width = w * 2;

canvas.height = h * 2;

canvas.style.width = w + "px";

canvas.style.height = h + "px";

let context = canvas.getContext("2d");//然後將畫布縮放，將影象放大兩倍畫到畫布上

context.scale(2, 2);

html2canvas($(".contentbox"), {

canvas: canvas,

onrendered: function (canvas) {

let dataUrl = canvas.toDataURL();

$(".htmlimg").attr("src", dataUrl);

$(".htmlimg").css({

"width": canvas.width / 2 + "px",

"height": canvas.height / 2 + "px",

})

}

});

//隱藏html元素

$(".centercontent").hide();

}

三，儲存至手機

//儲存圖片至本地

saveimg() {

// 圖片匯出為 png 格式

var type = 'png';

var imgData = $(".htmlimg").attr("src");

var _fixType = function (type) {

type = type.toLowerCase().replace(/jpg/i, 'jpeg');

var r = type.match(/png|jpeg|bmp|gif/)[0];

return 'image/' + r;

};

// 加工image data，替換mime type

imgData = imgData.replace(_fixType(type), 'image/octet-stream');

// 下載後的問題名

// var filename = 'membercar' + (new Date()).getTime() + '.' + type;

var filename = 'membercar' + '.' + type;

this.saveFile(imgData, filename);

}

/**

* 在本地進行檔案儲存

* @param {String} data 要儲存到本地的圖片資料

* @param {String} filename 檔名

*/

saveFile(data, filename) {

let save_link: any = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');

save_link.href = data;

save_link.download = filename;

var event = document.createEvent('MouseEvents');

event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

save_link.dispatchEvent(event);

}

四，html展示

<!--儲存html圖片容器-->

<img class="htmlimg" src="" alt="">

<div class="contentbox">123456</div>