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

Question

比如这个地址

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

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

Answer 1

 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()

Answer 2

canvas

Answer 3

事实就是：提供这个图片的后端服务器直接拒绝了你跨域获取这张图的请求。
不信你新建一个 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;
        });
    }
})();

Answer 4

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