利用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.**
来源：看了一篇博客，实验出来的，忘了地址了，哈哈
