当前位置: 首页 > news >正文

VUE批量下载图片打包成zip下载

 import JSZip from 'jszip';
import { saveAs } from 'file-saver';
downloadImages() {var zip = new JSZip();// 创建images文件夹//imageUrls=['本地路径','或者网络路径'];var imgFolder = zip.folder("images");let flag = 0 //  判断加载了几张图片的标识for (let i = 0; i < imageUrls.length; i++) {//遍历图片  imageUrlsthis.getBase64(imageUrls[i]).then(base64 => {  //调用getBase64()方法,传入图片网络地址得到base64数据base64 = base64.split('base64,')[1]imgFolder.file(`image${i}.png`, base64, { base64: true })//自定义图片名字,存进images文件夹里面if (flag === this.imageUrls.length - 1) {zip.generateAsync({ type: "blob" }).then((blob) => {saveAs(blob, "xxxxxx.zip")//自定义文件压缩包名字})}flag++});}
},//传入图片地址,返回base64格式数据
getBase64(img) {var image = new Image();image.crossOrigin = '*';//解决图片跨域问题  //解决不了image.src = img;return new Promise((resolve, reject) => {image.onload = () => {resolve(this.getBase64Image(image));}})
},//创建画布,将图片渲染到画布上,再将画布转为base64格式数据返回出来
getBase64Image(img, width, height) {var canvas = document.createElement("canvas");canvas.width = width ? width : img.width;canvas.height = height ? height : img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, canvas.width, canvas.height);var dataURL = canvas.toDataURL();return dataURL;
},
http://www.lryc.cn/news/216309.html

相关文章:

  • 微信小程序-form表单-获取用户输入文本框的值
  • Docker(1)
  • axios 实现请求重试
  • SSE加速随笔
  • 【TES720D】青翼科技基于复旦微的FMQL20S400全国产化ARM核心模
  • arcgis删除细长图斑的方法
  • Flutter笔记:Flutter的WidgetsBinding.instance的window属性
  • element UI DatePicker 日期选择器 点击时间点可选限制范围前后十五天
  • 【自用】vmware workstation建立主机window与虚拟机ubuntu之间的共享文件夹
  • 【2023年MathorCup高校数学建模挑战赛-大数据竞赛】赛道A:基于计算机视觉的坑洼道路检测和识别 python 代码解析
  • Mozilla Firefox 119 现已可供下载
  • What is 哈希?
  • 在Photoshop中如何校正倾斜的图片
  • Maven第六章:Maven的自定义插件开发
  • springboot 注入配置文件中的集合 List
  • springboot整合redis+lua实现getdel操作保证原子性
  • win10系统nodejs的安装npm教程
  • C语言assert函数:什么是“assert”函数
  • R语言绘图-5-条形图(修改坐标轴以及图例等)
  • uniapp自定义权限菜单,动态tabbar
  • ubuntu20.04配置解压版mysql5.7
  • 【js】vue获取document.getElementById(a)为null
  • 系列六、Mybatis的一级缓存
  • 用中文编程工具给澳大利亚客户定制开发的英文版服装进销存软件应用实例
  • geoserver 的跨域问题怎么解决
  • SQL语法实践(一)
  • 路由器如何设置IP地址
  • 自动驾驶算法(一):Dijkstra算法讲解与代码实现
  • MS5910PA为行业内领先的可配置10bit到16bit分辨率的旋变数字转换器,可替代AD2S1210
  • Random指定随机种子遇到的坑