Question

我创建了一个Web应用程序，用户可以从文件系统上传图像，但在极少数情况下，我只能在服务器端获取黑色图像数据。我在lan的开发环境中从未遇到过这个问题，即使原始图像导致了错误。这种故障总体上只是零星的，但尤其是一个用户受到影响。所有用户都应该使用最新的Firefox。我已经阅读了关于这个主题的大部分问题，我不认为这与安全问题，jpg / png设置或preserveDrawingBuffer有关。因为我从未在使用快速PC的局域网上遇到此问题，并且通常最后选择的图像受到影响这似乎是同步问题。为了避免这种情况，我使用$ .Deferred和Callbacks，但可能是我错过了一些东西。首先，我将所选图像直接加载并转换为画布列表。上传被禁用，直到完成为止。在上传过程中，我只是遍历画布列表并使用$ .Deferred读取数据（canvas.toDataURL（））并通过ajax将其传输到服务器。

获取图片到页面：

var file = document.getElementById('fileSelect');
if (file != undefined) {
file.onchange = function (e) {
    btnUpload.SetEnabled(false);
    loadImgs(e, function () {
        btnUpload.SetEnabled(true);
    });
};
}

function loadImgs(e, callback) {

for (var t = 0; t < e.target.files.length; t++) {
    if ($('.CanvasClass').length <= 20) {

        var myTmpImg = new Image();
        var myName = e.target.files[t].name;
        myTmpImg.src = URL.createObjectURL(e.target.files[t]);
        myTmpImg.onload = function () {

            var GrenzeX = 1024;
            var GrenzeY = 768;
            var myFactor = 1;
            if (myTmpImg.naturalWidth > GrenzeX || myTmpImg.naturalHeight > GrenzeY) {
                if ((GrenzeX / myTmpImg.naturalWidth) < (GrenzeY / myTmpImg.naturalHeight)) {
                    myFactor = GrenzeX / myTmpImg.naturalWidth;
                } else {
                    myFactor = GrenzeY / myTmpImg.naturalHeight;
                }
            }

            var myCanvas = document.createElement('canvas');
            myCanvas.className = "CanvasClass";
            myCanvas.height = this.naturalHeight * myFactor;
            myCanvas.width = this.naturalWidth * myFactor;

            var ctx = myCanvas.getContext("2d");
            ctx.drawImage(this, 0, 0, myCanvas.width, myCanvas.height);
            $("#myImages").append(myCanvas);

            myMetaData.push(new newImgData('', '', myName));
        }

    }
}
if (callback && typeof callback == "function") {
    callback();
}

}

阅读并传输数据：

$('.CanvasClass').each(function () {
var fd = new FormData();
var base64Data = getBase64Image(this, false);
base64Data.then(function (result) {
    //Create Ajax Request         
});
});

function getBase64Image(myCanvas, modus) {
var deferred = $.Deferred();
var dataURL = myCanvas.toDataURL("image/jpeg", 0.9);
if (modus === true) {
    deferred.resolve(dataURL);
} else {
    deferred.resolve(dataURL.replace(/^data:image\/(png|jpeg);base64,/, ""));
}
return deferred.promise();
}

我还可以在数据传输过程中排除问题，因为我在上传之前在客户端上记录了图像的大小，并将其与服务器端的数据进行了比较，结果相同。

来自canvas.toDataURL（）的黑色图片

0 个答案: