JavaScript
-
[JS] 모자이크 처리기초/자바스크립트 2022. 3. 4. 09:39
테스트 페이지 https://eaststar1129.github.io/mozaic.html 구성도 마우스를 올렸을때 그림에 마우스 영역이 나타나며 모자이크를 클릭시 모자이크 / 되돌리기를 구현 코드 Canvas 활용 Canvas 3개 - 원본 - 마우스 영역 - 수정되는 영역 페이지 로드시 원본, 모자이크영역에 이미지 삽입, hover영역 초기화 마우스 move시 hover 영역에서 사각형을 계속 표시 마우스 out시 hover 영역 초기화 마우스 click시 원본데이터를 가져와 모자이크 / 원본그대로 수정데이터에 삽입 Canvas의 index는 원본 < 수정본 < hover 순 [css] html, body{ margin:0; padding:0; } #divCanvas { position:relativ..