快捷導(dǎo)航

jquery實(shí)現(xiàn)下載圖片功能

更新時(shí)間：2019年07月18日 11:01:03 作者：瘋?cè)?

這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)下載圖片的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jquery實(shí)現(xiàn)下載圖片的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
 <style>
 </style>
</head>
 
<body>
 <div class="box">
 <div class="card">
 <img id="testimg1" src="./img/a.jpg"/>
 <a href="javascript:;" class="down_btn_a">點(diǎn)擊下載</a>
 </div>
 </div>
 
 
 <script>
 //判斷是否為T(mén)rident內(nèi)核瀏覽器(IE等)函數(shù)
 function browserIsIe() {
 if (!!window.ActiveXObject || "ActiveXObject" in window){
  return true;
 }
 else{
  return false;
 }
 }
 //創(chuàng)建iframe并賦值的函數(shù),傳入?yún)?shù)為圖片的src屬性值.
 function createIframe(imgSrc) {
 //如果隱藏的iframe不存在則創(chuàng)建
 if ($("#IframeReportImg").length === 0){
  $('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="downloadImg();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");
 }
 //iframe的src屬性如不指向圖片地址,則手動(dòng)修改,加載圖片
 if ($('#IframeReportImg').attr("src") != imgSrc) {
  $('#IframeReportImg').attr("src",imgSrc);
 } else {
  //如指向圖片地址,直接調(diào)用下載方法
  downloadImg();
 }
 }
 //下載圖片的函數(shù)
 function downloadImg() {
 //iframe的src屬性不為空,調(diào)用execCommand(),保存圖片
 if ($('#IframeReportImg').src != "about:blank") {
  window.frames["IframeReportImg"].document.execCommand("SaveAs");
 }
 }
 //接下來(lái)進(jìn)行事件綁定
 var aBtn = $(".card .down_btn_a");
 if (browserIsIe()) {
 //是ie等,綁定事件
 aBtn.on("click", function() {
 var imgSrc = $(this).siblings("img").attr("src");
 //調(diào)用創(chuàng)建iframe的函數(shù)
  createIframe(imgSrc);
 });
 } else {
 aBtn.each(function(i,v){
 //支持download,添加屬性.
 var imgSrc = $(v).siblings("img").attr("src");
 $(v).attr("download",imgSrc);
 $(v).attr("href",imgSrc);
 })
 }
 </script>
</body>
 
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用delegate方法為一個(gè)tr標(biāo)簽加一個(gè)鏈接
這篇文章主要介紹了使用delegate方法為一個(gè)tr標(biāo)簽加一個(gè)鏈接，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)，需要的朋友可以參考下
2014-06-06
jquery ui bootstrap 實(shí)現(xiàn)自定義風(fēng)格
本文主要是給大家分享了jQuery UI bootstrap的自定義風(fēng)格，以及自定義的方法，非常的實(shí)用，有需要的小伙伴千萬(wàn)不要錯(cuò)過(guò)
2014-11-11
jquery zTree異步加載簡(jiǎn)單實(shí)例分享
Ztree是一個(gè)使用jQuery實(shí)現(xiàn)的JSP頁(yè)面的各種功能樹(shù)，本文介紹一個(gè)異步獲取數(shù)據(jù)到下拉樹(shù)的實(shí)現(xiàn)方式,感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)ztree有所幫助
2013-02-02
(jQuery,mootools,dojo)使用適合自己的編程別名命名
我們經(jīng)常用一些別名方法來(lái)使用自己喜歡的js 庫(kù)。學(xué)習(xí)javascript的朋友可以參考下。
2010-09-09
jQuery插件簡(jiǎn)單學(xué)習(xí)實(shí)例教程
這篇文章主要介紹了jQuery插件的簡(jiǎn)單用法,列舉了分頁(yè)插件、放大鏡插件、自動(dòng)完成插件、上傳插件、日歷插件等的簡(jiǎn)單使用方法,需要的朋友可以參考下
2016-07-07
Jquery多選下拉列表插件jquery multiselect功能介紹及使用
支持點(diǎn)擊label實(shí)現(xiàn)checkbox組選擇，頭部選項(xiàng)，如全選/ 取消全選 /關(guān)閉功能,支持鍵盤(pán)選擇等等，下面與大家分享下具體使用
2013-05-05
JQuery分屏指示器圖片輪換效果實(shí)例
這篇文章主要介紹了JQuery分屏指示器圖片輪換效果實(shí)現(xiàn)方法,實(shí)例分析了jQuery圖片輪播操作的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
jquery操作iframe實(shí)現(xiàn)父頁(yè)面和子頁(yè)面相互操作的九種情況
現(xiàn)實(shí)開(kāi)發(fā)中難免會(huì)遇到子頁(yè)面、父頁(yè)面相互操作的情況,本文主要介紹了jquery操作iframe實(shí)現(xiàn)父頁(yè)面和子頁(yè)面相互操作的九種情況,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-02-02
基于jQuery選擇器之表單對(duì)象屬性篩選選擇器的實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery選擇器之表單對(duì)象屬性篩選選擇器實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
jQuery快速實(shí)現(xiàn)商品數(shù)量加減的方法
這篇文章主要介紹了 jQuery快速實(shí)現(xiàn)商品數(shù)量加減的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-02-02