upload image with ajax from camera using p5.js

Question

I am using p5.js and its video capture capability to use the camera. I want to use ajax to take some of those images and upload them to a server. I dont know how to convert a p5.js Image object into a format that I can use to send over the wire with ajax. The error I get is:

Uncaught TypeError: Illegal invocation

Can someone please help me with this, here is the code:

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

}

Notice ending quote in "http://random.com/process_image;

Daniel Corzo
– Daniel Corzo

2016-12-28 22:03:55 +00:00
Commented Dec 28, 2016 at 22:03 — Daniel Corzo
– Daniel Corzo, Commented Dec 28, 2016 at 22:03

Daniel Corzo · Accepted Answer · 2016-12-28 22:19:03Z

0

You have a missing quote in 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);
}

edited Dec 28, 2016 at 22:19

answered Dec 28, 2016 at 22:05

Daniel Corzo

1,0752 gold badges19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jas Over a year ago

thanks, i fixed that, that was just an issue in copying over the code, I still have the original problm

jas Over a year ago

saw that, might be related, but I dont think its the core issue, I want to convert the image object into something ajax can use, I have no idea how to do that.

Daniel Corzo Over a year ago

@jas, you should convert the image to base64 string. See stackoverflow.com/a/21927091/2026740

jas Over a year ago

I think that is closer, the issue is the image from p5 is not on the dom, so I need to convert p5's image format into some format where I can use the stackoverflow you mentioned or other format. I was trying to read through the p5js code to see how to convert the object, but not sure still.

Kevin Workman · Accepted Answer · 2016-12-29 02:47:35Z

0

Like you've discovered, the problem is that capture is a P5.Image, which isn't something that can be simply uploaded to a server. It's not an image file. It's a data structure specific to P5.js that can render images in P5.js.

So, you need to convert your P5.Image into a file that you can then upload to a server. You might check out the P5.Image.save() function which saves the P5.Image as a file onto the client's file system.

You might also explore creating an in-memory version of the P5.Image. You'd start by getting the pixel data from the image using the P5.Image.get() function, then you'd convert that data into whatever format you want to upload.

answered Dec 29, 2016 at 2:47

Kevin Workman

42.3k12 gold badges72 silver badges110 bronze badges

2 Comments

jas Over a year ago

yes, this exactly what im trying to figure out. Assuming I can figure out how to manipulate the P5.Image . How can I figure out the format I need to translate it to so I can transfer it over the wire with ajax?

Kevin Workman Over a year ago

@jas That's really up to you. It depends on the API you're posting to. There are several ways to encode an image to send it over the internet, and google is your friend with that one. Try something and post another question if you get stuck.

Collectives™ on Stack Overflow

upload image with ajax from camera using p5.js

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related