Javascript 使用Django将html5画布加载到PIL图像中

我试图获取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>

这就是我被困的地方。我不知道如何获取base64编码的数据url，以便使用PIL将图像加载到可用的表单中

谢谢

编辑：下面是底部注释的代码：

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

或者，如果您需要将其加载到PIL中：

import cStringIO

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

im = Image.open(tempimg)

HTML:

Django请求后视图：

模块范围内的

#
从io导入字节io
从PIL导入图像
进口稀土
导入base64
#在您的视图功能中
image\u data=request.POST['image\u data']
image_width=int（request.POST['width']）
image_height=int（request.POST['height']））
image\u data=re.sub（“^data:image/png；base64，”，image\u data）
image\u data=base64.b64解码（image\u数据）
图像数据=字节（图像数据）
im=图像。打开（图像\u数据）
断言（图像宽度、图像高度）=im.size

在您的设置中增加最大帖子大小（例如：~20 MB）：

#画布数据URL很大
数据上传最大内存大小=20\u 000\u 000

2019年，我用python3尝试了Acorn答案，结果 错误“str”对象没有属性“decode” 所以我做了一些搜索和调整的代码，它在这里工作，它是

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

---

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

{%csrf_令牌%}

当我使用.decode（）时，我得到一个不正确的填充异常。我应该去掉字符串开头的一些“data:image…”吗？我尝试了不同的方法，但都没有效果。我用一个简单的正则表达式更新了我的答案，从数据URI中获取base64编码的数据。我刚刚发现我的解决方案有什么问题；python正在剥离一个超出我预期的额外字符。（知道这是为什么吗？）非常感谢您的帮助，我将使用您的重新版本，因为我会比使用此版本时头痛得多：[代码移动到最前面的帖子进行格式化]哦，剥离不起作用的原因是它与作为参数提供的完整字符串不匹配，它与字符串中的任何字符都匹配。由于字符串包含一个

i

，因此它从数据的开头被删除。回答得很好！re.search（r'base64，（.*），datauri.group（1）是优化的还是效率更高？我希望避免使用regexp引擎读取整个字符串，而只需要删除开头。

import cStringIO

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

im = Image.open(tempimg)

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

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