Load an html5 canvas into a PIL Image with Django

问题

I'm trying to get the contents of an html5 canvas and pass it to my django server, where it will then be manipulated with PIL and saved as a PNG. Here's what I have so far:

From the HTML form, the user clicks the "update" button, the canvas's contents - with canvas.toDataURL() - gets dumped into a text box that is submitted via a POST form. Eventually this will be automatic, but not for now.

<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>

The canvasData is in the form of 'data:image/png;base64,iVBORw0KGgoAAAA...etc...=' when it gets sent over. Then I deal with it in django:

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

And this is where i'm stuck. I can't figure out how to get the base64-encoded data url to load up the image into a usable form with PIL.

Thanks!

edit: here's the code for the bottom comment:

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

回答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()

or if you need to load it into PIL :

import cStringIO

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

im = Image.open(tempimg)

回答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();
}

Django POST Request View:

# 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

Bump up the maximum POST size in your settings (example: ~20 MB):

# canvas data urls are large
DATA_UPLOAD_MAX_MEMORY_SIZE = 20_000_000

回答3:

In 2019 with python3 i tried Acorn answer, and i got Error 'str' object has no attribute 'decode ' So i did some searching and adjusted the code and it worked here it is

from binascii import a2b_base64
import re

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

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

binary_data = a2b_base64(imgstr)

Out = open('image.png', 'wb')
Out.write(binary_data)
Out.close()

来源：https://stackoverflow.com/questions/7774686/load-an-html5-canvas-into-a-pil-image-with-django

标签

javascript

python

django

canvas

python-imaging-library