Question

我正在尝试从URL加载多个图像，然后将它们绘制到canvas元素中。但我不想为我必须加载的每个图像重新创建相同的代码。

loadImage函数（它工作正常）：

function loadImage(divId, imgId, path, width, height) {
var img = $("<img />").attr({ 'id': imgId, 'src': path , 'width': width, 'height': height, 'style': "display:none"})
.load(function () {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
        alert('broken image: ' + imgId);
    } else {
        $("#" + divId).append(img);
    }
});

}

但是我想多次调用loadImage，然后在画布上绘制所有图像：

function myTheme()
{
    loadImage("ContentBox", "bottom", "http://mydomain/images/bottom.jpg", 400, 391);
    loadImage("ContentBox", "left", "http://mydomain/images/left.jpg", 400, 391);
    loadImage("ContentBox", "right", "http://mydomain/images/right.jpg", 400, 391);
    loadImage("ContentBox", "top", "http://mydomain/images/top.jpg", 400, 391);

    // I need to wait ALL loads before using getElementById (these lines below don't work)
    _imgBottom = document.getElementById("bottom");
    _imgLeft = document.getElementById("left");
    _imgRight = document.getElementById("right");
    _imgTop = document.getElementById("top");

    Context.drawImage(_imgBottom, 0, 0);
    Context.drawImage(_imgLeft, 0, 0);
    Context.drawImage(_imgRight, 0, 0);
    Context.drawImage(_imgTop, 0, 0);
}

我怎么能这样做？

由于

Answer 1

在开始使用之前，有很多方法可以加载所有图像。

以这种方式：

// image loader
var imagesOK=0;
var imgs=[];     // the fully loaded Image objects will be here in the imgs[] array


var imageURLs=[];  // put the paths to your images in the imageURLs[] array

// push the image urls into an array

imageURLs.push("http://mydomain/images/bottom.jpg");
imageURLs.push("http://mydomain/images/left.jpg");
imageURLs.push("http://mydomain/images/right.jpg");
imageURLs.push("http://mydomain/images/top.jpg");

// begin loading

loadAllImages();

function loadAllImages(){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {

                // start() is called when all images are fully loaded

                start();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

function start(){

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

    // imgs[0] == bottom.jpg
    // imgs[1] == left.jpg
    // imgs[2] == right.jpg
    // imgs[3] == top.jpg

}

Answer 2

如果您的目标是只需加载一堆图片就可以使用我的YAIL bulk image loader（MIT许可证=免费且灵活）。

只需设置加载程序（这只是执行此操作的众多方法之一，请参阅上面的链接以获取完整用法）：

var loader = (new YAIL({
    done: drawImages,
    urls: [
        "http://mydomain/images/bottom.jpg",
        "http://mydomain/images/left.jpg",
        "http://mydomain/images/right.jpg",
        "http://mydomain/images/top.jpg"
        ]
    })).load();

然后，当所有图像都已加载时，您只需遍历图像数组，该数组与网址列表的顺序相同：

function drawImages(e) {
    for(var i = 0, img; img = e.images[i]; i++)
        context.drawImage(img, 0, 0);
}

理想情况下，您应该提供错误处理程序（此处未显示），并且还可以选择提供进度处理程序。

如果您出于教育目的尝试此操作，请查看其源代码。

Jquery - 从url加载图像并在画布上绘制它

2 个答案: