vue批量打包下载图片

主要用到 jszip 和 file-saver

下载包!

npm install jszip --save
npm install file-saver --save

js部分`

methods: {//downImg是点击事件!downImg() {var blogTitle = '打包图片';var zip = new JSZip();var imgs = zip.folder(blogTitle);var baseList = [];// 要下载图片的urlvar arr = ['./img1.png', './img2.png', './img3.png'];//这里数组内的图片,可以换成自己的图片url地址!// 下载后图片的文件名，个数应与arr对应var imgNameList = ['图片1', '图片2', '图片3'];//这里的数组内的图片名字,可以换成自己对应的!如果是后端返回的,那么//就可以从后端返回的数据里面取到图片名字,push到数组内!for (var i = 0; i < arr.length; i++) {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(); // 得到图片的base64编码数据canvas.toDataURL('image/png');baseList.push(url.substring(22));    // 去掉base64编码前的 data:image/png;base64,if (baseList.length === arr.length && baseList.length > 0) {for (let k = 0; k < baseList.length; k++) {imgs.file(imgNameList[k] + '.png', baseList[k], {base64: true})}zip.generateAsync({type: 'blob'}).then(function (content) {// see FileSaver.jsFileSaver.saveAs(content, blogTitle + '.zip');});}};image.src = arr[i];}}
}
//最后温馨提示,如果图片划分了类型,每个类型都要执行不同操作的话,记得把push进去的图片清空!

vue批量打包下载图片相关推荐

【jQuery】jQuery与vue实现点击下载图片以及js实现批量打包下载图片
原理:用canvas的toDataUrl() API获取到图片的base64编码,再利用触发a标签事件进行下载.(单张图片下载) 多张图片批量下载导出压缩包需要引入jsZip jQuery实现点击下载 ...
根据URL下载单个图片与批量打包下载图片（文件同理）
根据url下载图片看起来很简单,做起来还是有点曲折的首先,直接file_put_content()的话可以下载图片但不知道图片保存在什么位置,所以必须要调用浏览器下载,使用header头. func ...
实战：JS批量打包下载图片--(zip压缩)
1.下载两个插件 npm i -s jszip file-saver 2.封装函数如下: // 在JS文件中引入这两个插件 import JSZip from 'jszip' import FileS ...
前端批量打包下载图片
1.批量下载图片(jquery) <!DOCTYPE html> <html><head><meta charset="utf-8" / ...
js批量打包下载图片
html文件内容 <!DOCTYPE html> <html lang="en"><head> </hea ...
JSZip + FileSaver 实现Vue打包下载图片
1. 版本 "file-saver": "^2.0.5", "jszip": "^3.6.0" 2. 实现 import ...
阿里云OSS文件批量打包下载
阿里云OSS文件批量打包下载 public void downloadReport(List<String> fileNames,HttpServletResponse response) ...
JAVA实现文件批量打包下载
JAVA实现文件批量打包下载实现 1.打包工具类的实现 /*** @author zhouxuan* @since 2019/4/19*/ public class ZipUtils {/*** @ ...
PHP使用ZipArchive对文件进行批量打包下载
PHP使用ZipArchive对文件进行批量打包下载话不多说直接上图 DEMO 代码示例 <?php$file = $_GET['file'];//文件判断,无文件阻止if(!$file){e ...
打包下载图片（文件）
1. 打包下载图片(文件) ·ReportFile 实体类随便你自己怎么写了 ·reportFile.getFilePath() 文件存放路径 /*** @param id*/ @ResponseB ...

vue批量打包下载图片

vue批量打包下载图片相关推荐

最新文章

热门文章