0

次のコードが、選択したすべてのアイテムを表示することがあり、ほとんどの場合、一部を表示し、ほとんどの場合3回目の試行で、単に何も表示されない理由がわかりません。

複数回の試行で異なることを行うため、エラーの原因を特定できません。

たとえば、3枚の画像を読み込んだ場合、それらは表示されません（検査要素から、私はそれらを見ることができます）。次に、前の3枚が含まれている7枚の画像を読み込んだ場合、3枚しか表示されません。

Chromeを使用しています。シンプルなコードに見えます。これが完全なコードです（同じフォルダに写真が必要です）：

<!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>
4

1 に答える 1

1

あなたはいくつかのことをする必要があるでしょう：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];
}

私はそれが単に次のように書くこともできることに気づきました：

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];
}
于 2012-12-07T18:14:22.897 に答える