前端------多图片打包(.zip格式)下载,只支持png格式图片。
console.log(this.dataForm.name,'dataForm.name');var blogTitle = this.dataForm.name //下载后的压缩包文件名称。var zip = new JSZip()var imgs = zip.folder(blogTitle)var baseList = []let fileList = this.dataForm.fileListfor (var i = 0; i < fileList.length; i++) {let image = new Image()// 解决跨域 Canvas 污染问题image.setAttribute('crossOrigin', 'anonymous')// image.crossOrigin = 'anonymous'image.onload = function () {let canvas = document.createElement('canvas')canvas.width = image.widthcanvas.height = image.heightlet context = canvas.getContext('2d')context.drawImage(image, 0, 0, image.width, image.height)let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据console.log(url,'12345678');canvas.toDataURL()baseList.push(url.substring(22)) // 去掉base64编码前的 data:image/png;base64,console.log(baseList,'baseList');if (baseList.length === fileList.length && baseList.length > 0) {for (let k = 0; k < baseList.length; k++) {imgs.file('img' + k + '.png', baseList[k], { base64: true })}zip.generateAsync({ type: 'blob' }).then(function (content) {// see FileSaver.jsFileSaver.saveAs(content, blogTitle + '.zip')})}}image.src = fileList[i].urlconsole.log(image.src,'image.src');}