使用 html2cavas js插件 将HTML页面生成图片保存至本地(pc端)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36171431/article/details/81332682

一, 导入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>