javascript - mostrar - img django

Cargue un lienzo html5 en una imagen PIL con Django

Question

Intento obtener el contenido de un lienzo html5 y pasarlo a mi servidor django, donde se manipulará con PIL y se guardará como PNG. Esto es lo que tengo hasta ahora:

Desde el formulario HTML, el usuario hace clic en el botón "actualizar", el contenido del lienzo - con canvas.toDataURL () - se descarga en un cuadro de texto que se envía a través de un formulario POST. Eventualmente esto será automático, pero no por ahora.

<input type="text" id="canvasData" name="canvasData"/>
<input type=''button'' value="update" onclick=''jscript:updateData();''>
<canvas id="sketch"></canvas>
<script type="text/javascript">
    function jscript:updateData() {
        $(''#canvasData'')[0].value = $(''canvas'')[0].toDataURL();
    }
</script>

El canvasData tiene la forma de ''datos: image / png; base64, iVBORw0KGgoAAAA ... etc ... ='' cuando se envía de nuevo. Entonces lo trato en django:

from PIL import Image
...
canvasData = request.POST.get(''canvasData'', '''')
im = Image.somehowLoad(canvasData)
...
im.save(''canvas.png'')

Y aquí es donde estoy atascado. No puedo entender cómo obtener la URL de datos codificada en base64 para cargar la imagen en una forma utilizable con PIL.

¡Gracias!

editar: aquí está el código para el comentario inferior:

>>> d
''data:image/png;base64,iVBORw0K''
>>> d.strip(''data:image/png;base64,'')
''VBORw0K''

Answer 1

import re

datauri = ''data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==''

imgstr = re.search(r''base64,(.*)'', datauri).group(1)

output = open(''output.png'', ''wb'')

output.write(imgstr.decode(''base64''))

output.close()

o si necesita cargarlo en PIL:

import cStringIO

tempimg = cStringIO.StringIO(imgstr.decode(''base64''))

im = Image.open(tempimg)

Answer 2

HTML:

<form action="" method="post">
    {% csrf_token %}
    <input type="hidden" name="width" value="">
    <input type="hidden" name="height" value="">
    <input type="hidden" name="image_data" value="">
</form>

Javascript:

function submit_pixels(canvas) {
    $(''form input[name=image_data]'').val(canvas.toDataURL("image/png"));
    $(''form input[name=width]'').val(canvas.width);
    $(''form input[name=height]'').val(canvas.height);
    $(''form'').submit();
}

Vista de solicitud POST de Django:

# in the module scope
from io import BytesIO
from PIL import Image
import re

# in your view function
image_data = request.POST[''image_data'']
image_width = int(request.POST[''width''])
image_height = int(request.POST[''height''])
image_data = re.sub("^data:image/png;base64,", "", image_data)
image_data = base64.b64decode(image_data)
image_data = BytesIO(image_data)
im = Image.open(image_data)
assert (image_width, image_height,) == im.size

Incremente el tamaño máximo de POST en su configuración (ejemplo: ~ 20 MB):

# canvas data urls are large
DATA_UPLOAD_MAX_MEMORY_SIZE = 20_000_000