将 JavaScript 生成的图像上传到 Django

Posted 2023-02-22

【中文标题】将 JavaScript 生成的图像上传到 Django

【英文标题】：Uploading JavaScript generated image to Django

【发布时间】：2013-06-14 22:49:36

【问题描述】：

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

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

谢谢！

【问题讨论】：

你试过什么？你是什​​么意思“自动生成”？您是从图像列表中获取还是实际绘制一个新图像？你检查过这个docs.djangoproject.com/en/dev/topics/http/file-uploads吗？

我实际上画了一些新的东西，所以发送图像索引是行不通的。我尝试使用 CharField 传输二进制数据，但我丢失了一些数据（也许有解决方法？）。文件对象可能是个好主意。是否可以在不上传任何实际文件的情况下从 javascript 伪造文件上传？ - 谢谢

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

希望这会有所帮助。