처음로드시 Firefox에서 이미지를 캔버스에 그리거나 Ctrl + F5를 눌러 다시로드하지 마십시오.

문제는 Firefox의 문서를 처음로드 할 때 이미지가 캔버스에 그려지지 않는다는 것입니다 (버전 34). 그것은 IE에서 작동합니다.처음로드시 Firefox에서 이미지를 캔버스에 그리거나 Ctrl + F5를 눌러 다시로드하지 마십시오.

문제점을 설명하기위한 최소 샘플 페이지를 만들었습니다. 코드로 HTML 파일을 만들고, png 파일을 사용하고, 파이어 폭스에서 파일을로드하여 재현 할 수 있어야합니다. 너비와 높이는 내 그림의 너비와 높이이며 이미지 크기 만 사용하면됩니다.

캔버스 앞에 img 태그를 추가하여 자바 스크립트 코드를 실행하기 전에 이미지를로드해야합니다. 그러나 첫 번째로드 후에 F5 키를 다시 누르면 캔버스가 이미지를 그립니다. Ctrl + F5를 누르면 이미지가 사라집니다. 다시 F5 ... 사진이 나온다. 캐시가 비게되면 도면이 작동하지 않습니다.

내가 파이어 폭스에서 이것을 막을 수 있는지 아는 사람이 있습니까? (IE에서 작동하므로 크롬을 테스트하지 않았습니까?) 나는 그림을 그리기 전에해야 할 일을 간과 했습니까?
아마도 내가 잘못하고있는 것이 있습니까?

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
    <img src="ball.png"/> 
    <canvas id="canvas" height="100" width="100"></canvas> 
    <script> 
     var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); 
     var internal_image = new Image(); 
     internal_image.src = "ball.png"; 
     internal_image.width = 18; 
     internal_image.height = 19; 
     context.drawImage(internal_image, 10, 10); 
    </script> 
</body>

이 그림은 단지 하나 개의 파일 샘플입니다

. 사실은 내가 jQuery를 사용하고 있는데 코드는

기능 .ready

$ (문서)에서 실행됩니다.

출처

2014-12-06 Uwe

이미지의 load 함수 내부에서 drawImage 함수를 호출하여 이미지를 그리기 전에 실제로로드되었는지 확인하십시오.

var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); 
var internal_image = new Image(); 
internal_image.src = "ball.png"; 
internal_image.width = 18; 
internal_image.height = 19; 

internal_image.addEventListener("load", function() { 
    context.drawImage(internal_image, 10, 10); 
}, false);

출처

2014-12-06 18:22:04

작동합니다. 파이어 폭스에서 원래의 코드가 작동하지 않는 이유를 알고 있습니까? – Uwe

IE에서 작동하는 것이 가장 좋았을 가능성이 가장 높습니다 :) 이미지가 방금'.drawImage() '를 호출하기 전에로드 할 수 있었기 때문에 캐시에서 FF로도 작동하는 이유가 설명되었습니다. –

처음로드시 Firefox에서 이미지를 캔버스에 그리거나 Ctrl + F5를 눌러 다시로드하지 마십시오.

답변

관련 문제