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 相关文章推荐
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
alert和confirm功能介绍
May 21 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
js实现特别简单的钟表效果
Sep 14 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 fsockopen写的HTTP下载的类
2007/02/22 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
十佳青年个人事迹材料
2014/01/28 职场文书
基督教婚礼主持词
2014/03/14 职场文书
家长通知书教师评语
2014/04/17 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
创业计划书之面包店
2019/09/17 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题