利用canvas将网页元素生成图片并保存在本地

 1 <div id=\"view\" style=\"background-color: red; width: 700px; height: 500px;\">
 2 //canvas截图为document.body上的元素
 3 html2canvas(document.body).then(function (canvas) { 
 4 canvas.setAttribute(\'id\',\'canvasImg\'); //给canvas添加id
 5 // document.body.appendChild(canvas)
 6 document.getElementById(\'images\').appendChild(canvas) //添加canvas图给元素
 7 });
 8 let Download=document.getElementById(\'Download\');
 9 Download. =function () { //给下载节点绑定事件
10 let oCanvas=document.getElementById(\'canvasImg\'); //获取canvas的id
11 console.log(oCanvas)
12 // 将canvas图片通过Canvas2Image转成的img元素引入的图片
13 let img=Canvas2Image.saveAsJPEG(oCanvas,true).getAttribute(\'src\');
14 console.log(img);
15 saveFile(img,\'hlr.png\') //调用下载函数，传Canvas2Image图片地址，下载时保存的图片的名称
16 };

 1 let saveFile=function (data,filename) {
 2 let save_ =document.createElementNS(\'http://www.w3.org/1999/xhtml\',\'a\'); //img表示生成img元素或a元素或则可以放图片地址的元素
 3 
 4 save_ .href=data; //img 元素中图片引入用src，a元素中图片的引入用href等等
 5 save_ .download=filename; // 下载的名称
 6 var event = document.createEvent(\'MouseEvents\');//创建event事件
 7 console.log(event);
 8 //initMouseEvent 方法用于初始化通过 DocumentEvent 接口创建的 MouseEvent 的值, 详见下文：
 9 event.initMouseEvent(\'click\', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
10 save_ .dispatchEvent(event);
11 
12 console.log(save_ )// <a href=data:image/jpeg: 64.....></a>
13 }