js实现heic转换jpg格式

背景

最近在项目中遇到（heic）图片格式转换问题；修改后缀也是无动于衷，页面依然是404；进过多方查阅汇总终于找到解决的办法了，但是还是存在缺陷，图片转换完毕返回过程是很漫长的过程，时间大概在（1分钟以内）！换望各路高手指点一二，愿闻其详；

解决方法

通过 heic2any 将图片转换为 jpg 来展示。

查看heic2any的类型：

declare function heic2any({ blob, toType, quality, gifInterval, multiple, }: {
    blob: Blob;
    multiple?: true;
    toType?: string;
    quality?: number;
    gifInterval?: number;
}): Promise<Blob | Blob[]>;

代码中接收图片的blob属性，需要转换为一个blob对象， 所以我们需要解决这样几个问题：

1. 将图片URL转换为blob对象
2. 将转换后的blob转换成 img 支持的格式。

图片转blob对象（注意： https的网站访问http的资源会报错）

const url = URL.createObjectURL(blob);

将得到blob对象转换成 img支持的格式

使用window.URL.createObjectURL 将blob转换为DataURL, 然后将这个url设置给img标签的src属性即可。

const url = URL.createObjectURL(blob);

完整代码

import heic2any from 'heic2any';

export function loadHEIC(url) {
  return new Promise((resolve, reject) => {
    fetch(url, { mode: 'cors' })
    .then(function (i) {
        return i.blob();
      })
      .then(function (i) {
        return heic2any({ blob: i, toType: 'image/jpg' });
      })
      .then(function (i) {
        const _url = URL.createObjectURL(i);
        resolve(_url);
      })
      .catch(function (e) {
        reject(e);
      });
  });
}