js实现图片下载

*不支持低版本的浏览器哦！

一：html代码

<img src="photo.jpg" id="photo"/>
<a href="javascript:;" target="_self" title="下载图片" class="down_btn">下载图片</a>

二：js代码

<script>
(function(){
    if( window.qtgLib == undefined) window.qtgLib = {}
    // 获取ie版本号
    function IEVersion(){
        var obj = {};
        var userAgent = navigator.userAgent;
        obj.isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
        obj.fIEVersion = 0;
        if (obj.isIE) {
            var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
            reIE.test(userAgent);
            obj.fIEVersion = parseFloat(RegExp["$1"]);
        }
        return obj
    }
    //创建canvas 来解析图片
    var canvasObj,filename;
    function getBase64 ( imgUrl,callback ){
        window.URL = window.URL || window.webkitURL;
        var xhr = new XMLHttpRequest();
        xhr.open("get", imgUrl, true);
        // 至关重要
        xhr.responseType = "blob";
        xhr.onload = function () {
            if (this.status == 200) {
                //得到一个blob对象
                var blob = this.response;
                //  至关重要
                var oFileReader = new FileReader();
                oFileReader.onloadend = function (e) {
                    var base64 = e.target.result;
                    callback(base64)
                };
                oFileReader.readAsDataURL(blob);
            }
        }
        xhr.send();
    }
    //将数据 存本地方法
    function downloadImg(imgdata) {
        if (window.navigator.msSaveOrOpenBlob) {
            var bstr = atob(imgdata.split(',')[1])
            var n = bstr.length
            var u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            var blob = new Blob([u8arr])
            window.navigator.msSaveOrOpenBlob(blob, filename)
        }else{
            var save_link = document.createElement('a')
            save_link.href = imgdata
            save_link.download = filename
            var event=document.createEvent('MouseEvents');
            event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
            save_link.dispatchEvent( event )            
        }
    }
    function init( aBtn, downUrl ){
        var aBtn = aBtn || $(".card .down_btn_a");
        aBtn.on("click", function() {
            var imgSrc = downUrl || $(this).siblings("img").attr("src");
            var ieV = new IEVersion
            if (ieV.isIE && (ieV.fIEVersion<10)) {
                window.open(imgSrc, "", "top=0,left=0");
            }else{
                var extStart = imgSrc.lastIndexOf('/');
                var ext = imgSrc.substring(extStart+1,imgSrc.length)
                filename = ext;
                getBase64(imgSrc,downloadImg)
            }
        });
    }

    qtgLib.saveImg = init
})()
$(document).ready(function(){
    qtgLib.saveImg($(".down_btn"), $("#photo").attr("src") )
})
</script>