将HTML5 Canvas转换为要上传的文件？
标准的HTMLfile upload工作如下：
<g:form method="post" accept-charset="utf-8" enctype="multipart/form-data" name="form" url="someurl"> <input type="file" name="file" id="file" /> </form> 我的情况下加载到HTML5canvas的图像，并希望将其作为文件提交给服务器。 我可以：
var canvas; // some canvas with an image var url = canvas.toDataURL();
这给了我一个像base64一样的图像/ PNG。
我怎样才能发送base64图像到服务器的方式与inputtypes文件一样？
问题是base64文件与input type =“file”中的文件不是同一types。
我可以将服务器types相同的base64转换为某种方式吗？
出于安全原因，您不能直接设置文件input元素的值。
如果你想使用文件input元素：
- 从canvas中创build一个图像（就像你做的那样）。
- 在新页面上显示该图像。
- 让用户右键单击 – 保存至其本地驱动器。
- 然后他们可以使用你的文件input元素来上传新创build的文件。
或者，您可以使用Ajax来发布canvas数据：
你问了一下blob：
var blobBin = atob(dataURL.split(',')[1]); var array = []; for(var i = 0; i < blobBin.length; i++) { array.push(blobBin.charCodeAt(i)); } var file=new Blob([new Uint8Array(array)], {type: 'image/png'}); var formdata = new FormData(); formdata.append("myNewFileName", file); $.ajax({ url: "uploadFile.php", type: "POST", data: formdata, processData: false, contentType: false, }).done(function(respond){ alert(respond); });
注意：blob通常在最新的浏览器中被支持。
canvas图像需要转换为base64，然后从base64转换为二进制。 这是通过使用.toDataURL()和dataURItoBlob()
这是一个相当繁琐的过程，需要将几个SO答案，各种博客文章和教程拼凑在一起。
我已经创build了一个教程，你可以按照这个教程来引导你完成整个过程
另一个解决scheme：将var url中的数据发送到隐藏字段中，解码并保存在服务器上。
Python Django中的示例：
if form.is_valid(): url = form.cleaned_data['url'] url_decoded = b64decode(url.encode()) content = ContentFile(url_decoded) your_model.model_field.save('image.png', content)
目前在规范中（截止到17年4月，很less有支持）
Canvas.toBlob();
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
