角度9：上传图像时如何将HEIF文件格式转换为已知的Web格式

问题描述

我正在维护一个用Angular 9编写的Webapp（PWA），用户可以在cropperjs中上传图像并进行裁剪，旋转等操作。

在iOS上，新的图像格式（HEIF）成为标准，这些用户抱怨他们无法上传照片。似乎有时候iOS会自动转换为jpg，有时却不会。因此，我们需要能够接收HEIF格式的图像。

我尝试将模仿类型image / heif添加到accept属性中，但是* .heic图像在iOS上仍然变暗。我似乎很多人只是选择接受所有文件，但这不是此Web应用程序的选择。

croppperjs还不支持HEIF图像格式，那么我们如何转换为已知的Web格式？

解决方法

我们的解决方案是安装heic2any：

npm install heic2any

然后将其导入到需要它的组件中：

import heic2any from "heic2any";

在accept属性中，添加mimetype和文件扩展名。

image/jpeg,image/png,image/heif,.heic,.heif

如果您需要支持上传任何类型的图像：

image/*,.heif

我们正在使用ngfSelect，它看起来像这样（简化）：

<div ngfSelect
  [accept]  = "'image/*,.heif'"
  (filesChange) = "imageSelected($event)">

下面是imageSelected（）函数的简化版本

public imageSelected(event) {
  let f:File;

  //RECEIVE IMAGE

  if (event[0] && (event[0]['lastModified'] || event[0]['lastModifiedDate'])) {
    f = event[0];
    if (event.length > 1) {
      event.splice(0,event.length-1);
      f = event[0];
    }
  } else if (event.target && event.target.files && event.target.files[0]) {
    f = event.target.files[0];
  }

  if (!f) {
    //Handle error and exit
  }

  let blob:Blob = f;
  let file:File = f;

  let convProm:Promise<any>;
  
  //CONVERT HEIC TO JPG

  if (/image\/hei(c|f)/.test(f.type)) {
    convProm = heic2any({blob,toType:"image/jpeg",quality:0}).then((jpgBlob:Blob) => {

      //Change the name of the file according to the new format
      let newName = f.name.replace(/\.[^/.]+$/,".jpg");

      //Convert blob back to file
      file = this.blobToFile(jpgBlob,newName);

    }).catch(err => {
      //Handle error
    });
  } else {
    //This is not a HEIC image so we can just resolve
    convProm = Promise.resolve(true);
  }

  //ADD IMAGE FILE TO CROPPERJS EDITOR

  convProm.then(() => {
    
    let reader = new FileReader();
    let _thisComp = this;

    //Add file to FileReader
    if (file) {
      reader.readAsDataURL(file);
    }
    //Listen for FileReader to get ready
    reader.onload = function () {
      
      //Set imageUrl. This will trigger initialization of cropper via imageLoaded() 
      //as configured in the html img tag:
      //<img #image id="image" [src]="imageUrl" (load)="imageLoaded($event)" class="cropper"> 

      _thisComp.imageUrl = reader.result;
    }
  });
}


private blobToFile = (theBlob: Blob,fileName:string): File => {
  let b: any = theBlob;

  //A Blob() is almost a File() - it's just missing the two properties below which we will add
  b.lastModified = new Date();
  b.name = fileName;

  //Cast to a File() type
  return <File>theBlob;
}

以上可能不是最漂亮的解决方案，但我希望它可以对面临相同挑战的其他人有所帮助和启发。

heic2any 只在客户端工作；这意味着如果你使用 heic2any;您可能会破坏角度构建 - 预渲染，并且您将面临刷新路由问题。

angular cropperjs heic