使用Django将html5画布加载到PIL映像中 [英] Load an html5 canvas into a PIL Image with Django

问题描述

我试图获取一个html5画布的内容，并将其传递给我的django服务器，然后它将被PIL操作并保存为PNG。这是我到目前为止有：

从HTML表单中，用户点击更新按钮，在画布的内容
- 与canvas.toDataURL（） - 被转储到通过POST表单提交的文本框中。

 < input type =textid =canvasDataname = canvasData/> 
< input type ='button'value =updateonclick ='jscript：updateData（）;'> 
< canvas id =sketch>< / canvas> 
< script type =text / javascript> 
 function jscript：updateData（）{
 $（'＃canvasData'）[0] .value = $（'canvas'）[0] .toDataURL 
} 
< / script> 
  

的

canvasData是在数据格式：图像/ PNG; BASE64，iVBORw0KGgoAAAA ...等... ='当它被发送。然后我在django处理它：

 从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（数据：图像/ PNG; BASE64，'）
'VBORw0K'
  

解决方案

 进口重
 
 datauri ='数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 // 8 / w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg ==' 
 
 imgstr = re.search（r'base64，（。*），datauri）。集团（1）
 
输出=开放（'output.png'，' WB）
 
 output.write（imgstr.decode（'的base64'））
 
 output.close（）
  

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

  cStringIO导入
 
 tempimg = cStringIO.StringIO（imgstr.decode（'的base64'））
 
 IM = Image.open（tempimg）
  

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'

解决方案

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)

这篇关于使用Django将html5画布加载到PIL映像中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！