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 相关文章推荐
jqPlot 基于jquery的画图插件
Apr 26 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
Three.js学习之网格
Aug 10 Javascript
js实现表格筛选功能
Jan 18 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
原生js+ajax分页组件
Jan 30 Javascript
微信小程序入门之指南针
Oct 22 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
自己动手做一个SQL解释器
2006/10/09 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
Python sorted对list和dict排序
2020/06/09 Python
python实现人工蜂群算法
2020/09/18 Python
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
保安的辞职报告怎么写
2014/01/20 职场文书
大学信息公开实施方案
2014/03/09 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
趣味运动会广播稿
2015/08/19 职场文书
三好学生竞选稿
2015/11/21 职场文书