Python Flask Base64图像“错误：填充不正确” - 仅在safari中

Question

我正在通过将图像绘制到画布并获取其数据网址来调整图像大小。

在我的python中，我使用数据网址解码图像：

content = form.dataurl_main.data.split(';')[1]
image_encoded = content.split(',')[1]
body = base64.decodestring(image_encoded.encode('utf-8'))

它在chrome和firefox中运行得非常好，但在safari中我收到此错误：

2017-03-28T11:33:39.293926+00:00 app[web.1]:     return func(*args, **kwargs)
2017-03-28T11:33:39.293931+00:00 app[web.1]:     body = base64.decodestring(image_encoded.encode('utf-8'))
2017-03-28T11:33:39.293933+00:00 app[web.1]:     return binascii.a2b_base64(s)
2017-03-28T11:33:39.293933+00:00 app[web.1]: Error: Incorrect padding
2017-03-28T11:33:39.293932+00:00 app[web.1]:   File "/app/.heroku/python/lib/python2.7/base64.py", line 328, in decodestring

它似乎无法获得正确的dataurl，如果它是在safari中生成的，可能数据url看起来不同，这里是我的JS如何创建数据url：

我的画布和数据网址TextField：

<canvas class="make-display-none" id="uploading_canvas_main" name="uploading_canvas_main"></canvas>
{{ form.dataurl_main(class="make-display-none") }}

JS：

$( "input#hauptbild" ).change(function() {

var filesToUpload = this.files;

var img_m = document.createElement("img");
img_m.src = window.URL.createObjectURL(this.files[0]);

$( img_m ).load(function() {

    canvas = $("#uploading_canvas_main").get(0);                    

    var MAX_WIDTH = 550;
    var MAX_HEIGHT = 400;
    var width = img_m.width;
    var height = img_m.height;

    if (width > height) {
      if (width > MAX_WIDTH) {
        height *= MAX_WIDTH / width;
        width = MAX_WIDTH;
      }
    } else {
      if (height > MAX_HEIGHT) {
        width *= MAX_HEIGHT / height;
        height = MAX_HEIGHT;
      }
    }       

    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img_m, 0, 0, width, height);

    var dataurl = canvas.toDataURL("image/jpg");

    $( "#dataurl_main" ).val(dataurl);

    });
});

修改

以下是print image_encoded中的最后几个字符：

... x/AsXcAAAAABJRU5ErkJggg==

我尝试删除最后两个字符：

if image_encoded[-2:] == "==":
    image_encoded = image_encoded[:-2]

但是后来我得到了chrome中的填充错误。 在safari我不再有任何错误，但图片没有上传。

Answer 1

好的，我设法解决了这个问题（但不明白为什么它会解决它，如果有人可以进一步评估它会有所帮助）。

这里的问题是form.dataurl_main.data又名。 dataurl本身（一般是图像数据本身）。

如果在safari中生成，数据网址可能会以某种方式缩短。 但是如果在safari浏览器中解决了问题，可以将字符串"SAFARI"（可能与任何随机字符串一起使用）添加到dataurl：

if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
    $( "#dataurl_main" ).val("SAFARI" + dataurl);
} else {
    $( "#dataurl_main" ).val(dataurl);
}

在我的代码中我正在切出图像数据，所以实际上添加的字符串不会影响图像数据，但似乎通用数据字符串是有效的吗？

无论如何，使用这段代码我做了几次测试，它在所有浏览器中都能正常运行。