最近有一个需求是下载一个或多个影像图片并印章压缩zip包

 npm install JSZip

 npm install FileSave

 html创建canvas画布

 使用canvas画布处理目标图像和印章图像

 

 

async downloadZip() {
      let { img_list } = this
      let blogTitle = '文件' // 下载的文件夹名称
      let zip = new JSZip()
      let imgs = zip.folder(blogTitle)
      let baseList = []
      for (let i = 0; i < img_list.length; i++) {
        let name = img_list[i].name // 每张图片的名称
        const image = await this.getImageSize(img_list[i].baseImg); // 目标图片
        const stampSize = await this.getImageSize(require('@/assets/claim_stamp.png')); // 印章
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.drawImage(image.img, 0, 0);
         /**
         * @description 盖章的大小，这里取背景图片宽度的 1/4 ，然后宽高缩放
         */
        const quaterWidth = image.width / 4;
        const rate = quaterWidth / stampSize.width;
        const useHeight = rate * stampSize.height;
        const subW = (image.width - quaterWidth) * (0.5 || 0);
        const subH = (image.height - useHeight) * (0.5 || 0);

        ctx.drawImage(stampSize.img, image.width - quaterWidth - subW, image.height - useHeight - subH, quaterWidth, useHeight);
          let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据 let url =
          // // canvas.toDataURL('image/png')
          baseList.push({ name: name, img: url.substring(22) })
          if (baseList.length === img_list.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) {
                FileSaver.saveAs(content, blogTitle + '.zip')
              })
            }
          }
        // }
      }
    },

 async downloadZip() {
      let { img_list } = this
      let blogTitle = '文件' // 下载的文件夹名称
      let zip = new JSZip()
      let imgs = zip.folder(blogTitle)
      let baseList = []
      for (let i = 0; i < img_list.length; i++) {
        let name = img_list[i].name // 每张图片的名称
        const image = await this.getImageSize(img_list[i].baseImg); // 目标图片
        const stampSize = await this.getImageSize(require('@/assets/claim_stamp.png')); // 印章
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.drawImage(image.img, 0, 0);
         /**
         * @description 盖章的大小，这里取背景图片宽度的 1/4 ，然后宽高缩放
         */
        const quaterWidth = image.width / 4;
        const rate = quaterWidth / stampSize.width;
        const useHeight = rate * stampSize.height;
        const subW = (image.width - quaterWidth) * (0.5 || 0);
        const subH = (image.height - useHeight) * (0.5 || 0);

        ctx.drawImage(stampSize.img, image.width - quaterWidth - subW, image.height - useHeight - subH, quaterWidth, useHeight);
          let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据 let url =
          // // canvas.toDataURL('image/png')
          baseList.push({ name: name, img: url.substring(22) })
          if (baseList.length === img_list.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) {
                FileSaver.saveAs(content, blogTitle + '.zip')
              })
            }
          }
        // }
      }
    },