已经有图片地址,请问如何用js实现自动下载

wildor
  • 80

比如这个地址

http://shangetu1.map.bdimg.com/it/u=x=52584;y=15017;z=18;v=009;type=sate&fm=46&udt=20141015

如何用js实现自动下载,放在a标签里只能打开新的网页,不能自动下载。
谢谢

回复
阅读 384
4 个回答
 var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);       
    xhr.responseType = "blob";
    xhr.onload = function () {      

        if (this.status === 200) {            // 返回200

            var blob = this.response;
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            // 转换为base64,可以直接放入a表情href
            reader.onload = function (e) {                // 转换完成,创建一个a标签用于下载
                var a = document.createElement('a');
                a.download = filename;
                a.href = e.target.result;
                jQuery("body").append(a);
                a.click();
                jQuery(a).remove();
            }
        }
    };
    // 发送ajax请求
    xhr.send()

事实就是:提供这个图片的后端服务器直接拒绝了你跨域获取这张图的请求。
不信你新建一个 img 标签,修改它的 src 为这个链接,会发现根本加载不了这张图。
所以这不是在网页上用 JS 就能解决的问题。
附一个抄来的图片加载器:

/**
 * @const loadImageFromURL - 从 URL 加载图片
 * */
const loadImageFromURL = (() => {
    const image = new Image();
    image.setAttribute('crossOrigin', 'Anonymous');
    let resolver = null, errHandler = null;
    image.onload = () => {
        resolver(image);
    };
    image.onerror = err => {
        errHandler(err);
    };
    return URL => {
        return new Promise((resolve, reject) => {
            resolver = resolve;
            errHandler = reject;
            image.src = URL;
        });
    }
})();

前端的那些方法得同域才能起作用,自己建个图片服务器吧

你知道吗?

宣传栏