HTML5 无法在 firefox 中加载图像 android 对于大小大于 1MB 的图像

Question

我正在基于此 https://demos.phplift.net/javascript-image-compress-using-html5-canvas-file-api/ 创建图像预览和上传页面。它在所有网络浏览器中工作正常，在 android firefox（版本 88.1.4）中它不适用于大小大于 1MB 的图像，在 android chrome 浏览器中没有问题。当我检查图像加载时（在代码中它是 i.onload()）函数不会触发 firefox

中的大图像

html

    <form id="upload_form">
            <label for="file">Choose file</label>
            <input type="file" id="fileinput" />
            
        </form>

javascript函数是

<script>
    var output_format = null;
    var file_name = null;
    function readFile(evt) {
        var file = evt.target.files[0];
        var reader = new FileReader();
        reader.onload = function(event) {
            var i = document.getElementById("source_image");
            console.log(i);
                i.src = event.target.result;
                i.onload = function(){
                    
                    console.log("Image loaded");
                }
        };
        output_format = file.name.split(".").pop();
        file_name = file.name;
        console.log("Filename:" + file.name);
        console.log("Fileformat:" + output_format);
        console.log("Filesize:" + (parseInt(file.size) / 1024) + " Kb");
        console.log("Type:" + file.type);
        reader.readAsDataURL(file);

        return false;
    }
document.getElementById("fileinput").addEventListener("change", readFile, false);
</script>

有谁知道为什么大于 1 MB 的图像在 firefox 中不触发图像加载？

Answer 1

不要使用 FileReader... 认为这可行：

i.src = URL.createObjectURL(file)

HTML5 无法在 firefox 中加载图像 android 对于大小大于 1MB 的图像

HTML5 Image load not working in firefox android for images with size greater than 1MB

javascript

html5-canvas