【组件】前端js HEIC/HEIF 转换为JPEG、PNG或GIF格式 苹果格式
【组件】前端js HEIC/HEIF 转换为JPEG、PNG或GIF格式
Heic2any: Client-side conversion of HEIC/HEIF image files to JPEG,PNG, or GIF in the browser.
https://alexcorvi.github.io/heic2any/#demo
GitHub - alexcorvi/heic2any: Converting HEIF/HEIF image formats to PNG/GIF/JPEG in the browser
Demo
Heic2any: Client-side conversion of HEIC/HEIF image files to JPEG,PNG, or GIF in the browser.
代码 直接保存成html 本地运行即可看到效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HEIC to PNG Conversion</title><script src="https://cdn.jsdelivr.net/npm/heic2any"></script>
</head>
<body><h2>Upload HEIC Image and Convert to PNG</h2><input type="file" id="heicInput" accept="image/heic" /><br><br><div id="previewContainer"><h3>Converted Image Preview:</h3><img id="preview" style="max-width: 100%; height: auto;" /></div><script>document.getElementById('heicInput').addEventListener('change', function (event) {const file = event.target.files[0];if (!file) return;// 使用 FileReader 读取 HEIC 文件const reader = new FileReader();reader.onload = function (e) {const heicBlob = e.target.result;// 使用 heic2any 将 HEIC 转换为 PNGheic2any({blob: new Blob([heicBlob], { type: 'image/heic' }),toType: "image/png"}).then(function (resultBlob) {// 生成图片的 URL 并展示预览const previewImg = document.getElementById('preview');const url = URL.createObjectURL(resultBlob);previewImg.src = url;}).catch(function (error) {console.error("Error converting HEIC to PNG:", error);});};// 以二进制格式读取 HEIC 文件reader.readAsArrayBuffer(file);});</script>
</body>
</html>