자바 스크립트에서 홍수 채우기 알고리즘 구현

자바 스크립트에서 자바 스크립트에 새로운 자바 스크립트를 작성하려고 시도했지만 컴퓨터에서 캔버스로 이미지로드 (스케치)를 수행 할 수 없었습니다. 누구든지 나에게 매우 감사 할 것입니다. 감사합니다. advance자바 스크립트에서 홍수 채우기 알고리즘 구현

출처

2016-07-29 Ali Ahmed Dhillon

캔버스에 이미지를 추가 할 수 있습니다. 내 코드는 다음과 같습니다. 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 = 'zlati-nathalie.jpg'; –

이미지를 캔버스에 그리려면 iamge를 먼저로드해야합니다. 여기 는 캔버스에 그리는 방법에 대한 예는 다음과 같습니다

var img = new Image(); 
img.onload = function() { 
    //draw after loading 
    canvas = document.getElementById('case_canvas'); 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight); 
} 

img.src = "http://i.stack.imgur.com/xgNw7.png"; 
//^^ this will start loading the image

바이올린 : https://jsfiddle.net/pmeb1uhm/1/

통지 사항 : 인해 보안 시스템에있는 이미지를 그리기 문제가있을 수 있습니다 (출처 간 정책) 제한 사항. dev-console 브라우저에 오류가 표시되어야합니다. 브라우저 보안 설정을 변경하는 대신 localhost에서 스크립트를 실행하고 localhost를 사용하여 이미지를로드하는 것이 좋습니다.

출처

2016-07-29 12:34:01 Wolfgang

덕분에 나를 위해 일했습니다 지금 홍수 채우기를 구현하는 데 도움이 될 수 나는 알고리즘을 시작하려면 픽셀 어레이에 액세스해야합니다 지금은 매우 –

감사합니다. 그리고 당신이 로컬 서버에서 작업하지 않는다면 크로스 오리진 정책이 문제를 일으킬 수 있습니다. 시작할 소스가 많이 있습니다 (예 : http://stackoverflow.com/questions/17714742/looping-through-pixels-in-an-image 여기서 중요한 것은 행/cols/r, g, b, a 값을 포함하는 배열을 얻는 것입니다. – Wolfgang

자바 스크립트에서 홍수 채우기 알고리즘 구현

답변

관련 문제