2014-09-04 4 views
3

localhost에서 코드를 실행 해 봅니다. 이것은 mozilla firefox로 이미지를 표시하지 않지만 다른 브라우저에서는 성공적으로 표시됩니다. 내가 작은 이미지로드를로드하려고하면 성공적으로 여기HTML5 canvas drawImage()가 Firefox에서 큰 이미지를 그려 내지 않습니다

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<canvas id="containerScaled"></canvas> 
<script> 
$(document).ready(function() { 
    var canvasScaled = document.getElementById("containerScaled"); 
    var ctxScaled = canvasScaled.getContext("2d"); 

    var imageWidth = 500; 
    var imageHeight = 500; 


    img = new Image(); 
    img.onload = function() { 
     ctxScaled.drawImage(img, 0, 0, imageWidth, imageHeight); 
    }; 

    img.src = 'http://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg' 
}); 
</script> 
+1

내가 그 이미지로 잘못된 행동을 확인합니다. 특정 이미지가 FF로로드되지 않는 원인이있는 것으로 보입니다. 다른 대형 이미지는 오류없이 FF로 정상적으로 작동합니다. – markE

+1

나는이 사실을 실제로 얻었습니다. 파이어 폭스에서 정확한 코드를 사용하면 ... 10,000px 와이드 이미지를 500px로 축소 할 수 있기 때문에 일부 컴퓨터에서 문제가 될 것이라면 놀랄 일이 아닙니다. – ericjbasti

+1

어쩌면 누군가가이 문제가 어디로 가야하는지 조언 할 수 있습니다. – Asker

답변

0

는이 맥락에서 모습입니다 :

$(document).ready(function() { 
 
    var canvasScaled = document.getElementById("containerScaled"); 
 
    var ctxScaled = canvasScaled.getContext("2d"); 
 

 
    var imageWidth = 500; 
 
    var imageHeight = 500; 
 

 

 
    img = new Image(); 
 
    img.onload = function() { 
 
     ctxScaled.drawImage(img, 0, 0, imageWidth, imageHeight); 
 
    }; 
 

 
    img.src = 'http://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg' 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="containerScaled"></canvas>

관련 문제