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