6

当通过 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，客户端。

4

2 回答 2

4

通过使用库 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
    })

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

// 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);
}
于 2020-01-15T14:43:30.120 回答
3

上面的答案很好地解释了这一点，但对于任何寻找另一个例子的人，我稍微修改了 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>`;
    
    }       
};
于 2021-07-02T09:08:49.347 回答