• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

图片下载

开发技术 开发技术 4小时前 3次浏览

1. 普通url数据下载

示例:

https://wework.qpic.cn/wwpic/306595_0iIcXxBHTkKvsxV_1610689000/0

https://allpro.saas.top/1610704815878.jpg

解决方案:

// 我们可以将下载地址借助Blob转换成二进制,然后,作为a标签的href属性,配合download属性,实现下载
const link = document.createElement('a');
const url =  imageUrl;  // 要下载的路径
// 这里是将url转成blob地址,
fetch(url).then(res => res.blob()).then(blob => {
// Blob {size: 746, type: "text/html"}
  link.href = URL.createObjectURL(blob);
  console.log(link.href);
  link.download = 'picName';
  document.body.appendChild(link);
  link.click();
})

2. base64格式数据下载

解决方案:

// 添加base64前缀

const base64Url = 'data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFQ==';
const link = document.createElement('a');
link.href = base64Url;
link.download = 'picName';
link.click();

3. 当下载的图片含有动态数据时,需要我们使用canvas绘制并下载下来。

解决方案:使用vue-canvas-poster-yufan插件。

4.当需要批量下载图片时,可以采用下载压缩包的方式。

解决方案:将图片数据处理成arraybuffer类型或bold类型,使用jszip下载。


程序员灯塔
转载请注明原文链接:图片下载
喜欢 (0)