使用 html2cavas js外掛 將HTML頁面生成圖片儲存至本地(pc端)
一, 匯入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>