如何使用ajax将画布数据从javascript发送到django

我正在开发一个django应用程序，用户可以在其中触发网络摄像头并捕获照片。这张照片保存在画布中。我想将此图像发送到django视图，通过该视图，图像可以保存在django服务器中

我正在使用webrtc触发网络摄像头。我很难用js本身保存数据，并且在某个地方读到，单用js是不可能的。因此，我现在尝试使用ajax将te数据发送到python，但无法。我是一个使用canvas和ajax的初学者，因此，详细的解释会很有帮助

我试着用这些答案，但似乎没有一个有用

这是到目前为止我的代码

html模板

我很确定我把ajax部分搞糟了

我还没有编写任何代码来用python保存图像，但我想如果我能以某种方式将画布数据转换为jpeg或png，然后将其发送到python，这将很容易。我也不明白为什么我们必须将画布数据转换为base64。我们不能把它转换成png吗

请帮帮我。 多谢各位

[第1版] python视图.py

---

也许您的代码工作得很好，但这很关键：

 ...


            data: JSON.stringify(dataURL),
            data: {
                imageBase64: dataURL
            }

不能使用两个相同的键访问创建对象。 甚至不需要注入两次相同的数据

删除JSON.stringify行，然后重试！我已经用websocket完成了，我看不出不工作的原因

数据：图像/png；base64，iVBORw0K

还可以尝试：

.toDataURL("image/png")

检查连接是否正常

发布完整的错误日志！如果您想在没有用户请求的情况下编程（单击），可能您有权限错误

我知道了

var dataURL = "I Need to be global";

document.getElementById("snap").addEventListener("click", function(){

            // WORK ON CLICK    
            ...
           dataURL = canvas.toDataURL();


            // ATTACHING EVENT - NO CALL 
            $("#use_image").click(function() {
               // This will work only on click again on use_image
            })

---

我使用ajax将rgba像素数组发送到django视图
在您的情况下，代码如下所示：

        var data_pixel = canvas.getContext('2d').getImageData(0, 0, 640, 480).data;
        $("#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: 'image': JSON.stringify(data_pixel),
            }).done(function(data) {
                console.log(data['response']);
            });
        });

此外，添加以下脚本以避免ajax之后出现csrf_标记

// csrf code
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');

    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });

请注意，django的数据上传最大内存大小为2.5MB，但您可以在设置中更改此默认值。

---

希望这有帮助

我仍然得到同样的结果。现在，此代码的输出是

csrfmiddlewaretoken

。我已经编辑了这个问题以添加django views.py。我不确定如何将画布数据转换为jpeg或png，然后将其发送到python。请帮助我。如果你的dataURL未定义，那么我发现你有错误。我的代码似乎没有任何错误。但问题是，在使用pythontry console.log（dataURL）或使用调试器查看ajax中的实际值之前，它不会将任何内容返回到pythontry console.log（dataURL）…您必须确保！

var dataURL = "I Need to be global";

document.getElementById("snap").addEventListener("click", function(){

            // WORK ON CLICK    
            ...
           dataURL = canvas.toDataURL();


            // ATTACHING EVENT - NO CALL 
            $("#use_image").click(function() {
               // This will work only on click again on use_image
            })

        var data_pixel = canvas.getContext('2d').getImageData(0, 0, 640, 480).data;
        $("#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: 'image': JSON.stringify(data_pixel),
            }).done(function(data) {
                console.log(data['response']);
            });
        });

// csrf code
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');

    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });

def img_submit(request):
    data_image = request.POST.get('image')
    data_image_parse = json.loads(data_image) # parse JSON.stringify and would be a dictionary
    data_image = list(data_image_parse.values()) # convert to list and would be length of 640 * 480 * 4
    image = np.array(data_image).reshape(480, 640, 4) # here is your image data and you can save it
    response = {}
    response['response'] = 'whatever you want to say' 
    return JsonResponse(response)