Edit: I do want the sketch to keep looping, though, that's the thing.

loadImage() from createImg()-p5.dom

or

loadImage() from a data URI, such as "data:image/jpg;base64,{base 64 encoded data block}"

The createImg() comes from an createFileInput(), and I want o be able to resize() that image.

Thanks for your help!

Code below:

function setup() {
    createFileInput (handleFile);
    createCanvas (800, 400);
    background (245);
}

function draw() {
    strokeWeight (10);
    stroke (0, 255,0);
    line (pmouseX, pmouseY, mouseX, mouseY);
}

function handleFile (file) {
  if (file.type === 'image') {
    var img = createImg (file.data).hide();
    print (img);

    //img.resize (width, 0);
    image (img, 0, 0);
  }
}

I'm follow Shiffman incredible lessons on using P5js with chrome extensions.

In the example of the Canvas sketch with chrome extensions I followed, I wanted to do some more. Add gifs in the canvas overlaying the top layer of the browser viewing.

My attempt was unsuccessful.. The gif doesn't play..

So what did I do. I used this example to import gif in to p5js put it in my sketch.js as this:

console.log('sketch blah');

var s = function(sketch) {
var img; //declare image

sketch.setup = function() {
  document.body.style['userSelect'] = 'none';
  let h = document.body.clientHeight;
  let c = sketch.createCanvas(sketch.windowWidth, h);
  img = sketch.loadImage("https://" + "media.giphy.com/media/xUOxfnlpG1tsYGFI40/giphy.gif");
  c.position(0,0);
  c.style('pointer-events', 'none');
  sketch.clear();
}

sketch.draw = function() {
  console.log('sketch Looping');
  sketch.image(img, 0, 0);
  //sketch.background(0);
  }
};

var myp5 = new p5(s);

My manifest.json looks like this.

  {
    "manifest_version": 2,
    "name": "Agent Extension",
    "version": "0.0002",
    "web_accessible_resources": [
      "gif/*.gif"
    ],
    "content_scripts": [
      {
        "matches": [
            "<all_urls>"
        ],
        "js": ["p5.js","p5.dom.js","p5.gif.js","p5.gif.min.js", "sketch.js"]

      }
    ],
    "background": {
      "scripts": ["background.js"]
    },
    "browser_action": {
      "default_icon": "img.png"
    }
  }

all the files are in the wright place.

I get this error in the browsers console

sketch.js:18 Uncaught ReferenceError: image is not defined
    at sketch.draw (sketch.js:18)
    at p5.redraw (p5.js:50266)
    at p5.<anonymous> (p5.js:44917)
    at p5.<anonymous> (p5.js:44812)
sketch.draw @ sketch.js:18
p5.redraw @ p5.js:50266
(anonymous) @ p5.js:44917
(anonymous) @ p5.js:44812

I did define it, my guess it is not defined for the browsers standards

I want to have a few 'objects' on the canvas and other types of code taking over the content as end goal.

button = createButton(img5); button.position(100, 100); //test position, not final button.mousePressed(gotoGame);

Any help on this? Thanks.

the test looks like this:

As you can see it shows the html image, the live canvas, but not the p5 Image. In console the cross-domain error

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

the code goes like:

var canvas;

// window size
var w , h ;

// canvas width and height
var cw, ch;

//canvas positioning
var cx, cy;

// % of w to be canvas size
var w_prop = 1.;
var h_prop = 1.;

//img url
var imgURL = 'http:'+'//www.clker.com/cliparts/9/0/f/5/1194986802274589086football_ball_brice_boye_01.svg.med.png';

var img;
var htmlImg;


function setup() {

  // window size
  w = windowWidth, h = windowHeight;

 // calc everything
 calcSizes();

 // create canvas
 canvas =  createCanvas(cw, 100);//thats temp hard number

 // positining
 canvas.position(cx, cy);

img =  loadImage(imgURL);

 // this works
 htmlImg = createImg(imgURL);



}



function draw() {
    background(frameCount%255, 130,0);

    //this don't
    image(img,100,100);


}



// if window is resized, recalc stuff.
function windowResized(){
    calcSizes();
    resizeCanvas(cw, ch);
    canvas.position(cx,cy);
}


// that's it
var calcSizes = function(){
    w = windowWidth, h = windowHeight;

    // canvas width and height
    cw = w * w_prop;
    ch = h * h_prop;

    //canvas positioning
     cx = 0;//(w - cw) / 2.0;
     cy = 0;//100.0;
}

var img;  
function preload() {   
img = createImg("dancegif.gif");
}

function setup(){
    createCanvas(window.innerWidth,window.innerHeight); 
}

function draw(){
    background(255);

  img.position(0,0);

    // flashing effect 
    noStroke();
    if(frameCount % 7 < 3 ){
      noFill(); //pic 33%  12 
    } else if(frameCount % 7 > random(3,4) ){
        fill(255);//white 33% 56 
    } else{
        fill(0);//black 34% 
    }
    rect(0,0,window.innerWidth,window.innerHeight);

}

How can I define where the img tag should be inserted into the DOM?

For example I'd like it to be inserted inside an existing div with the id of "img-container".

I googled the vanilla javascript way of doing this with appendChild(); however I got a "Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'" error.

Using createImg() creates a p5.dom img object, as opposed to a p5.image, so I attempted to use loadImage(file.data) where file.data is the src as opposed to a string pointing to a local file. This returns a p5.image object, however the pixels[] array returns as pixels: Uint8ClampedArray[4] instead of 'pixels:Array[0]' when the same image is loaded in setup using var img = loadImage("test.jpg");, though my assumption is that there's no real difference between the two as it's just returning information about the buffer being used.

The interesting thing is that console logging the width and height of the image loaded in setup reads 1920 x 1080, whereas the width and height of the image loaded using drop() reads as 1 x 1, despite showing up in the debugger as having the same properties..

Any thoughts?

Note: this used to work correctly in a previous version of the library (p5-v0.4.3 April 09, 2015)

To show you the problem, I started from the Drop example on the website (http://p5js.org/examples/examples/Dom_Drop.php).

I modified the code just a little bit :

Changes:

1) now the image is draw in the draw loop image(img, 0, 0, width, height);

2) the noLoop() was removed because I need the loop to perform an animation.

Problem: As you can see, the image is always hidden. If I remove the .hide(), the image is draw correctly in the loop but the original one is also not hidden and is displayed just below the canvas.

    var img = null;
    function setup() {
      var c = createCanvas(710, 400);
      background(100);
      c.drop(gotFile);
    }

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

    function gotFile(file) {
      if (file.type === 'image') {
        img = createImg(file.data).hide();
      } else {
        println('Not an image file!');
      }
    }

Other relevant links I found are: http://forum.processing.org/two/discussion/comment/42053/#Comment_42053 http://extrapixel.github.io/gif-animation/

Thanks.

image(myimages[imgselected], 0, 0);

But then, don't seem to be able to remove it. Don't see a remove image function available. And when I try to just move it offscreen, it seems to make a copy of it at the new location. Ie:

image(myimages[imgselected], -1000, -1000);

Just makes a copy of the image at -1000,-1000 and leaves the original in-tact at 0,0.

I have noLoop() turned on, in case this is an issue with not hitting the draw loop?

thx for any pointers.

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!

Using an image like this to test my program.:

When I move my mouse over parts of the blocks of colour I sometimes get weird value or move the mouse from one block to the next produced weird output. The only weird colour values if present should be where two colours meet and there is some colour blending, otherwise every pixel of each bar should be the same colour but getting results that say otherwise.

Ideas on this one???

var state = 0;

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);
  if (state == 0){
  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);
    state = 0;
  } else {
    println('Not an image file!');
  }
}

function mouseMoved(){
    var color_under_mouse = get(mouseX, mouseY);
    println(mouseX);
    println(mouseY);
    println(color_under_mouse);
}

The values of the colours are being printed every time the mouse is moved using a standard print statement.