vue 项目 下载图片zip功能

下载多张图片压缩包

实现功能：

1. vue 项目执行 npm install jszip 和 npm install file-saver
2. 页面引用 import JSZip from "jszip" 和 import FileSaver from "file-saver";
3. 代码如下：

export default {
	  	name: 'writing',
	  	data() {
			return {
			    dataList:[],                    //这个是通过接口获取到的列表数据，里面的image字段是要求打包下载的图片
			    workArr:[],						//图片列表
		    	imgBaseArr:[],					//要下载的图片base64数组
			}
		},
		methods:{
		    //获取到base64的数组（此函数最好在加载完数据列表获取到statusList时就执行）
		    getBaseImg64List() {
		        for(var i=0;i<this.statusList.length;i++){
					if(this.statusList[i].image){
						this.getBase64(this.statusList[i].image).then(function(base64){
							this.imgBaseArr.push(base64)        //为什么需要一个数组来存base64，因为把网络图片转成base64的函数不是一个实时函数
			            });
					}
				}
		    }，
		    //图片地址转成base64
			getBase64(img) {
		        function 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;
		        }
		        var image = new Image();
		        image.crossOrigin = 'Anonymous';
		        image.src = img;
		        var deferred=$.Deferred();
		        if(img){
		          image.onload =function (){
		            deferred.resolve(getBase64Image(image));
		          }
		          return deferred.promise();
		        }
		   	},
			//下载图片压缩包
			StoreDowQrcode(arr, blogTitle) {
			  var zip = new JSZip();
			  var imgs = zip.folder(blogTitle);
			  var baseList = [];
			  var _this = this;
			  for (var i = 0; i < arr.length; i++) {
			    let name = arr[i].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(); // 得到图片的base64编码数据 let url =
			      canvas.toDataURL("image/png");
			      baseList.push({ name: name, img: url.substring(22) });
			      if (baseList.length === arr.length) {
			        if (baseList.length > 0) {
			          for (let k = 0; k < baseList.length; k++) {
			            imgs.file(baseList[k].name + ".png", baseList[k].img, {
			              base64: true
			            });
			          }
			          zip.generateAsync({ type: "blob" }).then(function(content) {
			            // see FileSaver.js
			            FileSaver.saveAs(content, blogTitle + ".zip");
			          });
			        } else {
			          _this.$notify.error({
			            title: "错误",
			            message: "暂无图片可下载"
			          });
			        }
			      }
			    };
			    image.src = arr[i].baseImg = arr[i].baseImg;
			  }
			},
			//点击确定按钮下载图片压缩包
			downLoadImgZip() {
				this.workArr = []
				for(var i=0;i<this.statusList.length;i++){
					if(this.statusList[i].image){
						this.workArr.push({name:'解压后每张图片的名字，我是用的id',src:'',baseImg:this.imgBaseArr[i]})
					}
				}
				this.StoreDowQrcode(this.workArr,'压缩包的名字')
			}
		}

功能完成