Question

我正在使用p5.js及其视频捕捉功能来使用相机。我想使用ajax来获取这些图像并将它们上传到服务器。我不知道如何将p5.js Image对象转换为我可以用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转换为可以上传到服务器的文件。您可以查看the P5.Image.save() function，将P5.Image作为文件保存到客户端的文件系统中。

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

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

2 个答案: