欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-07-05 20:45:09
当需要实现html页面部分模块截图并具有保存图片功能时，前台直接生成截图并下载会方便的多。多的不说，直接看代码 首先我们需要引入2个js文件：

当需要实现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模块的截图并下载功能，希望对大家有所帮助

上一篇： 用原生JS实现简单的多选框功能

下一篇： BACKBONE.JS 简单入门范例

推荐阅读