• 使用a链接下载图片


    在做a链接下载图片的时候遇到一个问题,在谷歌浏览器下只是新建了一个窗口,并没有实现下载。浏览器版本信息

    经过实测,在谷歌下a链接实现下载图片必须具备两个条件。1,必须在启动服务,在服务器下运行。2,必须使用相对路径。

    下面附上兼容写法代码:

    <ul>
        <li><span>本人照片:</span><img src="0.JPG" alt=""><a href="javascript:void(0);" onclick="down_img(this)">点击下载</a>
            </li>
        <li><span>护照首页:</span><img src="1.jpg"alt=""><a href="javascript:void(0);" onclick="down_img(this)">点击下载</a>
            </li>
    </ul>
        
    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 = "";
            }
        }

      

  • 相关阅读:
    P2617 Dynamic Rankings[带修主席树(模板)]
    P2617 Dynamic Rankings[带修主席树(模板)]
    P4127 [AHOI2009]同类分布
    P4127 [AHOI2009]同类分布
    P4550 收集邮票 [期望dp]
    P4550 收集邮票 [期望dp]
    P3168 [CQOI2015]任务查询系统
    蓝桥杯 2的次幂表示 递归
    蓝桥杯 最大的算式 dp
    蓝桥杯 未名湖边的烦恼 递推 dp
  • 原文地址:https://www.cnblogs.com/jxl-blog/p/9791183.html
Copyright © 2020-2023  润新知