heic格式的图片h5显示

heic是啥

HEIC是iOS 11更新后，iPhone 7及其后硬件，在拍摄照片时的默认图像存储格式。与JPG相比，它占用的空间更小，画质更加无损。window10已经支持HEIC格式的图片查看。但是H5显示HEIC格式的图片目前Chrome等浏览器还不支持自动解析，并且http协议中Content-Type默认还没有image/heic这个属性。
那么网页如何展示用户上传的HEIC格式的图片哩。可以两种方式处理，js解码或者把用户上传HEIC格式的图片在服务端转换成png或者jpg格式的图片，并保存，用于在网页中展示。

js解码HEIC格式图片，并展示

首先在github下载需要的js文件。

把以上js文件下载，添加到项目中

然后在所需要图片的页面通过img标签引入就行了。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>hello world!</title><script src="./js/heif-api.js"></script><script src="./js/heif-extension.js"></script><script src="./js/image-provider.js"></script><script src="./js/hevc-decoder.js"></script><script src="./js/jquery.min.js"></script><script src="./js/libde265-selector.js"></script><script src="./js/libde265.min.js"></script></head><body><div style="width:100%;"><div style="display:inline-block;"><img src="./img/compare.heic" style="display:inline-block;vertical-align:baseline;max-width:900;width:50%;" /></div><div style="display:inline-block;"><img src="./img/Flower.heic" style="display:inline-block;vertical-align:baseline;max-width:900;width:50%;" /></div></div></body><script type="application/javascript"></script>
</html>

访问页面，查看结果。如果图片过大，耐心等待就可以了

如何实现的

在heif-exension.js中末尾，有这段代码。dom加载完成会执行这段代码。

java实现 heic 和jpg png 格式的转换

请看我另一篇博客

heic格式的图片h5显示相关推荐

解决Typora导出文件为其他格式时图片无法显示或者发给别人
解决Typora导出文件为其他格式时图片无法显示或者发给别人平时用typora记笔记比较多,有很多截图便于理解,但是发现笔记发给别人的时候或者上传文件,图片总是消失,拖了好久终于把这个问题解决了先 ...
heic格式的图片怎么转换为jpg格式？
heic格式的图片怎么转换为jpg格式?我们都知道手机有两种系统,一种是安卓系统,一种是苹果系统,这两种不同系统上的图片格式也是不一样的.安卓系统常用的格式是jpg,而苹果系统的图片也有着自己的专属格 ...
怎么将heic格式的图片转换成jpg格式呢?
图像格式有很多种,如jpg.png.bmp.gif等.其中Heic是苹果开发的图片格式,主要用在苹果手机上.只要是拍出来的照片是heic格式的,但是目前在windows电脑上heic格式的图片不兼容, ...
论文排版——写毕业论文时图片格式问题,图片只显示一小部分,其他部分被上方文字覆盖
写毕业论文时图片格式问题写毕业论文时图片格式问题,图片只显示一小部分,其他部分被上放文字覆盖,如图所示: 这种情况出现的原因是论文内容部分一般要求的格式是宋体小四首行缩进行距固定值20磅,问题就在这 ...
heic格式的图片怎么打开?
heic格式的图片怎么打开?前几天公司同部门的小伙伴问我一个问题,heic格式的图片怎么在电脑上打不开呢,怎么办?他还以为是图片损坏了.相信也有不少小伙伴有过同样的问题,问题的原因是heic图片本身就 ...
iOS系统上HEIC格式的图片如何转换成JPG格式的
iOS系统上HEIC格式的图片如何转换成JPG格式的?想必很多人都有这个烦恼吧.那么怎么进行转换呢? iOS11和以后的系统为了更好地保护苹果用户的隐私,于是就将手机用户拍摄下来的图片,保存为IOS系 ...
Visio图片转Eps格式（图片最大化显示）
背景写论文的时候,特别是写英文的论文,恭喜你接触了Latex,那必然无法避免使用Gnuplot画图,那么Eps就是Latex图片的格式. 但是我们习惯用Visio软件画图,那么就从Visio转成Ep ...
Windows 10免费原生打开HEIC格式的图片（无需转换，直接用照片打开）
安装HEIF扩展在微软应用商店搜索HEIF,第一个就是这个扩展. 安装HEVC解码器在微软应用商店搜索HEVC,第一个结果就是HEVC视频扩展,但是这个要付费,后面有免费的办法. 这个里面才是图片 ...
请问asp.net网页里能显示tiff格式的图片吗？
我做的存取图片的程序,其它格式的图片都可以显示,可tiff格式的图片总是显示乱码,哪位高手给指点指点是怎么回事?谢谢! 转载于:https://www.cnblogs.com/support/arch ...