前端单张图片下载，批量下载图片成压缩包

各位铁子们，博主最近手撕了一个图片管理模块，效果如下图所示，其中有个下载图片的功能，包含了单张图片下载，以及多张图片批量下载成压缩包，认为很有意思，分享给你们

首先我们需要引入对应的安装包如下

  import axios from 'axios'import FileSaver from 'file-saver'import JSZip from 'jszip'

下载功能主要代码如下

//批量图片下载
//this.currentChooseImgList参数是当前选中图片的数组，包含了pictureUrl，pictureName 等
//我们根据选中图片的数组长度为1进行单张图片下载，大于1进行批量操作，数量为0则提示勾选download() {if (this.currentChooseImgList.length === 0) {this.$message.warning('请先右键勾选下载数据!')return}//多张图片下载成压缩包if (this.currentChooseImgList.length > 1) {this.exportLoading = trueconst zip = new JSZip()const _this = thisconst promises = []const cache = {}console.log('111')for (const item of this.currentChooseImgList) {const promise = _this.getFile(item.pictureUrl).then((data) => {// 下载文件, 并存成ArrayBuffer对象// const file_name = item.realName // 获取文件名zip.file(item.pictureName + '.png', data, { binary: true }) // 逐个添加文件，需要加后缀".png"cache[item.pictureName] = data})promises.push(promise)}Promise.all(promises).then(() => {zip.generateAsync({ type: 'blob' }).then((content) => {// 生成二进制流FileSaver.saveAs(content, '图片') // 利用file-saver保存文件  自定义文件名_this.$message.success('图片下载完成')})_this.exportLoading = false}).catch((res) => {_this.$message.warning('文件下载失败!')_this.exportLoading = false})} else {//单张图片下载this.downloadIamge(this.rightList[this.currentIndex].pictureUrl,this.rightList[this.currentIndex].pictureName)}},//批量getFile(url) {return new Promise((resolve, reject) => {axios({method: 'get',url,responseType: 'blob',}).then((response) => {resolve(response.data)}).catch((error) => {reject(error.toString())})})},//单张图片下载downloadIamge(imgsrc, name) {//下载图片地址和图片名var image = new Image()// 解决跨域 Canvas 污染问题image.setAttribute('crossOrigin', 'anonymous')image.onload = function () {var canvas = document.createElement('canvas')canvas.width = image.widthcanvas.height = image.heightvar 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},

效果如图所示

认为对铁子们有帮助的，请关注三联，谢谢啦

前端单张图片下载，批量下载图片成压缩包相关推荐

图片的批量下载和爬虫爬取图片数据集
图片的批量下载和爬虫爬取图片数据集 1.图片的批量下载 1.图片的批量下载数据集是深度学习的一切,没有数据集它什么也不是,现在你知道数据集很重要了吧代码: ''' 项目名称:爬取公章数据创建 ...
图片批量下载软件-全网图片免费批量下载软件
图片批量下载软件,今天给大家分享一款免费图片批量下载软件,支持任意格式的图片批量下载,只需要输入关键词或批量导入网页链接即可下载图片.批量下载任意网页上的图片,每个人都可以拥有各种高清图源.支持批量图 ...
下载网页图片-如何批量下载网页图片-批量图片下载工具免费
下载网页图片,今天给大家分享一款免费批量下载网页图片软件,支持任意格式的图片批量下载,只需要输入关键词或批量导入网页链接即可下载图片.批量下载任意网页上的图片,每个人都可以拥有各种高清图源.支持批量图 ...
img绝对路径图片显示_使用python爬虫去风景图片网站批量下载图片
使用python爬虫(requests,BeautifulSoup)去风景图片网站批量下载图片 1.写代码背景: 今天闲来无事,想弄点图片放到电脑,方便以后使用,故去百度查找一些风景图片网站,发现图片 ...
twitter图片视频批量下载
twitter图片视频批量下载学python之前试用过一个twitter批量下载图片的软件,甚至没有视频下载,官方收费还是蛮贵的,学了python之后尝试着自己写了一个,把代码发布出来,和大家交流一 ...
python 批量下载网页图片_手把手教你爬取天堂网1920*1080大图片（批量下载）——实战篇|python基础教程|python入门|python教程...
https://www.xin3721.com/eschool/pythonxin3721/ /1 前言/ 上篇文章手把手教你爬取天堂网1920*1080大图片(批量下载)--理论篇我们谈及了天堂网 ...
前端HTML页面实现批量下载
前端HTML页面实现批量下载一.前言前端HTML实现下载功能可在JavaScript 代码中写window.location.href ="链接地址",但是如果想同时打开多个链 ...
pc端js根据图片url进行下载单张图片以及批量下载到本地
1.单张下载单张下载到本地主要实现方式是 1.使用cavans把图片转化未base64格式 2.创建a标签然后创建一个点击事件进行下载到本地主要代码如下 loadCode(imgsrc, name ...
一键获取网页中的全部图片并批量下载（国内淘宝天猫京东网站+国外商品页面）——亲测有效
上周六的时候,有个朋友找到我,需要将网页中的图片全部下载下来,而且还不能改变图片的大小: 作为一个前端,经常跟html打交道,我深知页面中肯定是有图片链接的网页中下载少量图片的方法举例说明网页中图 ...
批量下载图片-免费批量下载图片软件
总有一些图片你想保存小周浏览了某个网页发现上面的有很多很漂亮的图片,于是想保存下来,开始一波疯狂操作:右键-->图片另存为....保存了50张图片后,手酸得不行了.使用这款图片批量下载软件不到 ...

前端单张图片下载，批量下载图片成压缩包

前端单张图片下载，批量下载图片成压缩包相关推荐

最新文章

热门文章