Home/ Questions/Q 8966555
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T17:02:57+00:00

i don’t understand why the following code, sometimes shows all the items i select,

  • 0

i don’t understand why the following code, sometimes shows all the items i select, most of the time shows some, and mostly in 3rd tries, simply doesn’t show anything.

Because it does different things on multiple tries, im unable to pinpoint the couse of error.

For example you load in 3 picture, it doesn’t show them (from inspect element i can see them), then you load in 7 pictures with the 3 previous included in them, it only shows thous 3..

I use Chrome. Looks Simple code.
here’s the full code(you have to have the pictures in the same folder):

<!DOCTYPE>
<html>
<head>
<style>
canvas{border: #090 1px solid;}

</style>
<script type="application/javascript" language='javascript'>
window.onload = draw;
window.onload = getFiles;
var namelist = [];
function draw(){
    // if it has canvas i remove and replace it, i just found 
    //.replaceChild so i'll be using it next time
    var dbody = document.getElementById('dbody');

    if (dbody.childNodes.length === 1){
        console.log(dbody.firstChild)
        can=document.getElementById('canvas')
        dbody.removeChild(can);
    }
    // Creating canvas
    var canvas = document.createElement("canvas");
    canvas.id='canvas'
    canvas.setAttribute('width',700)

    // create html5 context object to enable draw methods
    var ctx = canvas.getContext('2d');
    dbody.appendChild(canvas);
    var x = 10; // picture start cordinate
    var y = 10; // -------||---------
    var buffer = 10; // space between pictures
    // Insert images to canvas
    for (i=0; i<namelist.length; i++){
        var image = new Image();
        image.src = namelist[i];
        canvas.appendChild(image);
        ctx.drawImage(image,x,y,50,50)
        x+=50+buffer;
    }
}
function getFiles(){

    var picturesFiles = document.getElementById('pictures')
    picturesFiles.addEventListener('change', function(event){
        namelist.length = 0;// empty name list
        var files = picturesFiles.files;
        for (i=0; i< files.length; i++){
            namelist.push(files[i].name);
        }
        draw();
    }, true);

}

</script>
</head>
<body>
<div id='dbody'></div>
<div>
    <input type="file" id='pictures' multiple="">
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’ll need to do a few things: http://jsfiddle.net/NMtfc/2/

    for (i = 0; i < namelist.length; i++) {
    var image = new Image();

    canvas.appendChild(image);
    (function(img) {                         // this closure will allow us to maintain our reference to the image object correctly
        img.onload = function() {            // wait til the image loads
            ctx.drawImage(img, x, y, 50, 50)
            x += 50 + buffer;                // increment x here so it isn't the same for each element. 
        }
    })(image);
    image.src = namelist[i];
}

    I just realized that it can also be written simply as:

    for (i = 0; i < namelist.length; i++) {
    var image = new Image();
    image.onload = function() {
        ctx.drawImage(this, x, y, 50, 50)  // 'this' will refer to the image.
        x += 50 + buffer;
    };
    image.src = namelist[i];
}
    • 0