JS打开图片另存为对话框实现代码
更新时间：2012年12月26日 11:57:56 作者：
使用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>
复制代码 代码如下:
<!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>
相关文章
这个其实就是利用qq官方提供的东西，简单的通过图片来测试是否在线，隐身也是不在线状态。纯粹学习使用。2010-04-04
这篇文章主要介绍了video.js 实现视频只能后退不能快进的思路详解，主要思路是点击进度条需要获取拖动前的时间点，具体实例代码大家跟随小编一起看看吧2018-08-08
这篇文章主要介绍了JS多个表单数据提交下的serialize()应用,接合实例形式分析了原生javascript实现多个表单提交时serialize操作相关使用技巧与操作注意事项,需要的朋友可以参考下2019-08-08
关于JavaScript中事件的一些重要说明,需要的朋友可以参考下。2009-10-10
zTree插件之单选下拉菜单实例代码。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
uniapp中微信小程序与H5相互跳转以及传参详解(webview)
在单位做项目的时候碰到一个需求,需要从微信小程序跳转到H5页面,下面这篇文章主要给大家介绍了关于uniapp中微信小程序与H5相互跳转以及传参的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
Bootstrap每天必学之面板，面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能，对面板感兴趣的小伙伴们可以参考一下2015-11-11
JavaScript开发时的五个注意事项讲述了表单事件、链接、循环优化、匿名函数、字符串连接等优化技巧,需要的朋友可以参考一下2007-12-12
这篇文章主要介绍了对javaScript原型链的理解,以实例形式对javaScript原型链的概念及相关使用技巧做了较为浅显易懂的分析,需要的朋友可以参考下2015-05-05
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
这篇文章主要介绍了BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法,下面通过本文给大家详细说明一下，需要的朋友可以参考下2016-12-12
最新评论