Can't draw imported image through input file

Question

I am trying to load an image with an html input type="file" and load it to an with javascript without success.

Here is my code so far:

HTML:

<canvas class="imported" id="imported"></canvas>
<button class="import_button" id="import_button">Import a picture</button>
<input type="file" id="imgLoader"/>

JAVASCRIPT:

document.getElementById('import_button').onclick = function() {
    document.getElementById('imgLoader').click();
};

document.getElementById('imgLoader').addEventListener('change', importPicture, false);

function importPicture()
{
    alert("HERE");
    var canvas  = document.querySelector('#imported');
    var context = canvas.getContext("2d"); 
    var fileinput = document.getElementById('imgLoader');
    var img = new Image();

    var file = document.getElementById('imgLoader').files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(evt)
    {
        alert("THERE");
        if( evt.target.readyState == FileReader.DONE)
        {
            alert("AGAIN");
            img.src = evt.target.result;
            context.drawImage(img, 200, 200);
        }
    } 

}

The alerts are all fired up, no errors or message in the console..

How can I load it and display it? Thank you!

Your html doesn't have a canvas, and you don't have a canvas variable setup. — Get Off My Lawn, May 16 '19 at 16:14
what does "can't" mean? What goes wrong in the code? Do you get an error at some point? Have you tried to debug it? — ADyson, May 16 '19 at 16:24
@ADyson Nothing happens actually, no error in the console, nothing — Martin, May 16 '19 at 16:25
The logic seems a bit screwy to me... `document.getElementById('imgLoader').addEventListener('change', importPicture, false);` adds a change event to the file input. Then within the "importpicture" function, which runs when the file input changes, you add another change event listener (via `fileinput.onchange`) ...why are you doing that? I can't see how it makes sense. It means you have to change the file again before the code in there runs. And it also means that every time you change the file it adds more and more listeners, until you have lots of functions firing at once. — ADyson, May 16 '19 at 16:25
Have you tried stepping through it with the debugger, or adding some console logging? Does the importPicture function get executed? For the reason I've described above, even if the function gets executed, it might look like nothing is happening the first time, because it's then waiting for another change event to occur. — ADyson, May 16 '19 at 16:27
@ADyson You're right, thanks a lot, I updated the question with more infos and alerts. — Martin, May 16 '19 at 16:30

score 1 · Accepted Answer · answered May 16 '19 at 16:35

The logic (of your original code, not the edited version) is a bit baffling:

document.getElementById('imgLoader').addEventListener('change', importPicture, false);

adds a change event to the file input. That's fine. But then within the "importPicture" function, which runs when the file input changes, you add another change event listener (via fileinput.onchange) ...why are you doing that? I can't see how it makes sense. It means you have to change the file again before the code in there runs. And it also means that every time you change the file it adds more and more listeners, until you have lots of functions firing at once.

The other problem is that you're not waiting for the data to be loaded into the Image object before you try to draw the image on the canvas. You also need to set the dimensions of the canvas itself, and not be prescriptive about the dimensions of the image (because the user could upload anything, of any size).

Here's a working demo:

document.getElementById('import_button').onclick = function() {
  document.getElementById('imgLoader').click();
};

var fileinput = document.getElementById('imgLoader').addEventListener('change', importPicture, false);

function importPicture() {
  var canvas = document.querySelector('#imported');
  var context = canvas.getContext("2d");
  var img = new Image();
  var file = this.files[0];
  var reader = new FileReader();
  reader.onload = function(evt) {
    img.onload = function() {
      canvas.width = img.width;
      canvas.height = img.height;
      context.drawImage(img, 0, 0);
    }
    img.src = evt.target.result;
  }
  reader.readAsDataURL(file);
}

<canvas class="imported" id="imported"></canvas>
<button class="import_button" id="import_button">Import a picture</button>
<input type="file" id="imgLoader" />

Credit to this answer for the final bits.

Thank you very much, I am supernew to programming but I wasn't this far from the truth haha! — Martin, May 16 '19 at 16:40

Can't draw imported image through input file

1 Answers1