磨刀不误砍柴工

合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。
   ::  ::  ::  :: 管理
JS打开图片另存为对话框
单击按钮打开图片另存为对话框的示例如下:
（只支持IE）

 1 <html>
 2 <head>
 3 <title>New Document</title>
 4 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
 5 <script language="JavaScript">
 6 function downLoadImage(imagePathURL){ 
 7     //如果中间IFRAME不存在，则添加 
 8     if(!getImageFrame()) 
 9         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"); 
10     if(getImageFrame().src!=imagePathURL){ 
11             //图片地址发生变化，加载图片 
12             getImageFrame().src = imagePathURL; 
13     }else{ 
14         //图片地址没有变化，直接另存为 
15         _doSaveAsImage(); 
16     } 
17 } 
18 function _doSaveAsImage(){ 
19     if(getImageFrame().src!="about:blank") 
20     getImageFrame().document.execCommand("SaveAs"); 
21 } 
22 
23 function getImageFrame(){
24     return document.getElementById("_SAVEASIMAGE_TEMP_FRAME");
25 }
26 </script>
27 </head>
28 <body>
29     <input type="button" value="download image" onclick="downLoadImage('http://www.blogjava.net/images/blogjava_net/weiwei/46570/r_beyond1991.jpg');">
30 </body>
31 </html>

posted on 2010-04-15 11:58 liwei5891 阅读(7935) 评论(8)  编辑  收藏 所属分类: Javascript

Feedback

# re: JS打开图片另存为对话框 2010-10-09 13:57 qq401774330
我直接把代码保存为html，但是用不了。qq401774330  回复  更多评论
  

# re: JS打开图片另存为对话框 2010-10-09 14:09 qq401774330
很急，麻烦指点下。qq401774330谢谢！！  回复  更多评论
  

# re: JS打开图片另存为对话框 2010-10-10 10:55 weiwei
@qq401774330
保存代码后，要把
<input type="button" value="download image" onclick="downLoadImage('http://www.blogjava.net/images/logo.gif');">

中的图片地址'http://www.blogjava.net/images/logo.gif'改成你本地的地址，不然，就是跨域访问。浏览器安全性阻止这个操作。  回复  更多评论
  

# re: JS打开图片另存为对话框 2010-10-10 11:08 weiwei
@qq401774330
把jquery去掉用JS直接操作dom会比较好：
<!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 language="JavaScript">
<!--
function downLoadImage(imagePathURL){
//如果中间IFRAME不存在，则添加
if(!document.getElementById("_SAVEASIMAGE_TEMP_FRAME")){
var iframe = document.createElement('iframe');
iframe.setAttribute('style','display:none;');
iframe.setAttribute('id','_SAVEASIMAGE_TEMP_FRAME');
iframe.setAttribute('name','_SAVEASIMAGE_TEMP_FRAME');
iframe.setAttribute('src','about:blank');
document.appendChild(iframe);
}
if(document.all._SAVEASIMAGE_TEMP_FRAME.src!=imagePathURL){
//图片地址发生变化，加载图片
document.all._SAVEASIMAGE_TEMP_FRAME.src = imagePathURL;
_doSaveAsImage();
}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('tomcat.gif');">
</body>
</html>  回复  更多评论
  

# re: JS打开图片另存为对话框 2011-09-01 15:53 123654
为什么保存本地也不可以啊 本地图片也不行  回复  更多评论
  

# re: JS打开图片另存为对话框 2011-09-01 15:54 123654
为什么本地的图片也不行啊？...  回复  更多评论
  

# re: JS打开图片另存为对话框 2012-09-06 09:43 叔叔
如果图片中文怎么处理啊。谢谢  回复  更多评论
  

# re: JS打开图片另存为对话框 2014-05-11 14:09 fdas
fdasfdasfda  回复  更多评论
  


只有注册用户登录后才能发表评论。
网站导航: