Convert base64 string to png image with python

Question

I'm working on a Django application where the user can trigger the webcam with javascript and snap a picture. This picture is stored in a canvas. I want to retrieve this image with python as a base64 string, convert that into a png file and save it into the Django server. This is my code so far

HTML Template

<center>
    <button type="button" name="button" class='btn btn-outline-dark btn-lg' id='start'>Start Video Capture</button>

    <div class="container-fluid mt-2">
        <video id="video" width="640" height="480" autoplay></video><br>
        <button type="button" data-toggle="modal" data-target="#image_model" class="btn btn-lg btn-dark" id="snap">Snap Photo</button>
    </div>
</center>

<center>
    <canvas id="canvas" width="640" height="480"></canvas>
</center>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Retake</button>
<form class="image_to_server" action="{% url 'img_submit' %}" method="post">
    {% csrf_token %}
    <input type="text" name="base64Field" value="" id='base64'>
    <input type="submit" value="Use Image" class="btn btn-primary" id="use_image">
</form>

Javascript Code

// Grab elements, create settings, etc.
var video = document.getElementById('video');
// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

$('#start').click(function() {
    // Get access to the camera!
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({
            video: true
        }).then(function(stream) {
            //video.src = window.URL.createObjectURL(stream);
            video.srcObject = stream;
            video.play();
        });
    }

    $('#snap').fadeIn();

    // Trigger photo take
    $('#snap').click(function() {
        context.drawImage(video, 0, 0, 640, 480);
        var dataURL = canvas.toDataURL();
        $('#base64').val(dataURL)

        $("#use_image").click(function() {
            console.log('clicked');
        });
    });

});

Django views.py

def img_submit(request):
    if request.method == 'POST':
        data =  request.POST.get('base64Field')
        byte_data = base64.b64decode(data)
        image_data = BytesIO(byte_data)
        img = Image.open(image_data)

    return HttpResponse(data)

I am getting an "incorrect padding error" for the python code. I am not sure what I am doing wrong. Or how to rectify this error.

I followed this link to write the python code.

as the error says, check your padding (make sure your b64 string is correct). take note that its edited a little in the link you provided — Nullman
– Nullman, Commented Apr 30, 2019 at 8:30
I am sending the data directly from js to django without working on it before. So not sure how the base64 string could be wrong. any help??? — Sashaank
– Sashaank, Commented Apr 30, 2019 at 8:34
print it and look at it, even add it(tag as code) to your question so we can look at it — Nullman
– Nullman, Commented Apr 30, 2019 at 8:47
do you want me to print the entire base64 string. I am a beginner and do not understand base64 yet. I am also not able to add the entire base64 string to stackoverflow — Sashaank
– Sashaank, Commented Apr 30, 2019 at 8:51

Nullman · Accepted Answer · 2019-04-30 10:06:56Z

1

you did not remove the header from your string, which means its not just the b64 data
if you look in your example you will see these lines

import re
base64_data = re.sub('^data:image/.+;base64,', '', data)

once you remove the header, you should be able to use your string as b64
the header im speaking of looks like this data:image/png;base64,

answered Apr 30, 2019 at 10:06

Nullman

4,2842 gold badges18 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Convert base64 string to png image with python

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related