使HTML5 FileReader处理heic文件

Question

当通过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，无论我设置了什么接受属性，桌面和Android上的Chrome都允许.heic文件。

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

Answer 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);
}