需求是需要将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(