使 HTML5 FileReader 处理 heic 文件答案

【问题标题】：Make HTML5 FileReader working with heic files使 HTML5 FileReader 处理 heic 文件
【发布时间】：2019-07-20 18:08:15
【问题描述】：

当通过 FileReader api 从输入元素读取文件时，它可以工作，但我的 android 设备也允许发送文件，而且它似乎无论如何都会发送 heic 文件，这会导致控制台中没有任何错误的空图像。直接从相机获取图像时，方向也是错误的。我刚刚发现要实现的重型库，我正在寻找更智能的解决方案。

JavaScript

function previewFile( e ) {
    var preview = document.getElementById('usersProfilePicture');
    var file    = e.files[0];
    var reader  = new FileReader();

    reader.onloadend = function () {
        preview.src = reader.result;
    }
    if (file) {
        reader.readAsDataURL(file);
    } else {
        preview.src = "";
    }
}

HTML5

<form>
    <label>
        <input id="uploadProfilePicture" name=file type=file accept="image/jpg, image/jpeg, image/png, image/gif, image/bmp">
    </label>
</form>

根本没有错误消息。无论我设置什么接受属性，桌面和安卓上的 Firefox、Chrome 都允许 .heic 文件。

最坏的解决方案：拒绝接受 .heic 文件最佳解决方案：让 fileReader 使用 .heic 文件。在解决方案之间：检测 heic 并将其转换为 jpeg，客户端。

【问题讨论】：

我发现当前稳定的 android chrome 应用程序允许选择不可见的 .heic 文件并且不尊重接受属性，但是新的金丝雀版本隐藏了 .heic 文件。因此，这将在将来自动修复。但是heic越来越受欢迎，我必须支持这一点。所以我仍然需要一个适当的解决方案。
碰到这个问题，我也需要解决 heic 问题。

标签： javascript html image filereader heic

【解决方案1】：

我现在使用库 heic2any 解决了这个问题

(https://github.com/alexcorvi/heic2any)

检查输入的文件是否为 .heic，然后像这样使用库：

heic2any({
        // required: the HEIF blob file
        blob: file,
        // (optional) MIME type of the target file
        // it can be "image/jpeg", "image/png" or "image/gif"
        // defaults to "image/png"
        toType: "image/jpeg",
        // conversion quality
        // a number ranging from 0 to 1
        quality: 0.5
    })

我将这个调用包装在一个 Promise 中，然后将结果传递给文件阅读器：

// uploadHEIC is a wrapper for heic2any
uploadHEIC(heicFile).then(function (heicToJpgResult) {
    var reader = new Filereader();
    reader.onload = function () {
    // Do what you want to file
    }
    reader.readAsArrayBuffer(heicToJpgResult);
}

【讨论】：

【解决方案2】：

上面的答案很好地解释了这一点，但对于任何寻找另一个示例的人，我稍微修改了 Heic2Any (https://alexcorvi.github.io/heic2any/) 中的示例

<input type="file" id="heic" onchange="convertHEIC(event)">

async function convertHEIC (event){
    let output = document.getElementById('output');

    //if HEIC file
    if(event.target.files[0] && event.target.files[0].name.includes(".HEIC")){
        // get image as blob url
        let blobURL = URL.createObjectURL(event.target.files[0]);
        
        // convert "fetch" the new blob url
        let blobRes = await fetch(blobURL)

        // convert response to blob
        let blob = await blobRes.blob()

        // convert to PNG - response is blob
        let conversionResult = await heic2any({ blob })

        // convert to blob url
        var url = URL.createObjectURL(conversionResult);
        document.getElementById("target").innerHTML = `<a target="_blank" href="${url}"><img src="${url}"></a>`;
    
    }       
};

【讨论】：