HTML Canvas로 이미지 편집기 만들기 (feat. Konva.js)

• ⭐️ 완성 된 화면 미리보기
• ⭐️ Konva.js를 선택한 이유
• ⭐️ 이미지 편집기 기능
• ⭐️ 최종 완성 코드 미리 보기

⭐️ 완성 된 화면 미리보기

이미지를 편집할 수 있는 기능을 만들어보자.
HTML5의 canvas api를 조작하기 쉽게 만든 라이브러리 Konva.js를 이용해 볼 것이다.

⭐️ Konva.js를 선택한 이유

canvas 라이브러리는 여러 종류가 있지만 Konva를 선택한 이유는 아래와 같다.

 

1. Konva.js 개발자와 소통이 가능하다.
2. react-konva도 있지만, Konva.js가 사용법이 훨씬 직관적이고 쉽다.
3. 문서가 잘 작성되어있고 커뮤니티도 나름대로 운영되고 있다.
4. 자유도가 높다.

 

⭐️ 이미지 편집기 기능

1. 캔버스에 이미지 띄우기
2. 이미지 바운딩박스 구현하기
3. 이미지 회전 기능 구현
4. 이미지 중앙정렬 기능 구현
5. Redo, Undo기능 구현
6. 캔버스 이미지 파일로 저장하기

 

 

⭐️ 최종 완성 코드 미리 보기

https://github.com/seoulsaram/canvas-search

 

 

GitHub - seoulsaram/canvas-search

 

 

[Canvas] 이미지 에디터 만들기 6 : 이미지 저장하기