一个图片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
No
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
No
n/a
Safari 6.1+*
Blob
No
?
None
Safari < 6
data: URI
No
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，而是通过后端服务器来计算出用户的下载链接，然后再利用之前提到的动态创建 标签的方式来实现下载，很简单吧！
)
的更新命令详解)
)
