javascript - 客户端画布调整大小 - 偶尔会导致画布为空

Question

我正在使用画布和 filereader api 执行客户端大小的图像调整大小，然后使用隐藏的表单值从画布获取结果 dataurl 上传到我的 .Net 后端。

感谢这个网站和我在这里找到的 megapix-image 库：[megapix library][1]

[1]：https ://github.com/stomita/ios-imagefile-megapixel我能够在大约 97% 的时间内执行客户端大小调整。

然而，在大约 3% 的情况下，该过程在代码中间失败，并且画布对象永远不会获得调整大小的图像。当我阅读空画布时，我得到了创建黑色图像的数据。我试图找到调整大小不起作用的一些原因。

代码在这里：

var fileInput = document.getElementById('fileInput');
        fileInput.onchange = function () {
            var fileName = fileInput.value;
            if (fileName != '')
            {
                //Validate it's an image
                //valid image types: jpeg,jpg,png
                var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
                if (fileExtension == 'jpg' || fileExtension == 'jpeg' || fileExtension == 'png')
                {
                    var divUpload = document.getElementById('divUpload');
                    //divUpload.style.display = 'inline';

                    var file = fileInput.files[0];
                    var mpImg = new MegaPixImage(file);
                    var orient = 1;

                    var resCanvas1 = document.getElementById('canvas');
                    var resCanvasPreview = document.getElementById('canvasPreview');
                    fr = new FileReader; // to read file contents

                    fr.onloadend = function () {
                        var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
                        if(exif)
                            orient = exif.Orientation;
                        mpImg.render(resCanvas1, { maxWidth: 600, maxHeight: 600, orientation: orient });
                        mpImg.render(resCanvasPreview, { maxWidth: 300, maxHeight: 300, orientation: orient });
                        divUpload.style.display = 'inline';
                    };

                    if (navigator.appName == 'Microsoft Internet Explorer') {
                        //ie - apparently this isn't a way to get this to work with IE
                        mpImg.render(resCanvas1, { maxWidth: 600, maxHeight: 600, orientation: orient });
                        mpImg.render(resCanvasPreview, { maxWidth: 300, maxHeight: 300, orientation: orient });
                        divUpload.style.display = 'inline';
                    }
                    else
                    {
                        fr.readAsBinaryString(file); // read the file
                    }                       

                    /*
                    var blobURL = window.URL.createObjectURL(mpImg.blob); // and get it's URL

                    var image = new Image();
                    image.src = blobURL;

                    image.onload = function () {
                        resize(image, 'canvas', 600, 600,orient);
                        resize(image, 'canvasPreview', 300, 300,orient);
                    }
                    */

                }
                else
                {
                    alert('Please pick a valid image file. Only jpeg and png file types supported.');
                }
            }