网页中点击下载图片

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title>图片点击下载</title>
  7         <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
  8         <style type="text/css">
  9             * {
 10                 padding: 0;
 11                 margin: 0;
 12             }
 13             
 14             img {
 15                 display: block;
 16                 width: 500px;
 17             }
 18             
 19             .card {
 20                 display: inline-block;
 21                 position: relative;
 22                 width: 400px;
 23                 height: 250px;
 24             }
 25             
 26             .card img {
 27                 width: 100%;
 28             }
 29             
 30             .card .down_btn_a {
 31                 display: inline-block;
 32                 position: absolute;
 33                 right: 0;
 34                 bottom: 0;
 35                 width: 100px;
 36                 height: 40px;
 37                 line-height: 40px;
 38                 background-color: #20b1aa;
 39                 text-decoration: none;
 40                 text-align: center;
 41                 color: #fff;
 42             }
 43             
 44             .card .down_btn_a:hover {
 45                 background-color: #ccc;
 46                 color: #000;
 47             }
 48         </style>
 49 
 50     </head>
 51 
 52     <body>
 53 
 54         <div class="card">
 55             <img id="testimg" src="会员卡.png" />
 56             <a href="javascript:;" class="down_btn_a">点击下载</a>
 57         </div>
 58 
 59         <script type="text/javascript">
 60             //判断是否为Trident内核浏览器(IE等)函数
 61             function browserIsIe() {
 62                 if(!!window.ActiveXObject || "ActiveXObject" in window) {
 63                     return true;
 64                 } else {
 65                     return false;
 66                 }
 67             }
 68             //创建iframe并赋值的函数,传入参数为图片的src属性值.
 69             function createIframe(imgSrc) {
 70                 //如果隐藏的iframe不存在则创建
 71                 if($("#IframeReportImg").length === 0) {
 72                     $('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="downloadImg();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");
 73                 }
 74                 //iframe的src属性如不指向图片地址,则手动修改,加载图片
 75                 if($('#IframeReportImg').attr("src") != imgSrc) {
 76                     $('#IframeReportImg').attr("src", imgSrc);
 77                 } else {
 78                     //如指向图片地址,直接调用下载方法
 79                     downloadImg();
 80                 }
 81             }
 82             //下载图片的函数
 83             function downloadImg() {
 84                 //iframe的src属性不为空,调用execCommand(),保存图片
 85                 if($('#IframeReportImg').src != "about:blank") {
 86                     window.frames["IframeReportImg"].document.execCommand("SaveAs");
 87                 }
 88             }
 89             //接下来进行事件绑定
 90             var aBtn = $(".card .down_btn_a");
 91             if(browserIsIe()) {
 92                 //是ie等,绑定事件
 93                 aBtn.on("click", function() {
 94                     var imgSrc = $(this).siblings("img").attr("src");
 95                     //调用创建iframe的函数
 96                     createIframe(imgSrc);
 97                 });
 98             } else {
 99                 aBtn.each(function(i, v) {
100                     //支持download,添加属性.
101                     var imgSrc = $(v).siblings("img").attr("src");
102                     $(v).attr("download", imgSrc);
103                     $(v).attr("href", imgSrc);
104                 })
105             }
106         </script>
107     </body>
108 
109 </html>
网页中点击下载图片

推荐阅读
