Question

目标：通过浏览器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>

JS

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)

谢谢！

Answer 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对象。完成后，可以使用要使用的文件名将其保存到图像字段。

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

1 个答案: