使用p5.js从相机上使用AJAX上传图像

Question

我正在使用P5.js及其视频捕获功能来使用相机。我想使用Ajax将其中一些图像上传到服务器。我不知道如何将p5.js映像对象转换为可以用Ajax通过电线发送的格式。我得到的错误是：

Uncaught TypeError: Illegal invocation

有人可以帮助我，以下是代码：

function process_image(img) {
    var url = "http://random.com/process_image";
    $.ajax({
        url: url,
        type: " POST ",
        crossDomain: true,
        dataType: " json ",
        data: {
            image: img
        },
        // Work with the response
        success: function (response) {
            console.log(response); // server response
        },
        error: function (response) {
            console.log(response);
        }
    });
}
function setup() {
    createCanvas(900, 900);
    capture = createCapture(VIDEO);
    capture.size(320, 240);
    //capture.hide();
}
function draw() {
    background(255);
    image(capture, 0, 0, 320, 240);
    filter('INVERT');
    process_image(capture);
}

Answer 1

您在 var url = "http://random.com/process_image;

中有缺少的报价

function process_image(img)
{
    var url = "http://random.com/process_image";
    $.ajax(
    {
        url: url,
        type: "POST",
        crossDomain: true,
        dataType: "json",
        data:
        {
            image: img
        },
        // Work with the response
        success: function(response)
        {
            console.log(response); // server response
        },
        error: function(response)
        {
            console.log(response);
        }
    });
}
function setup()
{
    createCanvas(900, 900);
    capture = createCapture(VIDEO);
    capture.size(320, 240);
    //capture.hide();
}
function draw()
{
    background(255);
    image(capture, 0, 0, 320, 240);
    filter('INVERT');
    process_image(capture);
}

Answer 2

就像您发现的那样，问题是capture是P5.Image，这不是可以简单地上传到服务器的东西。这不是图像文件。这是特定于p5.js的数据结构，可以在p5.js。

中呈现图像。

因此，您需要将P5.Image转换为可以上传到服务器的文件。您可以查看P5.Image.save()功能，该功能将P5.Image作为文件保存在客户端的文件系统上。

您还可以探索创建P5.Image的内存版本。首先，您将使用P5.Image.get()函数从图像中获取像素数据，然后将该数据转换为要上传的任何格式。