使用 Django 将 html5 canvas 加载到 PIL 图像中

Question

我试图获取 html5 画布的内容并将其传递到我的 django 服务器，然后使用 PIL 对其进行操作并保存为 PNG。这是我到目前为止所得到的：

从 HTML 表单中，用户单击“更新”按钮，画布的内容 - 使用 canvas.toDataURL() - 被转储到通过 POST 表单提交的文本框中。最终这将是自动的，但目前还不是。

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

发送过来时，canvasData 的格式为“data:image/png;base64,iVBORw0KGgoAAAA...etc...=”。然后我在 django 中处理它：

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

这就是我陷入困境的地方。我不知道如何获取 base64 编码的数据 url，以使用 PIL 将图像加载到可用的形式。

谢谢！

编辑：这是底部评论的代码：

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

或者如果您需要将其加载到 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();
}

Django POST 请求视图：

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

# 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

增加设置中的最大 POST 大小（例如：~20 MB）：

# canvas data urls are large
DATA_UPLOAD_MAX_MEMORY_SIZE = 20_000_000

Answer 3

在 2019 年，我用 python3 尝试了 Acorn 答案，然后得到了
错误“str”对象没有属性“解码”
所以我做了一些搜索并调整了代码，它在这里工作了

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

Answer 4

适用于 Django 3.0 和 python 3.7
html文件中的代码（在django中称为模板）

<form method="POST" id="form1">
        {% csrf_token %}
        <canvas id="camera--sensor"></canvas>
        <!-- Camera view -->
        <video id="camera--view" autoplay playsinline></video>
        <!-- Camera output -->
        <img src="//:0" alt="" id="camera--output" onclick="show()"> 
        <!-- Camera trigger -->
        
        <input type="hidden" id="captured_image" name="captured_image">
        <input id="upload_image"  type="submit" onclick="save()" value="Upload the image">
    </form>

在 JavaScript 文件中

var canvas;
function save(){
            canvas = document.getElementById('camera--sensor');
            document.getElementById('captured_image').value = canvas.toDataURL('image/png');
          
        }

在 Django 的views.py 文件中

def capture_image(request):
    if request.method=="POST":
        # print("-------",request.POST)
        if request.POST.get('captured_image'):
            captured_image = request.POST.get('captured_image')
            # imgstr = captured_image.decode('base64')
            imgstr = re.search('base64,(.*)', captured_image).group(1)
            imgstr = base64.b64decode(imgstr)
            # print(imgstr)
            tempimg = io.BytesIO(imgstr)

            im = Image.open(tempimg)