Python Flask Base64 Images "Error：Incorrect padding" - サファリのみ

Question

イメージをキャンバスに描画し、そのデータURLを取得してイメージのサイズを変更しています。私のpythonで

私は画像をデコードするデータのURLを使用します。

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

それはChromeとFirefoxで絶対にうまく動作しますが、サファリでは、私はこのエラーを取得：

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を取得できないようですが、データurlがサファリで生成されている場合は別のように見えますが、ここで私のJSはどのようにデータURLを作成しますか：

マイキャンバスとデータのURLのTextField：

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

JS：

... x/AsXcAAAAABJRU5ErkJggg== 

：ここ

$("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); 

    }); 
}); 

EDIT

はprint image_encodedからの最後の数文字です

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

をしかし、私はクロームでパディングエラーを得た：10

私は最後の2つの文字を削除しようと試みました。 サファリでもうエラーはありませんでしたが、画像はアップロードされませんでした。

Answer 1

私は問題を解決することができました（しかし、それが解決した理由は分かりません。

ここでの問題はform.dataurl_main.dataです。 dataurl自体（画像データ自体は一般的です）。

サファリで生成された場合、データURLが何とか短くなる可能性があります。 しかし、Safariブラウザで問題を解決した場合dataurlに（おそらく任意のランダムな文字列で動作します）文字列"SAFARI"を追加：私のコードでは

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

私は画像データをスライスしていますので、実際には追加の文字列がありませんimagedataには影響しませんが、一般的なdatastringは有効ですか？

とにかく私はいくつかのテストを行い、すべてのブラウザでうまく動作しました。