原生js实现点击下载图片

Posted 夜冷霜星

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生js实现点击下载图片相关的知识,希望对你有一定的参考价值。

点击下载,则可下载上级兄弟节点

<div class="form-group">
      <div>
           <h3>申请人信息</h3>
           <div class="sq_info">
                 <ul>
                      <li><span>姓名:</span><p>张三</p></li>
                      <li><span>姓名:</span><p>张三</p></li>
                      <li><span>本人照片:</span><img src="http://pic.pptbz.com/201506/2015070581208537.JPG" alt=""><a href="javascript:void(0);" onclick="down_img(this)">点击下载</a></li>
                      <li><span>护照首页:</span><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=302701032,2300144492&fm=27&gp=0.jpg" alt=""><a href="javascript:void(0);" onclick="down_img(this)">点击下载</a></li>
                       <li><span>价格:</span><p class="price">500元</p></li>
                    </ul>
               </div>
          </div>
     <div>
<script>
function myBrowser() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1;
if(isOpera) {
return "Opera"
}; //判断是否Opera浏览器
if(userAgent.indexOf("Firefox") > -1) {
return "FF";
} //判断是否Firefox浏览器
if(userAgent.indexOf("Chrome") > -1) {
return "Chrome";
}
if(userAgent.indexOf("Safari") > -1) {
return "Safari";
} //判断是否Safari浏览器
if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
return "IE";
}; //判断是否IE浏览器
if(userAgent.indexOf("Trident") > -1) {
return "Edge";
} //判断是否Edge浏览器
}

//②IE浏览器图片保存(IE其实用的就是window.open)
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();
}

//④点击事件下载(只需更改图片路径即可)
function down_img(a){
var osb = a;
var sb = a.previousSibling.src;
// console.log(sb)
if(myBrowser() === "IE" || myBrowser() === "Edge") {
//IE (浏览器)
SaveAs5(sb);
} else {
//!IE (非IE)
osb.href = sb;
osb.download = "";
}
}
</script>

注意:previousSibling取上级兄弟节点,要注意标签之间不能有空格,否则会出现未定义

以上是关于原生js实现点击下载图片的主要内容,如果未能解决你的问题,请参考以下文章

原生JS和CSS实现点击图片预览放大

原生js实现图片抖动效果

原生js实现轮播图

js实现svg图形转存为图片下载[转]

Javascript学习记录——原生JS实现旋转木马特效

iOS开发漫话WKWebView之给H5网页图片添加点击事件以实现原生图片预览