Getting nothing when trying to show image with the help of HTML tag

p5.js Coding Questions
1

I noticed that when I was trying to show an image on canvas with the help of HTML tags(i.e input tag and type is file) the codebase wasn’t showing an image and when I was trying to show with the help of p5.js function createFileInput(readImageURL); then it is going to show.

This is the sample code snippet that demonstrates the problem and their alternative solution.

When I was trying to do like the following…

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
    <meta charset="utf-8" />

  </head>
  <body>
    Upload image: <input type="file" name="image" onchange="readImageURL(this);" >
    <script type="text/javascript" charset="utf-8">
          let img;
          function setup() {
               var canvas = createCanvas(400, 400);
          }

          function draw() {
               background(255);
               if (img) {
                    image(img, 0, 0);
               }
   
          }

          function readImageURL(file) {
               print(file);
               if (file.type === 'image') {
                     img = createImg(file.data, ' ');
                     img.hide();
              } else {
                     img = null;
              }

    </script>
  </body>
</html>

it wasn’t going to show an image on the canvas.

and then when I was tried to show an image like the following…

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
    <meta charset="utf-8" />

  </head>
  <body>
    
    <script type="text/javascript" charset="utf-8">
          let img;
          let input;
          function setup() {
               var canvas = createCanvas(400, 400);
               input = createFileInput(readImageURL);
               input.position(0,0);
          }

          function draw() {
               background(255);
               if (img) {
                    image(img, 0, 0);
               }
   
          }

          function readImageURL(file) {
               print(file);
               if (file.type === 'image') {
                     img = createImg(file.data, ' ');
                     img.hide();
              } else {
                     img = null;
              }

    </script>
  </body>
</html>

It was going to show a image on canvas. I’m not understanding why it’s going to happen.

1 Like
2

Hi RadheTians. I’m not sure I’m understanding the problem. Is it that the image is displaying on the p5.js canvas, but you prefer it to draw via html? For the html element, I think you use img.show() and img.hide(). If you prefer the p5.js canvas, from the draw() function, call image(img,x,y) to draw or do nothing if you want to hide it.

Does that help, or are you experiencing another issue?

2 Likes
3

I’ve got this runnable online example, but using drop() instead of createFileInput(): :file_folder:
http://p5js.SketchPad.cc/sp/pad/view/ro.CYTkHWj9smgw8Q/latest

2 Likes
4

Hello, @bzSteve thanks for your response and sorry for late reply, Actually I am trying to show an image with the help of HTML tag(i.e input tag and type is file) and but I’m getting an error and if I try to show by p5.js function createFileInput() then it’s going to work well.

5

Hello @GoToLoop thanks for your response but I need to show an image by HTML tag (i.e input tag and type file).

6

You can create HTML tags as placeholders w/ an unique id: :label:

Then, inside your p5js sketch, call method parent() in order to make any p5.Element a child of 1 of those placeholders already predefined in your “.html” file: :bulb:

7

Here’s an example where method parent() is invoked on the sketch’s canvas itself, so it appears between 2 <img> tags:


For that a <p> placeholder is predefined in the “index.html” w/ an id named “between”:

<img width=400 src=http://www.ABunchOfFailures.com/gifs/CatchIt.gif>

<p id=between></p>

<img width=400 src=http://www.ABunchOfFailures.com/gifs/beexcellenttoeachother.jpg>

And inside “sketch.js”, we make the canvas a child of that between <p> placeholder tag:
createCanvas(400, 400).parent(between);

We can do the same for any p5.Element subclass type btW.