版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/fhjdzkp/article/details/86249092
需求是需要将html页面保存图片,使用的技术是html2Canvas
主要思路就是我们先找到自己想要获取的是页面的div,然后获取这个dom,然后将获取dom的宽和高,并将其缩放为原来的2倍,这样是为了防止下载的图片模糊。获取到dom后,我们创建一个canvas的对象,然后设置canvas的宽和高。我们在设置html2canvas的时候,要设置 useCORS为true,这个就是设置跨域。
savePic = ()=>{
var dom = document.getElementsByClassName("print_page_freezer")[0];
var domWrap = document.getElementsByClassName("print_wrap")[0];
var width = dom.offsetWidth;
var height = domWrap.offsetHeight;
var scaleBy = 2;
var canvas = document.createElement('canvas');
canvas.width = width * scaleBy;
canvas.height = height * scaleBy;
canvas.style.width = width * scaleBy + 'px';
canvas.style.height = height * scaleBy + 'px';
var context = canvas.getContext('2d');
context.scale(scaleBy, scaleBy);
var filename = (new Date()).getTime() + '.' + "png";
html2canvas(dom, {
canvas: canvas,
useCORS: true,
scale: 2,
width: width,
height: height
}).then(function(canvas){
var type = 'png';
var imgData = canvas.toDataURL(type);
var _fixType = function(type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
};
imgData = imgData.replace(_fixType(type),'image/octet-stream');
var saveFile = function(data, filename){
var save_link = 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);
};
saveFile(imgData,filename);
})
}
这个方法就是可以触发的时候可以下载并保存的功能
使用html2canvas截图,遇到两个问题,一个是图片显示不出来,是因为没有设置跨域问题,第二个问题是字体特别小,需要进行font-variant: normal;设置,设置完即可