網頁中點擊下載圖片

時間 2019-11-21
標籤網頁點擊下載圖片欄目 HTML 简体版
原文原文鏈接
  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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。