前端非同源图片下载方法合集

由于再日常开发中，公司往往会有一个图片服务器。在要求前端实现图片下载时往往会有非同源的问题。

非同源使用download属性默认会预览而不是下载。

由于图片服务器往往是允许跨域的，所以我们在这里用ajax get请求的方式，获取图片blob文件，再由

window.URL.createObjectURL
(专门用来将blob或者file读取成一个url的可被img,video,audio 识别显示出来的url)

方法一：
```
function downloadImg(src,name){
        var x=new XMLHttpRequest();　　　　　　　//禁止浏览器缓存；否则会报跨域的错误
        x.open("GET", src+'?t='+new Date().getTime(), true);
        x.responseType = 'blob';
        x.onload=function(e){
            var url = window.URL.createObjectURL(x.response)
            var a = document.createElement('a');
            a.href = url
            a.download = name
            a.click()
        }
        x.send();
    }
```
```
<a href="javascript:;" id="download" onclick='downloadImg(url,name)'>下载</a>
```

方法二：
通过后台中转，将图片下载回后台再转给前端

方法三：
```
downs(){
  this.downloadIamge(this.pic.url, 'pic')
}
```

```
downloadIamge(imgsrc, name) {//下载图片地址和图片名
  var image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
  
    var a = document.createElement("a"); // 生成一个a元素
    var event = new MouseEvent("click"); // 创建一个单击事件
    a.download = name || "photo"; // 设置图片名称
    a.href = url; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
  };
  image.src = imgsrc;
},
```

方法四：
借助HTML5 Blob实现文本信息文件下载
```
const downloadRes = async (url, name) => {
    let response = await fetch(url)
    // 内容转变成blob地址
    let blob = await response.blob()
    // 创建隐藏的可下载链接
    let objectUrl = window.URL.createObjectURL(blob)
    let a = document.createElement('a')
    //地址
    a.href = objectUrl
    //修改文件名
    a.download = name
    // 触发点击
    document.body.appendChild(a)
    a.click()
    //移除
    setTimeout(() => document.body.removeChild(a), 1000)
}
```

前端非同源图片下载方法合集

添加新评论

关于博主

文章分类

最受欢迎的文章

最近回复

其它