1

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

}
Damian
  • 2,752
  • 1
  • 29
  • 28
jas
  • 580
  • 1
  • 7
  • 18

2 Answers2

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);
}
Daniel Corzo
  • 1,055
  • 2
  • 19
  • 32
  • thanks, i fixed that, that was just an issue in copying over the code, I still have the original problm – jas Dec 28 '16 at 22:33
  • 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. – jas Dec 28 '16 at 22:42
  • @jas, you should convert the image to base64 string. See http://stackoverflow.com/a/21927091/2026740 – Daniel Corzo Dec 28 '16 at 22:51
  • 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. – jas Dec 28 '16 at 23:17
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.

Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
  • 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? – jas Dec 29 '16 at 16:43
  • @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. – Kevin Workman Dec 30 '16 at 02:27