Question

我有一组图像对象，它们包含所有必要的信息，如path，x，y，w，h。现在我想在一个循环中在画布上绘制所有这些图像..但是当我这样做时，它只绘制第一个图像。这是代码：

for(var i=0; i<shapes.length; i++)
{
    var A = shapes.pop();
    if(A.name == 'image' && A.pageNum == pNum)
    {
        var img = new Image();
        img.src = A.path;
        img.onload = function() {
            context.drawImage(img, A.x, A.y, A.w, A.h); 
        }
    }
}

我检查了形状数组中的所有信息...在if条件内，在调用drawImage函数之前，每个图像的所有信息都是正确的但是由于某些奇怪的原因它不显示除了'last'之外的图像数组（最后弹出的数组）

Answer 1

您的图片加载代码有问题。

每个图像都需要一段时间才能加载，然后你用另一个新的Image（）覆盖了var img;

这是一个图像加载器的示例，只有在所有图像都已加载并准备好绘制后才会执行：

[警告：未经测试的代码 - 可能需要进行一些调整！ ]

// image loader

var imageURLs=[];  // put the paths to your images in this array
var imagesOK=0;
var imgs=[];
imageURLs.push("");
loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];

        // note: instead of this last line, you can probably use img.src=shapes[i].path;
    }      
}

function start(){

    // the imgs[] array holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]

    for(var i=0;i<shapes.length;i++){
        var shape=shapes[i];
        context.drawImage(imgs[i],shape.x,shape.y,shape.w,shape.h);
    }

}

Answer 2

我不明白你为什么要使用pop（）来获取你的对象数据。您可以使用shapes [i]表示法访问每个对象，并且作为奖励，在每个对象中存储图像句柄：

for(var i=0; i<shapes.length; i++)
{
    if(shapes[i].name == 'image' && shapes[i].pageNum == pNum)
    {
        shapes[i].img = new Image();
        shapes[i].img.src = shapes[i].path;
        shapes[i].img.onload = function() {
            context.drawImage(shapes[i].img, shapes[i].x, shapes[i].y, shapes[i].w, shapes[i].h); 
        }
    }
}

Answer 3

这是某种关闭的问题......比如，在图像加载之前完成循环或其他什么。对我有用的解决方案是将所有图像加载代码放在一个单独的函数中并从循环中调用该函数：

if(A.name == 'image' && A.pageNum == pNum)
{
    displayImage(A.path, A.x, A.y, A.w, A.h);

}
function displayImage(path, x, y, w, h)
{
    var img = new Image();
    img.src = path;

    img.onload = function() {
        context.drawImage(img, x, y, w, h);
    }
}

JavaScript中的drawImage（Canvas）

3 个答案: