相关疑难解决方法(0)

我目前正在构建一个HTML5网络应用程序/ Phonegap本机应用程序,我似乎无法弄清楚如何将我的画布保存为图像canvas.toDataURL().有人可以帮帮我吗？

这是代码,它有什么问题？

//我的画布名为"canvasSignature"

JavaScript的:

function putImage()
{
  var canvas1 = document.getElementById("canvasSignature");        
  if (canvas1.getContext) {
     var ctx = canvas1.getContext("2d");                
     var myImage = canvas1.toDataURL("image/png");      
  }
  var imageElement = document.getElementById("MyPix");  
  imageElement.src = myImage;                           

}  

HTML5:

<div id="createPNGButton">
    <button onclick="putImage()">Save as Image</button>        
</div>

我正在尝试获取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编码的数据网址以使用PIL将图像加载到可用的形式.

谢谢!

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

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