오류 : 이미지가 정의되지 않았습니다. Image() 함수를 사용하는 데 문제가 있습니다.)

Question

아주 단순한 코드를 사용합니다.하지만 Image.png 대신 내 이미지를 사용합니다. 캔버스에 배경 이미지를 제공하려고합니다.

var canvas = document.getElementById("canvas"); 
ctx = canvas.getContext("2d"); 

var img = new Image(); 
img.onload=start; 
img.src="Image.png"; 
function start(){ 
ctx.drawImage(img,0,0); 
} 

는하지만이 오류가 나타납니다 : 오류 : '이미지'가 정의되어 있지 않습니다. 나는 그런 오류가 사라

var img = document.createElement("img");

와 이것을 대체하려고

var img = new Image().

, 아무것도하지만, 디스플레이, 아무런 이미지는 단지 빈 : 부분에 대한 [노 미확정 없다]. 내가 뭘 잘못하고 있는지 아무도 모른다. 미리 감사드립니다.

전체 코드

var document; 
var ctx; 
var window; 

window.onload = function() { 
    start(); 
} 

function start(){ 

    var canvas = document.getElementById("canvas"); 
    ctx = canvas.getContext("2d"); 


    var img = document.createElement("img"); 
    img.src="image.png"; 
    img.onload=start; 

    function start(){ 
    ctx.drawImage(img,0,0,400,400); 
    } 
} 

Answer 1

당신은 당신이 DOM에 생성 한 이미지를 첨부해야합니다.

document.getElementById("image-container").appendChild(img); 

편집 : 사과드립니다. 캔버스 개체로 그려야합니다. 이 경우에는 이미지가 제대로로드되지 않는 것으로 의심됩니다.

몇 가지 아이디어 : start() 함수 내에 디버깅 출력을 추가하거나 중단 점을 설정 한 다음 그 시점에서 'img'에 포함 된 것을 살펴볼 수 있습니다. 또는 devtools 콘솔의 '네트워크'탭에서 상태 코드를 확인할 수 있습니다. 또는 이미지를 www.google.com/images/logo.png과 같이 작동하는 것으로 바꿀 수 있습니다. 이 모든 것이 당신이 문제를 좁히는 데 도움이됩니다.

참고 : 당신이 그것을 선언해서는 안 window는 전역 변수이며, window 같은 window.document 등의 재산입니다 이름도 전역 있습니다 -을 선언하지 않고 document로 참조 할 수 있습니다. 때로는 JS 프레임 워크가 불평하지만 프레임 워크에 따라이를 해결할 수있는 방법이 있습니다. 이러한 변수의 중복 된 선언은 아래로 내려가는 좋은 길이 아닙니다.

ESlint 오류에 대한 응답으로 추가하는 경우 프로젝트 루트에 eslintrc.json을 추가하고 (아직 갖고 있지 않은 경우) 브라우저 영영을 불평하지 않도록 다음 속성을 지정해야합니다 :

{ 
    "env": { 
    "browser": true 
    }                  
} 

이미지가 정의되지 않은 이유는 최신 브라우저 환경에서는 발생하지 않습니다. 그것은 당신의 환경 설정과 함께해야합니다. 이 코드를 어떻게 실행하는지에 대한 정보가 있습니까?

Answer 2

이미지의 src을 설정하기 전에 onload 콜백을 설정해보십시오. 이미지가 캐시 된 경우 src는 설정이 startsee this question에 할당되기 전에

var img = document.createElement("img"); 
img.onload=start; 
img.src="image.png"; 

, 다음 onload는 즉시 즉 해고 될 것이다.