JS实现div模块的截图并下载功能

　　html页

当需要实现面部分模块截图并具有保存图片功能时,前台直接生成截图并下载会方便的多,多的不说,直接看代码

　　

首先我们需要引入2个js文件:

　　 　　 　　& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/html2canvas.js "祝辞& lt;/script> 　　& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jquery-1.12.3.min.js "祝辞& lt;/script> 　　 　　

加入css样式,主要是生成“X”关闭图片图标:

　　 　　 　　身体{背景:# ccc} 　　# dw{:绝对;:10 px;左:10%;高度:620 px;宽度:1030 px;背景:# fff;边界:1 px固体黑色;填充:10 px} 　　.close { 　　位置:相对; 　　左:10 px; 　　宽度:0.2 em; 　　身高:1 em; 　　背景:# 333; 　　-webkit-transform:旋转(45度); 　　-moz-transform:旋转(45度); 　　-o-transform:旋转(45度); 　　-ms-transform:旋转(45度); 　　变换:旋转(45度); 　　显示:inline-block; 　　} 　　.close:{后 　　内容:“”; 　　位置:绝对的; 　　上图:0; 　　左:0; 　　宽度:0.2 em; 　　身高:1 em; 　　背景:# 333; 　　-webkit-transform:旋转(270度); 　　-moz-transform:旋转(270度); 　　-o-transform:旋转(270度); 　　-ms-transform:旋转(270度); 　　变换:旋转(270度); 　　} 　　 　　

写入随便div模块,我随便位置给的点击截图按钮

　　 　　 　　& lt; !——要截图的div主要蓝色区域——比; 　　& lt; div id=爸饕北? 　　& lt; div祝辞& lt;/div> 　　& lt; div祝辞截图& lt;/div> 　　& lt;/div> 　　& lt; !——生成图片展示的DIV dw——比; 　　& lt; div id=癲w”比; 　　& lt; div title=肮乇铡北? 　　& lt;跨类=肮乇铡弊４? lt;/span> 　　& lt;/div> 　　& lt;/div> 　　 　　

页面效果如下:

　　

JS实现div模块的截图并下载功能

　　

js代码如下:

　　 　　 　　$ (" # dw”) hide ();//关闭图片 　　函数closeok () { 　　$ (" # dw”) hide (); 　　}//点击截的图 　　函数doScreenShot () { 　　$ (" # dw”),告诉(); 　　html2canvas($(" #主”),{ 　　name=" IframeReportImg "宽度=" 0 "高度=" 0 " src=" https://www.yisu.com/zixun/about:空白”祝辞& lt;/iframe>) .appendTo(“身体”); 　　如果(document.all.IframeReportImg。src !=imgPathURL) {//加载图片 　　document.all.IframeReportImg。src=https://www.yisu.com/zixun/imgPathURL; 　　} 　　其他{//图片直接另存为 　　DoSaveAsIMG (); 　　} 　　} 　　函数DoSaveAsIMG () { 　　如果(document.all.IframeReportImg。src !=:空白) 　　window.frames .document.execCommand (“IframeReportImg”) (“SaveAs”); 　　}//另存为图片 　　函数下载(src) { 　　var $=$ (“& lt; a> & lt;/a>”)。attr (“href”, src)。attr(“下载”,“img.png”); 　　一个美元[0].click (); 　　}//判断是否为ie浏览器 　　函数browserIsIe () { 　　如果(! !窗口。ActiveXObject | |“ActiveXObject”窗口) 　　返回true; 　　其他的 　　返回错误; 　　} 　　 　　

解释说明:这里核心截图代码是

　　

<代码> html2canvas (dom, {,onrender:函数(画布){})方法,是插件提供的。其中:dom是你要截图的元素模块

　　

它的作用是把这个参数画布上形成一个img图片元素。调用的是单另的<代码> convertCanvasToImage() 方法,

　　

其中:<代码>形象。src=https://www.yisu.com/zixun/canvas.toDataURL(“图像/png”); 这句就是生成图片的地址。而这个图片就是截取的你的那个元素,有了图片地址就很好办了。我只是把它添加到id=癲w”这个元素中提供展示效果。其实做到这样就够了,但我又用帆布装了一遍。

　　

后面给图片加载方法:onload()在其中添加属性撒的,自动执行下载方法:区分了ie浏览器(网上找的方法),还有我直接生成的下载方法。关于下载方法很多,你们随意选。

　　

当然自己的这个下载(src)下载方法同样适用ie。因为原理很简单,就是用生成个元素自己调用方法。

　　

　　

以上所述是小编给大家介绍的年代实现div模块的截图并下载功能,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

JS实现div模块的截图并下载功能