上传JavaScript生成的图像到Django

Uploading JavaScript generated image to Django

本文关键字：图像 Django JavaScript 上传      更新时间：2023-09-26

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

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

谢谢!

我自己找到了答案，这里是解决方案，以防有人需要它:

在客户端，这就是如何从画布获取图像并将其设置为表单字段(隐藏的字符字段):

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

相关文章：