Конвертируйте строку base64 в png изображение с помощью python

Question

Я работаю над приложением Django, где пользователь может запустить веб-камеру с помощью JavaScript и сделать снимок. Эта картина хранится на холсте. Я хочу получить это изображение с python в виде строки base64, преобразовать его в png-файл и сохранить на сервере Django. Это мой код до сих пор

HTML-шаблон

<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 код

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

Я получаю "неправильную ошибку заполнения" для кода Python. Я не уверен, что я делаю неправильно. Или как исправить эту ошибку.

Я пошел по этой ссылке , чтобы написать код Python.

Answer 1

вы не удалили заголовок из вашей строки, что означает, что это не просто данные b64
если вы посмотрите в своем примере, вы увидите эти строки

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

как только вы удалите заголовок, вы сможете использовать строку как b64
заголовок, о котором я говорю, выглядит следующим образом data:image/png;base64,