【组件】前端js HEIC/HEIF 转换为JPEG、PNG或GIF格式苹果格式

我是Superman丶

已于 2024-10-23 13:56:49 修改

阅读量1.1k

点赞数 2

分类专栏：前端技术前端组件文章标签：前端 javascript 开发语言

于 2024-09-14 15:49:26 首次发布

本文链接：https://blog.csdn.net/G971005287W/article/details/142260298

版权

前端技术同时被 2 个专栏收录

94 篇文章

订阅专栏

前端组件

14 篇文章

订阅专栏

【组件】前端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.

引入的js可以从这里下载到本地

https://download.csdn.net/download/G971005287W/89916148

代码直接保存成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>