代码之家  ›  专栏  ›  技术社区  ›  Sergio Mendez

Angular 4将base64图像数组下载为ZIP文件

  •  0
  • Sergio Mendez  · 技术社区  · 5 年前

    例如: 我有这样一个数组(例如假base64图像)

    data = [
      'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA ...',
      'data:image/png;base64, iVBTYu0KGgoBBBBNSUhYUgJJJJUA ...',
      'data:image/png;base64, CGBHHFGY0goAAAANSUhEUgAAAAUA ...',
      ...
    ]
    

    我需要一种方法来下载它转换成一个.jpg或.png图像的每个图像,然后编译所有的图像和下载为zip文件。像这样的东西(我不知道代码,我只需要这样的东西)

    downloadZip() {
      const arrayAsJPG = [];
      this.data.forEach(i => {
        const imageInJpg = i.convertToJPGfile(); // this is not code, this is a function that converts the base64 to a jpg file
        arrayAsJPG.push(imageInJpg);
      });
      ZipFileSaver.save(arrayAsJPG, 'myImageReport.zip'); // this isn't code neither, just and interpretation of what I need
    
    }
    

    0 回复  |  直到 5 年前
        1
  •  6
  •   Swoox    5 年前

    @加里解释得很好。 我在stackoverflow上找到了几个例子:

    Is it possible to generate zip file and download in Angular 4?

    Converting base64 to blob in javascript @types/jszip .

    我构建了一个示例,它执行以下操作:

    • 它从一个API(mock)获取您所描述的数组;
    • 它将数组中的每一项转换为一个blob;
    • 它将blob作为一个文件添加到zip文件中;
    • 最后创建zip文件;
    • 我只有png base64,所以把它改成jpg。

    https://stackblitz.com/edit/angular-jzqtrk?file=src%2Fapp%2Fapp.component.ts

        2
  •  3
  •   Gary    5 年前

    你有两个问题:

    将数据字符串转换为图像

    创建zip文件

    你应该使用NPM包。大多数面向节点。您可能有幸直接在浏览器中使用 JSZip