Jquery - 从 url 加载图像并将其绘制在画布上答案

【问题标题】：Jquery - Load an image from url and draw it on canvasJquery - 从 url 加载图像并将其绘制在画布上
【发布时间】：2013-12-13 16:11:40
【问题描述】：

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

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);
}

请问我该怎么做？

谢谢

【问题讨论】：

标签： javascript jquery canvas load

【解决方案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

}

【讨论】：

【解决方案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();

然后，当所有图像都加载完毕后，您只需遍历与 url 列表顺序相同的图像数组：

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

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

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

【讨论】：