2012-09-01 3 views
2

캔버스 태그에서 현재 그린 경로에 대한 픽셀 데이터를 얻을 수있는 방법이 있는지 궁금합니다.HTML 5 캔버스 - 경로에 대한 픽셀 데이터 얻기

정사각형이나 선과 같은 간단한 도형을 그릴 때 직접 픽셀 데이터를 계산할 수 있지만 타원이나 단순한 원과 같은 복잡한 모양이 복잡해질 수 있습니다.

이유는 내가 캔버스에 경로를 추가 할 때 서버에 캔버스 픽셀 데이터를 보내는 웹 응용 프로그램에서 작업하고 있기 때문입니다. 서버는 전체 캔버스의 자체 복사본을 유지해야하며, 모든 변경 사항을 전체 캔버스 이미지로 보내고 싶지는 않습니다. 효율성 측면에서 델타 만 사용하십시오.

감사합니다.

답변

2

1 단계 : 원본과 동일한 크기의 두 번째 캔버스에 대한 경로를 그립니다. 경로 캔버스라고 부르 자.

2 단계 : 경로 캔버스의 globalCompositeOperation을 'destination-in'으로 설정하십시오.

3 단계 : 루프 경로 캔버스의 모든 픽셀을 통해 서버로 전송하고 어떤 형식으로 투명하지 않은 픽셀을 저장 :

4 단계 경로 캔버스에 당신에게 원래의 캔버스를 그릴 .

+1

답변 주셔서 감사합니다.이 작업은 분명히 필요한 작업이지만 캔버스에 뭔가를 추가 할 때마다 다음 단계를 따르는 것이 효율적이지 않습니다. –

+1

원본 캔버스 전체를 복사하는 대신에 . 패스의 최소의 경계의 구형을 취득 해,이 섹션으로 getImageData를 사용해, 패스 Canvas에 putImageData를 사용해, 투명하지 않은 픽셀만을 수집합니까? –

+0

각 그리기 작업의 크기에 따라 빨라지 겠지만,이 작업은 무엇입니까? 각 드로잉 작업을 기록하고 필요에 따라 반복하는 것이 낫지 않다고 확신합니까? 픽셀 데이터는 일반적으로 사물을 저장하는 가장 효율적인 방법은 아닙니다. – hobberwickey