Question

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

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

谢谢！

Answer 1

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

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

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

在django方面：

在表单中添加一个名为“hidden_image_field”的隐藏字段，用于传递数据。这个字段是一个简单的CharField。您可以添加max_length限制以确保图像的大小合理（注意：不是尺寸，而是实际尺寸）。

解析图像数据：

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包含二进制数据，你只需保存到一个文件就可以了。

希望这会有所帮助。

将JavaScript生成的图像上传到Django

1 个答案: