我正在尝试获取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')
这就是我被困住的地方。我无法弄清楚如何通过PIL将base64编码的数据网址加载到可用的表单中。
谢谢!
编辑:这是底部评论的代码:
>>> d
'data:image/png;base64,iVBORw0K'
>>> d.strip('data:image/png;base64,')
'VBORw0K'
答案 0 :(得分:18)
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)
答案 1 :(得分:3)
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
# 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
答案 2 :(得分:0)
在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()
答案 3 :(得分:0)
对于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)