在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