如何将 JPEG 二进制数据保存到 Django ImageField答案

【问题标题】：How to Save JPEG binary data to Django ImageField如何将 JPEG 二进制数据保存到 Django ImageField
【发布时间】：2016-03-30 13:47:59
【问题描述】：

目标：通过浏览器Web应用程序获取用户签名并保存到Django ImageField

我使用https://github.com/szimek/signature_pad 在客户端获取用户签名，然后首先使用toDataURL() 将其保存在Django ModelForm TextField 中。

现在我被困在将数据转换为 jpeg 图像文件并将其保存到我的 Django ImageField 的最后一步。

我遵循了Uploading JavaScript generated image to Django 的提示，但它只涵盖了将 64 位字符串解码为 32 位，我无法完成最后一步：

...现在 ImageData 包含二进制数据，您可以简单地保存到一个文件..

HTML

{{ attendeeMegaForm.signatureHolder }}
<div id="signature-pad" class="m-signature-pad">
    <div class="m-signature-pad--body">
        <canvas></canvas>
    </div>
    <div class="m-signature-pad--footer text-center">
        <div class="description"><strong>Please Sign above <i class="fa fa-arrow-up"></i></strong></div>
         <button type="button" class="btn btn-sm btn-default clear" data-action="clear">Clear</button>
    </div>
</div>

signaturePad = new SignaturePad(canvas, {
    backgroundColor: "rgb(255,255,255)",
    minWidth: 0.4,
    maxWidth: 2,
    dotSize: 1.2,
    onEnd: function () {
        signature = signaturePad.toDataURL("image/jpeg");
        document.getElementById('id_signatureHolder').value = signature;
    }
  });

Python

if request.POST.get('updateAttendeeKey'):
    if attendeeMegaForm.is_valid():
        dataUrlPattern = re.compile('data:image/(png|jpeg);base64,(.*)$')
        ImageData = request.POST.get('signatureHolder')
        ImageData = dataUrlPattern.match(ImageData).group(2)


        if ImageData == None or len(ImageData) != 0:
            ImageData = base64.b64decode(ImageData)

谢谢！

【问题讨论】：

标签： javascript python django digital-signature

【解决方案1】：

这是我如何在 python 3.5/Django 1.9.2 后端使用 signature_pad：

import re, io
from base64 import decodestring
from django.core.files import File

data_url_pattern = re.compile('data:image/(png|jpeg);base64,(.*)$')
signature_url = request.POST.get("sig_data_url")
signature_data = data_url_pattern.match(signature_url).group(2)
signature_data = bytes(signature_data, 'UTF-8')
signature_data = decodestring(signature_data)
img_io = io.BytesIO(signature_data)
model_instance.image_field.save(filename, File(img_io))

基本上在解码字符串之后，只需创建将用于创建 Django File 对象的 io 对象。一旦你有了它，你可以用你想要使用的文件名将它保存到图像字段中。

【讨论】：

model_instance.image_field = File(img_io); model_instance.save() 因为最后一行更具互操作性