heic2any使用方式
时间: 2023-07-11 15:20:35 浏览: 91
使用heic2any库将HEIC格式图片转换为其他格式(比如JPEG或PNG),并在网页中进行显示的具体步骤如下:
1. 在网页中引入heic2any库,可以通过以下方式引入:
```
<script src="https://cdn.jsdelivr.net/npm/heic2any/dist/heic2any.js"></script>
```
2. 添加一个input标签,用于上传HEIC格式的图片文件:
```
<input type="file" accept="image/*" id="input-file" onchange="convertToImage(this.files)">
```
其中,accept属性用于限制上传文件的类型,这里设置为image/*,表示只能上传图片文件。
3. 添加一个img标签,用于显示转换后的图片:
```
<img id="output-image" src="#" alt="Output Image">
```
其中,id属性用于给img标签指定一个唯一的标识符,src属性用于指定图片的URL或者base64编码,这里设置为#,表示暂时不指定图片。
4. 添加JavaScript代码,用于将上传的HEIC格式图片转换为其他格式,并在img标签中显示转换后的图片:
```
function convertToImage(files) {
heic2any({
blob: files[0], // 上传的HEIC格式图片文件
toType: "image/jpeg", // 转换为JPEG格式
quality: 0.8 // 图片质量设置为0.8
}).then(function (resultBlob) {
// 转换成功后将图片显示在img标签中
var reader = new FileReader();
reader.readAsDataURL(resultBlob);
reader.onloadend = function () {
var base64data = reader.result;
document.getElementById("output-image").src = base64data;
}
});
}
```
在这段代码中,heic2any函数用于将上传的HEIC格式图片文件转换为指定格式,并设置图片质量。转换成功后,使用FileReader对象将转换后的图片转换为base64编码,然后将base64编码赋值给img标签的src属性,以实现图片的显示。
需要注意的是,使用heic2any库进行图片格式转换需要浏览器支持WebAssembly技术,因此在一些旧版本的浏览器中可能无法正常工作。