이미지 src를 데이터 URL로 설정하면 즉시 사용할 수 있습니까?

이미지 src를 데이터 URL로 설정하면 즉시 사용할 수 있습니까?

---

다음 (깨지기 쉬운) JavaScript 코드를 고려하십시오.

var img = new Image;
img.src = "data:image/png;base64,..."; // Assume valid data

// Danger(?) Attempting to use image immediately after setting src
console.log( img.width, img.height );
someCanvasContext.drawImage( img, 0, 0 );

// Danger(?) Setting onload after setting src
img.onload = function(){ console.log('I ran!'); };

질문 (들)

• 이미지 너비와 높이가 즉시 정확해야합니까?
• 캔버스 그리기가 즉시 작동해야합니까?
• 해야 onload콜백합니다 (SRC 후 설정이 변경되었습니다) 호출?

실험 테스트 비슷한 코드
로 간단한 테스트 페이지 를 만들었습니다 . 사파리 내 첫 테스트, 로컬 HTML 페이지를 열어 모두 (에서 file:///URL) 내 서버의 부하를 보여 주었다 모든 것이 작동 : 높이와 너비가 올바른지, 캔버스는 작품을 그릴, 그리고onload 도 발생합니다.

Firefox v3.6 (OS X)에서 브라우저를 시작한 후 페이지를로드하면 설정 직후 높이 / 너비가 올바르지 않음이 표시되어 drawImage()실패합니다. (그러나 onload핸들러는 실행됩니다.) 그러나 페이지를 다시로드하면 설정 및 drawImage()작업 직후에 너비 / 높이가 올바른 것으로 표시 됩니다. Firefox는 데이터 URL의 내용을 이미지로 캐시하고 동일한 세션에서 사용할 때 즉시 사용할 수있는 것처럼 보입니다.

Chrome v8 (OS X)에서는 Firefox에서와 동일한 결과가 표시됩니다. 이미지를 즉시 사용할 수는 없지만 데이터 URL에서 비동기식으로 '로드'하는 데 시간이 걸립니다.

위의 브라우저가 작동하는지 여부에 대한 실험적 증거 외에도 이것이 작동하는 방식에 대한 사양 링크를 정말 좋아합니다. 지금까지 내 Google-fu는 작업에 적합하지 않았습니다.

안전하게 플레이하기
위의 내용이 왜 위험한지 이해하지 못하는 사람들은 안전을 위해 다음과 같은 이미지를 사용해야합니다.

// First create/find the image
var img = new Image;

// Then, set the onload handler
img.onload = function(){
  // Use the for-sure-loaded img here
};

// THEN, set the src
img.src = '...';

---

아무도 아직이 방법에 대한 사양을 발견함에 따라 가정 행동을, 우리는 어떻게 만족되어야 할 것이다 않는 동작합니다. 다음은 내 테스트 결과입니다.

            | 사용할 수있는 이미지 데이터입니다 | src 후에 onload 콜백을 설정합니다.
            | src 설정 후? | 변경이 여전히 호출됩니까?
------------ + ----------------------------- + ------- ------------------------------
Safari 5 | 예 | 예                
------------ + ----------------------------- + ------- ------------------------------
Chrome 8 | ** 아니요 ** (첫 페이지로드),하지만 | 예                
FireFox 3.6 | 예 (캐시 됨) |                                     
------------ + ----------------------------- + ------- ------------------------------
IE8 | 예 (32kB 데이터 제한) | 예         
------------ + ----------------------------- + ------- ------------------------------
IE9b | 예 | **아니**              
------------ + ----------------------------- + ------- ------------------------------

요약하자면:

• data-uri를 설정 한 직후에 이미지 데이터를 사용할 수 있다고 가정 할 수 없습니다. onload이벤트를 기다려야합니다 .
• IE9로 인해를 설정 한 onload후 처리기를 설정할 수 없으며 src호출 될 것으로 예상됩니다.
• "안전하게 실행하기" (위 질문 에서)의 권장 사항은 올바른 동작을 보장하는 유일한 방법입니다.

누구든지 이것에 대해 논의하는 사양을 찾을 수 있다면, 대신 그들의 대답을 기꺼이 받아 들일 것입니다.

---

After giving control back to the browser's rendering engine, the test reports true in FF 4b9 and Chromium 8.0.552.237. I modified these parts:

img.onload = function(){   // put this above img.src = …
    document.getElementById('onload').innerHTML = 'yes';
};
img.src = img_src;
…
window.setTimeout(function () {   // put this inside setTimeout
    document.getElementById('wh').innerHTML = (img.height==img.width) && (img.height==128);
}, 0);

Update: Yes, I understand this 'answer' is more like a comment, but just wanted to point it out. And after testing I get reproducible results:

• without setTimeout, in both browsers I get false the first time I open the page and true only after hitting F5. After explicitly clearing the cache both say false again after reloading.
• with setTimeout the width/height test always evualuates to true.

In both cases the image doesn't show up the first time, only after reloading the page.

참고URL : https://stackoverflow.com/questions/4776670/should-setting-an-image-src-to-data-url-be-available-immediately