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

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

首先引入三个文件：

1、<script type="text/javascript" src="js/html2canvas.js"></script> 
2、<script type="text/javascript" src="js/base64.js"></script>
3、<script type="text/javascript" src="js/canvas2image.js"></script>

 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.onclick=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 };

 

> 注：createelementns() 方法可创建带有指定命名空间的元素节点。 createelementns(ns,name)
> createelementns() 方法与 createelement() 方法相似，只是它创建的 element
> 节点除了具有指定的名称外，
> 还具有指定的命名空间。只有使用命名空间的 xml 文档才会使用该方法。

 1 let savefile=function (data,filename) {
 2 let save_link=document.createelementns('http://www.w3.org/1999/xhtml','a'); //img表示生成img元素或a元素或则可以放图片地址的元素
 3 
 4 save_link.href=data; //img 元素中图片引入用src，a元素中图片的引入用href等等
 5 save_link.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_link.dispatchevent(event);
11 
12 console.log(save_link)// <a href=data:image/jpeg:base64.....></a>
13 }

 

 

> initmouseevent 方法用于初始化通过 documentevent 接口创建的 mouseevent 的值。
> 此方法只能在通过 dispatchevent 方法指派 mouseevent 之前调用，
> 尽管在该阶段可以多次调用它（如有必要）。如果被多次调用，则最后一次调用优先。

- 其他指定事件方法：

typearg - 指定事件类型。
canbubblearg - 指定该事件是否可以 bubble。
cancelablearg - 指定是否可以阻止事件的默认操作
viewarg - 指定 event 的 abstractview。
detailarg - 指定 event 的鼠标单击量。
screenxarg - 指定 event 的屏幕 x 坐标
screenyarg - 指定 event 的屏幕 y 坐标
clientxarg - 指定 event 的客户机 x 坐标
clientyarg - 指定 event 的客户机 y 坐标
ctrlkeyarg - 指定是否在 event 期间按下 control 键
altkeyarg - 指定是否在 event 期间按下 alt 键。
shiftkeyarg - 指定是否在 event 期间按下 shift 键。
metakeyarg - 指定是否在 event 期间按下 meta 键。
buttonarg - 指定 event 的鼠标按键。
relatedtargetarg - 指定 event 的相关 eventtarget。

**更多内容自己去查看canvas api.**

来源：看了一篇博客，实验出来的，忘了地址了，哈哈