Get Images From Web Page

Method 1: Use getImagesFromWebPage(id).

CanvasClass has a new function that loads an image (normally hidden) from the web page given its id. This function works like loadImage when used in setup. Advantages:

  • There is no need to a local server when run locally.
  • preload is not needed.
  • Appears to be synchronous. The URL and image size were added immediately after loading the image.

HTML code for this example:

<body>
<img src = "heart.png" id = "photo" alt = "heart" style = "display:none">

Method 2: Allow user to click on thumbnail placed on page using HTML.
Click on one of the three images to load it into the canvas.

The images were added to the page using HTML img statements that specified the width as being 100. p5.js code added the click event listener. The event function created an image and displayed it along with the textual information.
 

flower sleigh Grand Canyon
Method 3: Allow user to click on thumbnail placed on the page using p5.js.
Usage: drag and drop an image on the above canvas. A thumbnail will appear in the tray.

Code in the p5.js file will put the thumbnails on the webpage. One common way of determining which files to display is to let the user drop one or more on the canvas. Normally one would display one of the dropped files on the canvas immediately but this program just put them in the "tray" and lets the user click the one to be displayed.
Tray for Method 3  

The p5.js file: getImageFromWebPage.pjs

James Brink, 8/29/2020