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

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

首先我们需要引入2个射流研究…文件：

脚本类型=' text/JavaScript ' src=' http : js/html 2画布。js /脚本脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。12 .3 .量滴js /脚本加入钢性铸铁样式，主要是生成x '关闭图片图标：

正文{背景： # CCC } # dw {位置：绝对；top: 10px左侧：10%;高度： 620像素；宽度宽度：1030像素背景# fffborder:1px纯黑；padding: 10px } .关闭{ position : relative eleft : 10px宽度宽度：0.2em高度：1毫米；背景技术： # 333;-webkit-transform:旋转(45 );-moz-变压器：旋转(45 );表示“具有…性质的”型变压器： 旋转(45 );-ms-变压器：旋转(45 );变压器： 旋转(45 );显示器：内联块；} .close:after在{内容： }之后；绝对位置：top : 0；左： 0；宽度宽度：0.2em高度：1毫米；背景技术： # 333;-WebKit-变压器：旋转(270度);-moz-变压器：旋转(270度);表示“具有…性质的”型变压器： 旋转(270度);-ms-变压器：旋转(270度);变压器： 旋转(270度);}写入随便差异模块，我随便位置给的点击截图按钮

！-要截图的div main蓝色区域-div id=' main ' style=' width : 50%；左边距： 100像素；padding: 50px高度： 400像素；背景： # 5a 90 a 0 ' div style='高度： 200 px宽度： 200像素；背景# CCC '/div div style=' height : 30px；宽度： 168像素；border:2px纯黑；背景：红色；文本对齐：中心onclick='doScreenShot()'截图/div/div！-生成图片展示的DIV dw-DIV id=' dw ' DIV style=' float : right；宽度： 25px高度： 25px '标题='关闭onclick=' closek()' span class=' close '/span/div/div页面效果如下：

射流研究…代码如下：

$('#dw ').hide()；//关闭图片函数closek(){ $(' # dw ').hide()；}//点击截图函数doScreenShot(){ $('#dw ').show()；html2canvas($('#main ')，{ onrendered : function(canvas){ canvas。id='我的画布'；var mainwh=$('#main ').宽度();var mainhg=$('#main ').高度();var img=convertCanvasToImage(画布);控制台。日志(img)；//文档。尸体。appendchild(img)；$('#dw ').追加(img) //添加到展示图片差异区域img。onload=function(){ img。onload=nullcanvas=convertImageToCanvas(img，0，0，1024，600)；//设置图片大小和位置img.src=convertCanvasToImage(画布)。src$(img).CSS({ background : ' # fff ' })；//调用下载方法if(browserIsIe()){ //假如是工程师协会浏览器下载下载(img。src)；} else { download(img。src)} } })；} //绘制显示图片函数convertCanvasToImage(画布){ var Image=new Image()；图像。src=画布。todaytaul(' image/png ')；//获得图片地址返回图像；}//生成帆布元素，相当于做了一个装相片的框架函数convertImageToCanvas(图像、startX、startY、宽度、高度){ var canvas=document。create element(' canvas ')；canvas.width=宽度；canvas.height=高度；canvas.getContext('2d ').drawImage(image，startX，startY，width，height，20，20，960，600)；//在这调整图片中内容的显示（大小，放大缩小，位置等)返回画布；}函数downloaddereportig(IMgpathURl){//如果隐藏内联框架不存在，则添加if(！文件。getelementbyid(' iframepitmg ')$(' iframe style=' display : none；id=' iframepitamg ' name=' iframepitamg ' on load=' DoSaveAsIMG()；width=' 0 ' height=' 0 ' src=' http :约： blank '/iframe ').appendo(' body ')；if(文档。全部。iframeportimg。src！=imgPathURL) { //加载图片文件。全部。iframeportimg。src=imgPathURL} else { //图片直接另存为DoSaveAsIMG()；} }函数DoSaveAsImg(){ if(document。全部。iframerePortimg。src！='约：空白')窗口。框架[' iframereport mg ']。文件。exec命令(' Saveas ')；}//另存为图片函数下载(src) { var $a=$('a/a ').attr('href '，src).attr('下载'，' img。png ')；$a[0].单击();}//判断是否为工程师协会浏览器函数browserIsIe() { if(！窗户。窗口中的ActiveXObject || 'ActiveXObject ')返回真实的否则返回false}解释说明：这里核心截图代码是

html2canvas(dom，{ onrendered:函数(画布){})方法，是插件提供的。其中：dom是你要截图的元素模块

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

其中：图像。src=画布。todaytaul(' image/png ')；这句就是生成图片的地址。而这个图片就是截取的你的那个元素，有了图片地址就很好办了。我只是把它添加到id="dw "这个元素中提供展示效果。其实做到这样就够了，但我又用帆布装了一遍。

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

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

总结

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