如何使用 javascript 和 python 将图像保存到服务器

Question

我正在开发一个 Django 应用程序，用户可以在其中单击一个按钮来启动网络摄像头。网络摄像头启动后，用户可以将图像保存到 Django 服务器上。现在我的代码可以用 javascript 拍照。但我一直试图将图像保存到 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>

<form action="{% url 'img_submit' %}" method="post" class="image_submit_form">
    {% csrf_token %}
    <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');

document.getElementById('start').addEventListener("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
    document.getElementById("snap").addEventListener("click", function() {
        context.drawImage(video, 0, 0, 640, 480);

        var url = canvas.toDataURL();

        $("#use_image").click(function() {
            let $form = $(".image_submit_form");
            let form_data = new FormData($form[0]);
            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                dataType: "json",
                data: {
                    url: url,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function(json) {
                    alert("Successfully sent the URL to Django");
                },
                error: function(xhr, errmsg, err) {
                    alert("Could not send URL to Django. Error: " + xhr.status + ": " + xhr.responseText);
                }
            });
        });
    });

});

我正在尝试使用 ajax 将画布图像发送到 django 视图，在那里我可以使用 python 将图像保存到服务器。

到目前为止，这是我的 python 代码。我正在尝试检查我是否获得了要保存的正确数据

django 视图

def img_submit(request):
    url = request.POST.get('url')
    return HttpResponse(url)

但这没有返回。如何通过python访问图像，然后如何保存图像？

谢谢

Answer 1

两件事：

1. 在您的$.ajax 通话中，我建议使用method: "POST"。在此处阅读更多信息：http://api.jquery.com/jquery.ajax/，但默认值似乎是“GET”。我不经常使用jQuery，所以这只是我的一个经验不足的建议，任何使用过它的人，请随时发表评论，我会更新我的答案。

2. 在您的 Django 代码中，您似乎引用了预期的 POST 变量，但我不确定文件是如何在您的 AJAX 请求中传输的，也许它是作为文件发送的将要再次检查文档：https://docs.djangoproject.com/en/2.2/ref/request-response/#django.http.HttpRequest.POST 引用另一个文件页面：https://docs.djangoproject.com/en/2.2/ref/request-response/#django.http.HttpRequest.FILES（再次考虑，我不确定这是尝试的正确路径，但是在您更改 JS 代码之后，如果 POST变量没有正确的东西，试试 FILES 变量。）

最后，我不确定 POST 是否是 QueryDict，但文档似乎指向它，您可以列出数据以查看是否得到 任何东西，尝试添加一些东西像这样的 img_submit：

def img_submit(request):
    url = request.POST.dict()
    return HttpResponse(url)