Jquery - 從URL加載圖像並在畫布上繪製

Question

我試圖從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); 
} 

我怎麼能這樣做？

謝謝

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

然後，當所有的圖像加載您只需通過圖像陣列迭代這是在同一數量級URL列表：

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

理想情況下，你應該提供錯誤處理程序（這裏沒有顯示），而且提供進度處理程序，以及的選項。

如果您爲了教育目的而嘗試此操作，請查看它的源代碼。