【组件】前端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 转换为 PNG
heic2any({
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>
