前端------多圖片打包（.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');}

總結

以上是生活随笔為你收集整理的多图片打包（.zip格式）下载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。