javascript - 将 JavaScript 生成的图像上传到 Django

Question

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

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

谢谢！

Answer 1

自己找到了答案，如果有人需要，这是解决方案：

在客户端，这是从画布获取图像并将其设置为表单字段（隐藏的字符字段）的方式：

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 包含二进制数据，您可以简单地保存到文件中，它应该可以工作。

希望这可以帮助。