› ›

Using loadImage with p5 drop

jonhaberjonhaber
edited August 2015 in p5.js Programming Questions

More more question on images...

I have implemented the drop p5 example http://p5js.org/examples/examples/Dom_Drop.php

function setup() {
  // create canvas
  var c = createCanvas(710, 400);
  background(100);
  // Add an event for when a file is dropped onto the canvas
  c.drop(gotFile);
}

function draw() {
  fill(255);
  noStroke();
  textSize(24);
  textAlign(CENTER);
  text('Drag an image file onto the canvas.', width/2, height/2);
  noLoop();
}

function gotFile(file) {
  // If it's an image file
  if (file.type === 'image') {
    // Create an image DOM element but don't show it
    var img = createImg(file.data).hide();
    // Draw the image onto the canvas
    image(img, 0, 0, width, height);
  } else {
    println('Not an image file!');
  }
}

and I am trying to merge this code with some p5 image processing code that makes use of the loadImage() function:

eg.

img = loadImage("..\test.jpg");

because using loadImage lets me use the get() function

eg,

img.get()

using the drop example and createImage instead of loadImage doesn't allow me to use get()

how can I do droping of files but use the loadImage function with the data the example above gives me

put another way

if I try to use img.get() using the drop example I get the following error:

"Uncaught TypeError: img.get is not a function"

cheers!

Tagged:

Best Answer

Answers

Sign In or Register to comment.