php 实现跨站下载图片,一个图片url访问后直接下载怎样实现-CSDN博客

一个图片url访问后直接下载怎样实现

先看代码

downloadIamge(imgsrc, name) {//下载图片地址和图片名

let image = new Image();

// 解决跨域 Canvas 污染问题

image.setAttribute("crossOrigin", "anonymous");

image.onload = function() {

let canvas = document.createElement("canvas");

canvas.width = image.width;

canvas.height = image.height;

let context = canvas.getContext("2d");

context.drawImage(image, 0, 0, image.width, image.height);

let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

let a = document.createElement("a"); // 生成一个a元素

let event = new MouseEvent("click"); // 创建一个单击事件

a.download = name || "photo"; // 设置图片名称

a.href = url; // 将生成的URL设置为a.href属性

a.dispatchEvent(event); // 触发a的单击事件

};

image.src = imgsrc;

JavaScript 下载文件

fetch('http://somehost/somefile.zip').then(res => res.blob().then(blob => {

var a = document.createElement('a');

var url = window.URL.createObjectURL(blob);

var filename = 'myfile.zip';

a.href = url;

a.download = filename;

a.click();

window.URL.revokeObjectURL(url);

}))

你可能会问，何必这么麻烦呢？直接写成下面这样不就好了：

嗯，对于这种写法，我只能说，你做的太正确了！如果你要下载的是已经存在服务器上面的静态文件的话，那么写成这样是最方便的。浏览器会帮你处理整个下载过程，不需要你干涉。如果你用 blob 的方式来下载文件的话，会有下面这些限制的：

限制一：不同浏览器对 blob 对象有不同的限制

Browser

Constructs as

Filenames

Max Blob Size

Dependencies

Firefox 20+

Blob

Yes

800 MiB

None

Firefox < 20

data: URI

n/a

Chrome

Blob

Yes

500 MiB

None

Chrome for Android

Blob

Yes

500 MiB

None

Edge

Blob

Yes

None

IE 10+

Blob

Yes

600 MiB

None

Opera 15+

Blob

Yes

500 MiB

None

Opera < 15

data: URI

n/a

Safari 6.1+*

Blob

None

Safari < 6

data: URI

n/a

限制二：构建完 blob 对象后才会转换成文件

这一点限制对小文件(几十kb)可能没什么影响，但对稍微大一点的文件影响就很大了。试想，用户要下载一个 100mb 的文件，如果他点击了下载按钮之后没看到下载提示的话，他肯定会继续按，等他按了几次之后还没看到下载提示时，他就会抱怨我们的网站，然后离开了。

然而事实上下载的的确确发生了，只是要等到下载完文件之后才能构建 blob 对象，再转化成文件。而且，用户再触发多几次下载就会造成一些资源上的浪费。

因此，如果是要下载大文件的话，还是推荐直接创建一个标签拉~

写 html 也好，写 JavaScript 动态创建也好，用自己喜欢的方式去创建就好了。

## 为什么要用 JavaScript 下载文件

好拉，说了半天，其实我们一直说的都是：「不要用 JavaScript 下载文件拉，限制多多，又不好用，直接用 html 就好拉，简单方便又快捷」这个论调。

事实上也确实如此，但有些时候我们确实需要通过 JavaScript 来做一些预处理。

权限校验

有些时候，我们需要对下载做一些限制，最常见的就是权限校验了，如检查该用户是否有下载的权限，是否有高速下载的权限等等。这时候，我们可以利用 JavaScript 做一些预处理。如：

fetch('http://somehost/check-permission', options).then(res => {

if (res.code === 0) {

var a = document.createElement('a');

var url = res.data.url;

var filename = 'myfile.zip';

a.href = url;

a.download = filename;

a.click();

} else {

alert('You have no permission to download the file!');

}

});

在这个例子里面，我们没有用 blob 来构建 URL，而是通过后端服务器来计算出用户的下载链接，然后再利用之前提到的动态创建标签的方式来实现下载，很简单吧！