Jquery - URL에서 이미지를로드하고 캔버스에 그립니다.

Question

URL에서 여러 이미지를로드하고 캔버스 요소에 그려야합니다. 하지만로드해야하는 각 이미지에 대해 동일한 코드를 다시 만들고 싶지는 않습니다.

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를 여러 번 호출 한 후 캔버스에 모든 이미지를 그리는 싶습니다 :

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

이상적으로 오류 처리기 (안 여기에 표시)를 제공한다뿐만 아니라 진행 핸들러를 제공하는 옵션이 있습니다.

교육적인 목적으로이 도구를 사용하려는 경우 해당 소스 코드를 살펴보십시오.