Javascript canvas.toDataURL（“image/jpeg”）仅返回；数据：，“；

我使用画布将图片转换为base64编码字符串：

if (inputImage.get(0).files.length) {
    var image = $("#datatransfer_food_image")[0];
    var image_width = image.naturalWidth;
    var image_width_target = image_width;
    var image_height = image.naturalHeight;
    var image_height_target = image_height;

    if ((image_width > 1080) || (image_height > 1080)) {
        var aspectRatio = 0.0;

        if (image_width > image_height) {
            aspectRatio = (image_width / image_height);

            image_width_target = 1080;
            image_height_target = (1080 / aspectRatio);
        } else {
            aspectRatio = (image_height / image_width);

            image_width_target = (1080 / aspectRatio);
            image_height_target = 1080;
        }
    }

    var canvas = document.createElement("canvas");
    canvas.width = image_width_target;
    canvas.height = image_height_target;

    var context = canvas.getContext("2d");

    context.fillStyle = "#fff";
    context.drawImage(image, 0, 0, image_width_target, image_height_target);

    inputImageName = inputImage.val();
    inputImageName = inputImageName.substring((inputImageName.lastIndexOf("\\") + 1), inputImageName.length);
    inputImageSource = canvas.toDataURL("image/jpeg");

    console.log("input iamge widht: " + image_width);
    console.log("input image widht: " + image_width_target);
    console.log("input image height: " + image_height_target);
    console.log("input image source: " + inputImageSource);
} else {
    error = true;

    $("#food_picture_missing").show();
}

这段代码正常工作。例如，这张图片：

但如果我拍这张照片（也是jpg）：

inputImageSource

的值仅为：

data:,

这怎么可能？我在这里做错了什么，一些图片被正确编码，而另一些只是生成一个字符串，如

数据：，

编辑

我使用以下jquery代码拾取图像：

$(document).on("change", "#datatransfer_food_image_input", function() {
if (typeof (FileReader) != "undefined") {
    var image_scanner = $("#datatransfer_food_image_div");

    var reader = new FileReader();

    reader.onload = function(e) {
        $("#datatransfer_food_image").attr("src", e.target.result);
        $("#datatransfer_food_image").removeClass("icon-scanner");
        $("#datatransfer_food_image").addClass("image-upload-image");
    }

    reader.readAsDataURL($(this)[0].files[0]);
} else {

}
});

EIDT 2

input image widht: Infinity
datatransfer.js:451 input image height: 1080
datatransfer.js:452 input image source: data:,

图像宽度无限似乎是问题所在。 我添加了更多的代码

编辑3

这表明画布不是问题所在。宽度、高度和纵横比的计算如下所示。如果您拍摄第一张照片（风景）：

如果您拍摄第二张照片（肖像）：

---

但这是相同的计算过程，为什么是0而不是1.33？

您是否从其他外部源加载第二个图像？不，它是同一个源文件夹。我猜这是图像尚未加载的问题，例如，“如果画布没有像素（即其水平维度或垂直维度为零）然后该方法必须返回字符串“

data:，

”，请澄清：当此错误出现时，

image\u width\u target

和

image\u height\u target

的值是什么？打印

image\u width\u target

的提示很好。它是无限的。所以问题似乎不是画布，而是大小的重新计算，因为我只允许最大值为1080 x 1080，我自己把它们切掉了。问题是，

（3264/2448）

的javascripts结果为null，当然，null所否定的东西永远都不好。为什么是0而不是1,33？是否从其他外部源加载第二个图像？否，它是同一个源文件夹。我猜这是尚未加载图像的问题，例如，“如果画布没有像素（即其水平维度或垂直维度为零）然后该方法必须返回字符串“

data:，

”，请澄清：当此错误出现时，

image\u width\u target

和

image\u height\u target

的值是什么？打印

image\u width\u target

的提示很好。它是无限的。所以问题似乎不是画布，而是大小的重新计算，因为我只允许最大值为1080 x 1080，我自己把它们切掉了。问题是，

（3264/2448）

的javascripts结果为null，当然，null所否定的东西永远都不好。为什么是0而不是1,33？

width greater than height
aspect ratio: 1.3333333333333333, height: 2448, width: 3264
input image widht: 1080
input image height: 810

width smaller than height
ratio: 0, height: 3264, width: 2448
input image widht: Infinity
input image height: 1080