Save to canvas

Lazarus118

Hi,

Just started using p5.js, and I was wondering if there's a work around for save(), to save an image to canvas as say the background, rather than downloading..

Thanks in advance.

lmccart

hm I'm not quite sure I understand the question, you want to get the canvas image to show up as the background of your page? or something else? could you post a little pseudo code that demonstrates what you're hoping to achieve?

Lazarus118

Yes :-*, I want to have the canvas image show up as the background from a capture.

Something like this.

var Image;
var capture;

    function setup() {
      createCanvas(780,480);
      capture = createCapture(VIDEO);
      capture.size(780, 480);
      capture.hide()
    }

    function draw() {
      background(Image);
      image(capture, 0, 0, 780, 480);
    }

    function mousePressed() { //Trigger for Capture button
      save(Image, 'image.png', true);
    } 

lmccart

ah I see. this is a good place to use p5.Graphics. something like this...

var img;
var capture;
var graphics;

function setup() {
  createCanvas(780,480);
  capture = createCapture(VIDEO);
  graphics = createGraphics(width, height);
  graphics.background(100);
  capture.size(780, 480);
  capture.hide()
}

function draw() {
  image(graphics, 0, 0, width, height);
}

function mousePressed() { //Trigger for Capture button
  graphics.image(capture, 0, 0, 780, 480);
}

lmccart

note that capture is not supported on all browsers: http://caniuse.com/#search=capture

Lazarus118

Thanks much, this is super helpful, will give a try... :)

Lazarus118

Had to do a bit of a workaround with the code to get it to work perfectly, as draw() is dependent on this piece of code for the live video

image(capture, 0, 0, width, height);

So a bit of simple boolean trickery did the trick..

var img;
var capture;
var graphics;
var changeGraphics = false;

function setup() {
  createCanvas(780,480);
  capture = createCapture(VIDEO);
  graphics = createGraphics(width, height);
  graphics.background(255);
  capture.size(780, 480);
  capture.hide()
}

function draw() {

  if (changeGraphics) {
  image(graphics, 0, 0, width, height);
  } else {
  image(capture, 0, 0, 780, 480);
  }
}

function mousePressed() { //Trigger for Capture button
  changeGraphics = true;
  graphics.image(capture, 0, 0, 780, 480);
}

Thanks again...

odiemonster

nevermind