Python Flask Base64 Images "Error: Incorrect padding" - only in safari -

i resizing images drawing them canvas , getting data url.

in python use data url decode image:

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

it works absolutely fine in chrome , firefox, in safari error:

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 

it seems fails correct dataurl, data url looks different if generated in safari, here js how create data url:

my canvas , data url textfield:

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

the 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);      }); }); 

edit

here last few characters print image_encoded:

... x/asxcaaaaabjru5erkjggg== 

i tryed removing last 2 characters:

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

but got padding error in chrome. in safari had no error anymore image didnt uploaded.

okay managed solve issue (but not understand why solved it, if can evaluate bit further help).

the problem here form.dataurl_main.data aka. dataurl (general image data itself).

it data url somehow short if generated in safari. adding string "safari" (would work random string) dataurl if in safari browser solved issue:

if (navigator.useragent.search("safari") >= 0 && navigator.useragent.search("chrome") < 0) {     $( "#dataurl_main" ).val("safari" + dataurl); } else {     $( "#dataurl_main" ).val(dataurl); } 

in code slicing out image data, added string not affect imagedata, seems general datastring valid?

anyway piece of code made several tests , worked in browsers without failing.