HTML canvas allow user to load image from file

Question

I'm trying to make a feature on my canvas where the user clicks a load button that allows them to load an image from any file on their computer, and load the image in to fill the canvas. I've included what I have so far below:

function loadTool() {
  var img;
  this.name = "loadTool";
  this.icon = "assets/loadButton.png";
  img = loadImage("assets/star.png");

  this.draw = function() {
    background(img, 0, 0);
  }
}

I'm using the p5.js library. Rather than manually loading an image from loadImage, I'd like to allow the user to choose their own image saved on their computer, and fill the canvas with the image.

Kevin Workman · Accepted Answer · 2018-04-02 18:46:09Z

2

You can use the createFileInput() function provided by the P5.dom helper library.

From the reference:

var input; 
var img; 

function setup() { 
  input = createFileInput(handleFile); 
  input.position(0, 0); 
} 

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

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

answered Apr 2, 2018 at 18:46

Kevin Workman

42.3k12 gold badges72 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fuzzer Over a year ago

Do you have a JSfiddle available for this? I'd like to change it around without implementing it yet

Kevin Workman Over a year ago

@Fuzzer You can copy and paste this directly into the P5.js web editor.

Collectives™ on Stack Overflow

HTML canvas allow user to load image from file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related