JS实现div模块的截图并下载功能_javascript技巧_脚本之家

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

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

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

body{background: #ccc}#dw{position: absolute;top: 10px;left:10%;height: 620px;width:1030px;background: #fff; border:1px solid black;padding: 10px}.close{ position:relative; left: 10px; width:0.2em; height:1em; background: #333; -webkit-transform: rotate; -moz-transform: rotate; -o-transform: rotate; -ms-transform: rotate; transform: rotate; display: inline-block;}.close:after{ content: ""; position: absolute; top: 0; left: 0; width:0.2em; height:1em; background: #333; -webkit-transform: rotate; -moz-transform: rotate; -o-transform: rotate; -ms-transform: rotate; transform: rotate;}

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

  截图    

$;//关闭图片function closeok;}//点击截图function doScreenShot; html2canvas, { onrendered: function { canvas.id = "mycanvas"; var mainwh=$; var mainhg=$; var img = convertCanvasToImage; console.log; //document.body.appendChild.append //添加到展示图片div区域 img.onload = function() { img.onload = null; canvas = convertImageToCanvas; //设置图片大小和位置 img.src = convertCanvasToImage.css({ background:"#fff" }); //调用下载方法 if{ //假如是ie浏览器 DownLoadReportIMG; }else{ download;} //绘制显示图片 function convertCanvasToImage { var image = new Image(); image.src = canvas.toDataURL; //获得图片地址 return image;}//生成canvas元素,相当于做了一个装相片的框架function convertImageToCanvas(image, startX, startY, width, height) { var canvas = document.createElement; canvas.width = width; canvas.height = height; canvas.getContext.drawImage(image, startX, startY, width, height, 20, 20, 960, 600); //在这调整图片中内容的显示 return canvas;} function DownLoadReportIMG { //如果隐藏IFRAME不存在,则添加 if (!document.getElementById $('').appendTo; if (document.all.IframeReportImg.src != imgPathURL) { //加载图片 document.all.IframeReportImg.src = imgPathURL; } else { //图片直接另存为 DoSaveAsIMG(); }}function DoSaveAsIMG() { if (document.all.IframeReportImg.src != "about:blank") window.frames["IframeReportImg"].document.execCommand;}// 另存为图片function download { var $a = $.attr.attr("download", "img.png"); $a[0].click();}//判断是否为ie浏览器function browserIsIe() { if (!!window.ActiveXObject || "ActiveXObject" in window) return true; else return false;}

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

html2canvas(dom, { onrendered: function方法,是插件提供的。其中:dom是你要截图的元素模块

它的作用是把这个参数canvas形成一个img图片元素。调用的是单另的convertCanvasToImage()方法,

其中:
image.src = canvas.toDataURL;这句就是生成图片的地址。而这个图片就是截取的你的那个元素,有了图片地址就很好办了。我只是把它添加到id=“dw”这个元素中提供展示效果。其实做到这样就够了,但我又用canvas装了一遍。

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

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

总结

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注