JS打开图片另存为对话框 （转）

单击按钮打开图片另存为对话框的示例如下:

<!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){
            //图片地址发生变化，加载图片
            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>


posted on 2010-04-15 11:58 weiwei 阅读(1459) 评论(6)  编辑  收藏


评论

# 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
为什么本地的图片也不行啊？...  回复  更多评论
  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zhwl/p/2349596.html