아직 완전히로드되지 않은 이미지에 drawImage()를 사용하면 어떻게됩니까?

Question

이미지에 대한 참조를 drawImage API 인 canvas으로 전달했지만 이미지가 계속로드되는 경우 어떻게됩니까? 예외가 발생하거나 API가 부분 데이터로 진행하거나 API가 이미지가로드 될 때까지 차단됩니다.

Answer 1

canvas spec은 99 %가로드 되더라도 아무 것도 그려지지 않을 것이라고 지시합니다. 오류가 발생하지 않습니다.

당신이 그렇다면 : 이미지가 그려 얻을 것이라는 점을 보장하기 위해

var img = new Image(); 
img.onload = function() { 
    // Will occur only once the image is done loading 
    ctx.drawImage(img, 0, 0); 
} 
img.src = 'http://placekitten.com/300/300'; 

: 대부분의 사람들이 비슷한을 할 이유

var img = new Image(); 
img.src = 'http://placekitten.com/300/300'; 
// Might occur before the image is done loading (bad!) 
ctx.drawImage(img, 0, 0); 

이입니다.

Answer 2

나는 한 번 이것에 비틀 거렸다; 문제는 내가 img.onload을 사용하지 않아서 그려진 것을 보지 못했다는 것입니다.

http://jsfiddle.net/pimvdb/eGjak/100/으로 확인할 수 있습니다. 캐시는 처음에는 표시되지 않지만 캐시 때문에 다시로드됩니다.

가장 좋은 방법은 항상 onload을 사용하는 것입니다.

Answer 3

API는 캔버스에 아무 것도 그리지 않습니다. 캔버스에 포함 된 이미지로 다시 그리는 루프를 사용하지 않는 한 사용자는 이미지를 볼 수 없습니다. 일반적인 방법은 캔버스에 이미지가있는 onload를 사용하는 것입니다. 캔버스를 지원하는 모든 브라우저는 img.onload를 지원합니다. 루프 상황에서 이미지를 즉시 추가 할 수 있지만 다운로드하지 않으면 볼 수 없다는 것을 알고있을 수 있습니다.

Answer 4

The spec은 아무 것도 그려지지 않는다고 말합니다.

첫 번째 인수가 img, canvas 또는 video 요소가 아닌 경우 TYPE_MISMATCH_ERR 예외가 발생합니다. 이미지에 이미지 데이터가없는 경우 INVALID_STATE_ERR 예외가 발생합니다. 소스 사각형 치수 중 하나가 0이면 INDEX_SIZE_ERR 예외가 발생합니다. 이미지가 아직 완전히 디코딩되지 않은 경우 아무 것도 그려지지 않습니다.

나는 그것을 지옥에 넣어 보았습니다. 당신은 할 수있다 see the results here.

나는 기본적으로 이미지 로딩 속도를 늦추기 위해 PHP를 사용했다.

slowimage.php

<?php 
    sleep(3); 

    header('Content-type: image/png'); 
    echo file_get_contents('stackoverflow-logo-300.png'); 
?> 

index.html을 설립 한 바와 같이

<canvas id="canvas" width="512" height="512"> 

<script> 
    var img = new Image(); 
    img.onload = function() { 
     alert("image loaded"); 
    }; 
    img.src = "slowimage.php"; 

    var ctx = document.getElementById("canvas").getContext("2d"); 
    ctx.drawImage(img, 0, 0); 
</script> 

, 그리고 당신이 볼 수있는 바와 같이, 아무것도 그려지지 않습니다.