heic格式转码

在ios13系统及以上的苹果机,系统这有这样一种格式的图片,就是heic;这是一种比jpeg压缩效率更高的格式;但是,这种格式目前在前端的开发中,我并没有发现可以用于展示的标签及其他方法;只能通过转码这种方式,对图片格式进行转码,已达到兼容的效果;

转码方式有:

一、后台的方式:

连接:https://github.com/nokiatech/heif;

这是诺基亚提供的开源及免费的代码;有需要可以参考;作为前端孩子,就不再研究了;

二、前端方式:

1.nokia转码方式也提供了javaScript的方式,heic2any这个插件就是继续nokia实现的;使用heic2any这个插件进行转码,heic2any这个插件可以对heif的图片转换成多种格式,入jpeg、gif、png,亲测在安卓端效率还是挺快的,但是在ios端尽心转码的话,一个1.5m左右的图片,花费了2分多种的时间,甚至更长,对于性能有要求的,建议还是通过后台进行转化

;已vue项目为例,展示使用方式:

首先是安装

npm install heic2any

其次在使用的页面进行引入,便可以使用了;具体代码如下:

import heic2any from 'heic2any'


heic2any({
   blob,  // 将heic转换成一个buffer数组的图片
   toType: 'image/jpg', //要转化成具体的图片格式,可以是png/gif
   quality: 0.1   // 图片的质量,参数在0-1之间
      
}).then(result => {
   let file = new FileReader();
   file.onload = function(imageFile) {
        let imgBase64 = imgFile.target.result; 
   
    };
    file.readAsDataURL(result);
    
})

以上还可以同事转换多张图片,可以通过multiple这个参数设置;具体就不展示了,可以查看源码;

源码地址:https://github.com/alexcorvi/heic2any/blob/master/src/heic2any.ts

更多示例: https://github.com/alexcorvi/heic2any/blob/master/docs/getting-started.md

 

上一篇:前端导出文件流


下一篇:JakeCoffman/Cron定时任务库核心实现源码解析