jquery/canvas에서 이미지 미리 불러 오기 "Uncaught TypeError : 유형 오류"

Question

필요시 표시 할 준비가되도록 이미지 디렉토리를 캔버스에 미리로드하고 싶습니다.

I found this question on stackoverflow 허용되는 대답은 매우 유용했습니다. 이 함수는 이미지 위치 배열을 반복하고 캔버스에 미리로드합니다.

일단이 기능을 사용하여 미리로드되면 실제로 표시하는 데 어려움이 있습니다. 나는 그들이 이미로드되어 있기 때문에

img = new Image(); 
img.src = imgLocation; 
img.onload = function() { 
    context.drawImage(img, 0, 0); 
} 

는하지만, 내가 난에 context.drawImage를 제외하고 img.onload 또는 위의 코드 중 하나를 사용할 필요가 없습니다 가정 오전 외 단일 이미지 로딩 방법을 잘 알고 있어요 실제로 이미지를 표시합니다.

이미지를로드하려고 할 때 (내가 예상 할 수있는 것은 모든 이미지가있는 출력 된 배열입니다) 유형 오류이 표시됩니다.

var framesArr = new Array(); 
var framesAmnt = 300; // we would normally get this number from the PHP side of things 

function ldBtn(){ 

    //load all frames locations into framesArr 
    var i=0; 
    for (i=0;i<=(framesAmnt-1);i++){ 
     framesArr[i] = "frames/Frame" + i + ".png"; 
    } 

    //preload them 
    preloadImages(framesArr, preloadDone); 
} 

var deferreds = []; 
var deferred; 

function preloadImages (paths, callback) { 

    $.each(paths, function (i, src) { 
     deferred = $.Deferred(), 
     img = new Image(); 

     deferreds.push(deferred); 
     img.onload = deferred.resolve; 
     img.src = src; 
    }); 

    $.when.apply($, deferreds).then(callback); 
} 

function preloadDone(){ 
    //any old index number will do. *Shruggs* 
    context.drawImage(deferreds[2], 0, 0); //this will cause a type error. 
} 

가 어떻게이 preloadImages에 의해로드 된 캔버스에 이미지를 표시 할 수 있습니다 내가 어떤 인덱스 (A console.log() 포함) 배열 안에 무엇을 검사 할 때 그것은 [object, Object]

내 코드 코드는 다음과 같습니다 말한다 기능?

img = new Image();img.src = imgLocation;img.onload = function()이 발생하면 어떻게되는지 완전히 이해하지 못한다고 생각합니다. javascript/jquery는 이미지를 무엇으로 저장하나요? 대답이 '객체'인 경우이 배열의 객체를로드하지 않는 이유는 무엇입니까?

제공 할 수있는 조언을 미리 주셔서 감사합니다.

Answer 1

우선, 실제 이미지 요소를 drawImage 메소드로 전달해야합니다. 이제 지연을 전달합니다.

다음으로 Chrome 및 기본 요소 생성자 (new Image())의 버그가 있습니다.

따라서 버그없이 정확하게 똑같은 작업을 수행하는 document.createElement("img")을 사용하면됩니다. 캔버스에 대해

• :

  는 관련 버그를 참조 https://code.google.com/p/chromium/issues/detail?id=238071

• 근본 원인 :

https://code.google.com/p/chromium/issues/detail?id=245296 내가 여기 감소 된 예를 작성 : http://jsfiddle.net/YVDpD/