<input type="text" id="img" name="img" value="signatrue.GIF" /><input type="button" onclick="download(document.all.img.value)" />
<script language="javascript">
function download(s){
var i=document.createElement("iframe");
i.src=s;
document.body.appendChild(i);
try{
i.contentWindow.document.execCommand("saveas","a.gif");
}
catch(e)
{
alert("不能跨域访问");
} }
</script>
<script language="javascript">
function download(s){
var i=document.createElement("iframe");
i.src=s;
document.body.appendChild(i);
try{
i.contentWindow.document.execCommand("saveas","a.gif");
}
catch(e)
{
alert("不能跨域访问");
} }
</script>
<img src="xxx.gif" id="img1"/><br/>
<input type="button" value="DownLoadIMg" onclick="DownLoad(1)"/><br/>
<img src="xxx.gif" id="img2"/><br/>
<input type="button" value="DownLoadIMg" onclick="DownLoad(2)"/>
<iframe id="getPic" src="" style="display:none"/><!---隐藏的iframe，来访问你的php页面用的--->
<script>
//donwload.php根据参数src把图片读出来，然后设置对应的mime类型，然后输出2进制数据，这个php不会
//参数id为图片的id的数字编号，如img1，img2的后面的数字
function DownLoad(id)
{
document.getElementById('getPic').src="download.php?src="+document.getElementById('img'+id)
+"&timeStamp="+escape(new Date().toString()); //加个时间戳防止缓存,当图片更改时可以下到改过的
}
</script>
<script language="javascript">
function download(s){
var i=document.createElement("iframe");
i.src=s;
document.body.appendChild(i);
try{
i.contentWindow.document.execCommand("saveas","a.gif");
}
catch(e)
{
alert("不能跨域访问");
} }
</script>
方法只能是通过服务器端把图片下载了，再返回客户端，写http协议头为文件下载
function SaveAs5(imgURL)
{
var oPop = window.open(imgURL,"","width=1, height=1, top=5000, left=5000");
for(; oPop.document.readyState != "complete"; )
{
if (oPop.document.readyState == "complete")break;
}
oPop.document.execCommand("SaveAs");
oPop.close();
}</script>
<img src="t_screenshot_17616.jpg" id="DemoImg" border="0" onclick="SaveAs5(this.src)">
不过在IE6 SP1下跨域引用的图片会出错
function SaveAs5(imgURL)
{
var oPop = window.open(imgURL,"","width=1, height=1, top=5000, left=5000");
for(; oPop.document.readyState != "complete"; )
{
if (oPop.document.readyState == "complete")break;
}
oPop.document.execCommand("SaveAs");
oPop.close();
}</script>
页面中代码
<img src="../t_screenshot_17616.jpg" id="DemoImg" border="0">
<a href="#" onclick="SaveAs5(document.getElementById('DemoImg').src)">点击这里下载图片</a>
当然你可以可以这样
<html>
<head>
</head>
<body>
<script>
window.onload=function()
{
//document.domain="lvyou168.cn";//不知道怎么搞的,设置了domain为根域名还是出现无法访问的问题
}
function DownLoad(id)
{
var PicIf=document.getElementById('getPic');
PicIf.src=document.getElementById('img'+id).src
+"?timeStamp="+escape(new Date().toString());//加个时间戳防止缓存,当图片更改时可以下到改过的
setTimeout("SavePic()",100);//用记时器来检查iframe的状态，这样网速慢时浏览器不会假死
}
function SavePic()
{
var PicIf=document.getElementById('getPic');
try
{
if(PicIf.contentWindow.document.readyState=="complete")//完全装载时才能保存为图片，要不保存空页面
{
PicIf.contentWindow.document.execCommand("saveas");
}
else
setTimeout("SavePic()",100);
}
catch(e)
{
alert(e.message);
}
}
</script><img src="xx1.gif" id="img1"/><br/>
<input type="button" value="DownLoadIMg" onclick="DownLoad(1)"/><br/>
<img src="http://b2b.lvyou168.cn/images/8747755.jpg" id="img2"/><!---这张跨域，没法保存----><br/>
<input type="button" value="DownLoadIMg" onclick="DownLoad(2)"/><br/>
<iframe id="getPic" src=""/><!---可以隐藏iframe--->
</body>
</html>
<head>
<script>
function SaveAs5(imgURL)
{
var oPop = window.open(imgURL,"","width=1, height=1, top=5000, left=5000");
for(; oPop.document.readyState != "complete"; )
{
if (oPop.document.readyState == "complete")break;
}
oPop.document.execCommand("SaveAs");
oPop.close();
} </script>
</head>
<form>
<img src="../t_screenshot_17616.jpg" id="DemoImg" border="0">
<a href="#" onclick="SaveAs5(document.getElementById('DemoImg').src)"> 点击这里下载图片 </a>
</form>
保存图片