JS打開圖片另存為對話框?qū)崿F(xiàn)代碼
更新時間：2012年12月26日 11:57:56 作者：
使用JS打開圖片另存為對話框一直都是網(wǎng)頁應(yīng)用中不可缺少的一部分，本人有些好奇，于是搜集整理了一些實現(xiàn)代碼，不知道符不符合大眾的口味，在此班門弄斧了，需要的朋友可以了解下
單擊按鈕打開圖片另存為對話框的示例如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript">
<!--
function downLoadImage(imagePathURL){
//如果中間IFRAME不存在，則添加
if(!document.getElementById("_SAVEASIMAGE_TEMP_FRAME"))
jQuery('<iframe style="display:none;" id="_SAVEASIMAGE_TEMP_FRAME" name="_SAVEASIMAGE_TEMP_FRAME" onload="_doSaveAsImage();"
width="0" height="0" src="about:blank"></iframe>').appendTo("body");
if(document.all._SAVEASIMAGE_TEMP_FRAME.src!=imagePathURL){
//圖片地址發(fā)生變化，加載圖片
document.all._SAVEASIMAGE_TEMP_FRAME.src = imagePathURL;
}else{
//圖片地址沒有變化，直接另存為
_doSaveAsImage();
}
}
function _doSaveAsImage(){
if(document.all._SAVEASIMAGE_TEMP_FRAME.src!="about:blank")
document.frames("_SAVEASIMAGE_TEMP_FRAME").document.execCommand("SaveAs");
}
//-->
</script>
</head>
<body>
<input type="button" value="download image" onclick="downLoadImage('http://www.blogjava.net/images/blogjava_net/weiwei/46570/r_beyond1991.jpg');">
</body>
</html>
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript">
<!--
function downLoadImage(imagePathURL){
//如果中間IFRAME不存在，則添加
if(!document.getElementById("_SAVEASIMAGE_TEMP_FRAME"))
jQuery('<iframe style="display:none;" id="_SAVEASIMAGE_TEMP_FRAME" name="_SAVEASIMAGE_TEMP_FRAME" onload="_doSaveAsImage();"
width="0" height="0" src="about:blank"></iframe>').appendTo("body");
if(document.all._SAVEASIMAGE_TEMP_FRAME.src!=imagePathURL){
//圖片地址發(fā)生變化，加載圖片
document.all._SAVEASIMAGE_TEMP_FRAME.src = imagePathURL;
}else{
//圖片地址沒有變化，直接另存為
_doSaveAsImage();
}
}
function _doSaveAsImage(){
if(document.all._SAVEASIMAGE_TEMP_FRAME.src!="about:blank")
document.frames("_SAVEASIMAGE_TEMP_FRAME").document.execCommand("SaveAs");
}
//-->
</script>
</head>
<body>
<input type="button" value="download image" onclick="downLoadImage('http://www.blogjava.net/images/blogjava_net/weiwei/46570/r_beyond1991.jpg');">
</body>
</html>
相關(guān)文章
這個其實就是利用qq官方提供的東西，簡單的通過圖片來測試是否在線，隱身也是不在線狀態(tài)。純粹學(xué)習(xí)使用。2010-04-04
video.js 實現(xiàn)視頻只能后退不能快進的思路詳解
這篇文章主要介紹了video.js 實現(xiàn)視頻只能后退不能快進的思路詳解，主要思路是點擊進度條需要獲取拖動前的時間點，具體實例代碼大家跟隨小編一起看看吧2018-08-08
JS多個表單數(shù)據(jù)提交下的serialize()應(yīng)用實例分析
這篇文章主要介紹了JS多個表單數(shù)據(jù)提交下的serialize()應(yīng)用,接合實例形式分析了原生javascript實現(xiàn)多個表單提交時serialize操作相關(guān)使用技巧與操作注意事項,需要的朋友可以參考下2019-08-08
關(guān)于JavaScript中事件的一些重要說明,需要的朋友可以參考下。2009-10-10
zTree插件之單選下拉菜單實例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
uniapp中微信小程序與H5相互跳轉(zhuǎn)以及傳參詳解(webview)
在單位做項目的時候碰到一個需求,需要從微信小程序跳轉(zhuǎn)到H5頁面,下面這篇文章主要給大家介紹了關(guān)于uniapp中微信小程序與H5相互跳轉(zhuǎn)以及傳參的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
Bootstrap每天必學(xué)之面板，面板（Panels）是Bootstrap框架新增的一個組件，其主要作用就是用來處理一些其他組件無法完成的功能，對面板感興趣的小伙伴們可以參考一下2015-11-11
JavaScript開發(fā)時的五個注意事項講述了表單事件、鏈接、循環(huán)優(yōu)化、匿名函數(shù)、字符串連接等優(yōu)化技巧,需要的朋友可以參考一下2007-12-12
這篇文章主要介紹了對javaScript原型鏈的理解,以實例形式對javaScript原型鏈的概念及相關(guān)使用技巧做了較為淺顯易懂的分析,需要的朋友可以參考下2015-05-05
BootStrap Validator 版本差異問題導(dǎo)致的submitHandler失效問題的解決方法
這篇文章主要介紹了BootStrap Validator 版本差異問題導(dǎo)致的submitHandler失效問題的解決方法,下面通過本文給大家詳細(xì)說明一下，需要的朋友可以參考下2016-12-12