将JavaScript生成的图像上传到Django

Question

我在客户端生成了一个图像,我想通过表单传输到服务器.例如,假设我有一个注册表单,其中配置文件图像是由JavaScript自动生成的,我想将该图像传输到django.

当用户点击提交按钮时,将图像二进制数据传输到服务器的最佳方法是什么？我应该使用什么形式的字段？

谢谢!

Answer 1

我自己找到了答案,以下是有人需要的解决方案:

在客户端,这是从canvas获取图像并将其设置为表单字段(隐藏字符字段)的方式:

var dataURL = document.getElementById('canvas_id').toDataURL("image/png");
document.getElementById('id_hidden_image_field').value = dataURL;

在django方面:

1. 在表单中添加一个名为"hidden_​​image_field"的隐藏字段,用于传递数据.这个字段是一个简单的CharField.您可以添加max_length限制以确保图像的大小合理(注意:不是尺寸,而是实际尺寸).

2. 解析图像数据:

   import re
   import base64
   dataUrlPattern = re.compile('data:image/(png|jpeg);base64,(.*)$')
   ImageData = request.POST.get('hidden_image_field')
   ImageData = dataUrlPattern.match(ImageData).group(2)
   
   # If none or len 0, means illegal image data
   if (ImageData == None or len(ImageData) == 0:
       # PRINT ERROR MESSAGE HERE
       pass
   
   # Decode the 64 bit string into 32 bit
   ImageData = base64.b64decode(ImageData)
   

现在ImageData包含二进制数据,你可以简单地保存到一个文件,它应该工作.

希望这可以帮助.