html5 이미지가 캔버스에로드되지 않았습니다.

HTML5 캔버스에 그림을로드하려고합니다. URL을 사용하여 이미지를로드 할 때 모든 것이 잘 작동하지만 이미지를 로컬 드라이브에 놓고 가리키면 아무 일도 일어나지 않습니다.html5 이미지가 캔버스에로드되지 않았습니다.

참고 : 일반 태그를 사용하면 모든 것이 정상적으로 작동하고 이미지가로드됩니다.

var canvas = document.getElementById("rightSide"); 
    var context = canvas.getContext("2d"); 
    var imageObj = new Image(); 
    imageObj.src = "cloud.gif"; 
    context.drawImage(imageObj, 650, 55, 93, 104);

< 캔버스 ID = "rightSide"폭 = "800 픽셀"높이 = "800">

감사 : 여기

코드이다.

출처

2012-05-21 Gleeb

코드가 실행되는시기는 언제입니까? 스크립트 태그 또는 onload에서 무엇을 할 수 있습니까? –

다음과 같이 시도해보십시오.

<canvas id="canvas"></canvas> 

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

var img = new Image(); 
img.onload = function(){ 
    can.width = img.width; 
    can.height = img.height; 
    ctx.drawImage(img, 0, 0, img.width, img.height); 
} 
img.src = 'image.jpg';

출처

2012-05-21 11:27:30 JDev

그것이 작동하는 몇 가지 미친 이유로. 감사. 귀하의 코드에서 무엇이 다른지 이해하지 못합니다. – Gleeb

이미지가이 코드에로드 된 후 * onload closure가 호출됩니다. 귀하의 코드가 이러한 주문이 발생한다고 보장하지는 않습니다. –

캔버스에로드되는 로컬 파일은 다른 원본의 것으로 취급되므로 "오염 된"상태로 취급됩니다. 이것이 로컬 파일에서는 작동하지 않지만 URL에서는 작동합니다.

출처

2012-05-21 11:35:11

html5 이미지가 캔버스에로드되지 않았습니다.

답변

관련 문제