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


Posted in Javascript onOctober 17, 2017

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

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

<script type="text/javascript" src="js/html2canvas.js"></script>
 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

加入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(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
 display: inline-block;
}
.close:after{
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width:0.2em;
 height:1em;
 background: #333;
 -webkit-transform: rotate(270deg);
 -moz-transform: rotate(270deg);
 -o-transform: rotate(270deg);
 -ms-transform: rotate(270deg);
 transform: rotate(270deg);
}

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

<!-- 要截图的div main 蓝色区域 -->
<div id="main" style="width: 50%; margin-left: 100px;padding: 50px;height: 400px;background: #5a90a0">
<div style="height: 200px;width: 200px;background: #ccc;"></div>

<div style="height: 30px;width: 168px;border:2px solid black;background: red;text-align: center;" onclick="doScreenShot()">截图</div>
</div>
<!-- 生成图片展示的DIV dw-->
<div id="dw" >

<div style="float: right;width: 25px;height: 25px;" title="关闭" onclick="closeok()">


<span class="close"></span>

</div> 
</div>

页面效果如下:

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

js代码如下:

$("#dw").hide();
//关闭图片
function closeok(){
 $("#dw").hide();
}
//点击截图
function doScreenShot(){
 $("#dw").show();
 html2canvas($("#main"), {
  onrendered: function(canvas) {
   canvas.id = "mycanvas"; 
   var mainwh=$("#main").width(); 
   var mainhg=$("#main").height();
   var img = convertCanvasToImage(canvas);
   console.log(img);
   //document.body.appendChild(img);
   $("#dw").append(img) //添加到展示图片div区域
   img.onload = function() {
    img.onload = null;
    canvas = convertImageToCanvas(img, 0, 0, 1024, 600); //设置图片大小和位置
    img.src = convertCanvasToImage(canvas).src;
    $(img).css({
     background:"#fff"  
    });
    //调用下载方法 
     if(browserIsIe()){ //假如是ie浏览器    
      DownLoadReportIMG(img.src);
     }else{
      download(img.src)
     }
    }
   }    
 });
} 
//绘制显示图片 
function convertCanvasToImage(canvas) {
 var image = new Image();
 image.src = canvas.toDataURL("image/png"); //获得图片地址
 return image;
}
//生成canvas元素,相当于做了一个装相片的框架
function convertImageToCanvas(image, startX, startY, width, height) {
 var canvas = document.createElement("canvas");
 canvas.width = width;
 canvas.height = height;
 canvas.getContext("2d").drawImage(image, startX, startY, width, height, 20, 20, 960, 600); //在这调整图片中内容的显示(大小,放大缩小,位置等)
 return canvas;
}
 function DownLoadReportIMG(imgPathURL) {
 //如果隐藏IFRAME不存在,则添加
 if (!document.getElementById("IframeReportImg"))
  $('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="DoSaveAsIMG();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");
 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("SaveAs");
}
// 另存为图片
function download(src) {
 var $a = $("<a></a>").attr("href", src).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(canvas) {})方法,是插件提供的。其中:dom是你要截图的元素模块

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

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

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

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

总结

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

Javascript 相关文章推荐
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 #Javascript
AngularJS 控制器 controller的详解
Oct 17 #Javascript
VUE前端cookie简单操作
Oct 17 #Javascript
javascript 判断用户有没有操作页面
Oct 17 #Javascript
vue-router 路由基础的详解
Oct 17 #Javascript
如何抽象一个Vue公共组件
Oct 17 #Javascript
vue实现图书管理demo详解
Oct 17 #Javascript
You might like
php将数组存储为文本文件方法汇总
2015/10/28 PHP
php构造函数与析构函数
2016/04/23 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
银行求职信个人范文
2013/12/16 职场文书
四查四看剖析材料
2014/02/14 职场文书
个人贷款担保书
2014/04/01 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android