p5js: sending still images through HTTP POST - image

Question

I'm using a simple p5.js programme to take a webcam stream and show a still image from this on the screen every few seconds.
let capture;
function setup() {
createCanvas(320, 240);
capture = createCapture(VIDEO);
capture.size(320, 240);
capture.hide();
}
function draw() {
if(frameCount % 120 == 0)
{image(capture, 0, 0, 320, 240);}
}
What I want to do then is to take each still image and convert it to a format that I can send using HTTP POST. The online manual is not helpful, and extensive internet searches haven't thrown up anything that works. Any good ideas, please?

Answer 1

Use .toDataURL() to convert the contents of a canvas element to string.
https://editor.p5js.org/EthanHermsey/sketches/bTvntCc35
let cnv;
let capture;
function setup() {
cnv = createCanvas(320, 240);
capture = createCapture(VIDEO);
capture.size(320, 240);
capture.hide();
}
function draw() {
//show live webcam feed
image(capture, 0, 0, 320, 240);
if (frameCount % 120 == 0){
captureFrame();
}
}
function captureFrame() {
// convert the graphics canvas to string, you can send that string in a POST request.
let imageBase64String = cnv.elt.toDataURL();
// for example purpose, after you retreive the string from the server with a GET request,
// convert it back to an image.
// let showImg = createImg(imageBase64String, "");
// showImg.hide();
// You can use
// image( showImg, 0, 0, 320, 240)
// to draw in on canvas.
}