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

Question

Goal: Get users signature through browser web application and save it to Django ImageField

I'm using https://github.com/szimek/signature_pad to get users signature on client side, then first saving it within a Django ModelForm TextField using toDataURL() .

Now I'm stuck at the last step of converting the data into a jpeg image file and saving it to my Django ImageField.

I followed the tip at Uploading JavaScript generated image to Django but it only covers till decoding 64 bit string into 32 bit and I can't complete the last step:

...and now ImageData contains the binary data, you can simply save to a file..

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)

Thanks!

Answer 1

Here is how I got it to work with signature_pad on the python 3.5/Django 1.9.2 backend:

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))

Basically after you decode the string, just create the io object that will be used to create the Django File object. Once you have that, you can save it to the image field with the filename you want to use.