Django Bild von base64 gespeichert decodierte Zeichenfolge beschädigt ist

Question

Ich weiß nicht, was hier falsch ist, so dass ich den ganzen Prozess beschreiben:

Zuerst verwende ich Croppie die Benutzer zu lassen, auf der Client-Seite ein Bild zuschneiden . Diese Javascript-Bibliothek soll ein gültiges canvas-Objekt zurückgeben, das in base64 codiert ist. Dann schicke ich das Bild mit $.ajax():

croppie_div.croppie('result', { 
      type: 'canvas', 
      size: 'original', 
      format: 'jpeg' 
     }).then(function(resp){ 
      $.ajax({ 
       url: "{% url 'recortar_carta_ajax' %}", 
       method: "POST", 
       data: {'csrfmiddlewaretoken': "{{ csrf_token }}", 'imagen': resp, 'carta_id': "{{ carta_magicpy.id }}"}, 
       success: function(r){ 
        alert(r) 
       }, 
       error: function(r){ 
        alert(r) 
       } 
      }); 

Dann erhalte ich die codierte Zeichenfolge in django, dekodieren und speichern Sie sie in einem ImageField:

if request.is_ajax(): 

     carta_id = request.POST.get("carta_id") 
     imagen_b64 = request.POST.get("imagen") 

     imagen_decodificada = base64.b64decode(imagen_b64) 

     carta_magicpy = CartaMagicPy.objects.get(id=carta_id) 
     imagen_django = ContentFile(imagen_decodificada, "imagen.jpeg") 
     carta_magicpy.imagen.save("imagen.jpeg", imagen_django, save=True) 

Das gespeicherte Bild beschädigt ist. Wenn ich versuche, es mit einem Dateibrowser zu öffnen, erhalte ich den Fehler:

Error interpreting JPEG image file (Not a JPEG file: starts with 0x75 0xab)

Ich weiß nicht, wie man das debuggt. Wie kann ich den Fehler finden? Jeder Rat wird helfen.

Dies ist das Modell:

def ubicar_magicpy(instance, filename): 
    # Para ubicar las imágenes de magicpy 
    path = "/".join([instance.grupo.nombre, "imagen.jpeg"]) 
    return path 

class CartaMagicPy(models.Model): 
    imagen = models.ImageField(null=True, upload_to=ubicar_magicpy) 

Answer 1

Sie die Base64 Erklärungen entfernen sollten, da sie sich nicht Teil der Base64-Zeichenfolge sind. Sie können dies sowohl auf der Clientseite als auch auf der Serverseite tun, obwohl der Vorteil der Serverseite darin besteht, dass Sie beim Ändern der Bildformate feststellen können, welches Dateiformat gesendet wird.

Dies ist nicht der eleganteste Weg, es zu tun, aber man konnte haben:

imagen_decodificada = base64.b64decode(imagen_b64.replace('data:image/jpeg;base64,',''))