소개회사에서 캔버스 다룰 일이 늘어나다 보니 여러 라이브러리를 사용하게 되는데, 이번에 써본 fabric.js가 캔버스 위에 그려진 오브젝트를 관리하는게 konva.js보다 훨씬 쉬웠다. 그래서 재미삼아 인스타그램 스토리에서 처럼 간단하게 동영상/사진 위에 스티커나 텍스트를 올릴 수 있는 캔버스를 만들어보았다.혹시 에디터를 만들어야 하는 분들에게 도움이 되길 바란다.  완성된 화면데스크탑 버전 모바일 버전  사용한 스팩- next.js v15- fabric.js- react-color-palette  프로젝트 구조src ㄴapp ㄴclass ㄴeditor.class.ts #텍스트, 이모지 편집을 관리하는 class. 아래의 fabric class를 상속받음 ㄴfab..

⭐️ 이미지 저장하기⭐️ 최종 코드 깃헙에서 보기최종 완성 ⭐️ 이미지 저장하기이미지를 저장하는 방법은 쉽다. 아래의 함수를 추가해주면 끝. function saveImage() { onFocusOut(); //바운딩 박스가 이미지와 함께 저장되지 않도록 바운딩 박스 해제해줌 if (stageRef.current) { const imageElement = new Image(); const dataUrl = stageRef.current.toDataURL(); //이미지 데이터를 base64로 추출 imageElement.onload = function () { const link = document.createElement('a'); link.d..

완성!⭐️ redo, undo 상태 관리를 위한 hook 만들기먼저 lodash를 설치해주자. npm i lodash @types/lodash -D 이제 redo, undo를 하기 위해 상태를 관리해줄 특수한 hook을 만들자.hook의 재사용성을 위해 관리할 데이터의 타입은 제네릭으로 받아 동적으로 할당되도록 한다.setState함수로 T타입의 새 데이터가 들어오면 states에 저장해주고, index도 함께 업데이트해준다.states, index가 업데이트 될 때마다 state는 자동으로 states의 index번째 값으로 할당된다.import { isEqual } from 'lodash';import { useMemo, useState } from 'react';//관리할 데이터의 타입을 동적으로 ..

⭐️ 이미지 중앙 정렬 하기의 문제⭐️ 이미지 중앙 정렬 문제점 해결⭐️ 이미지가 캔버스에 처음부터 중앙정렬 되도록 수정⭐️ 이미지 정보 추출하기⭐️ 최종 코드 깃헙에서 보기완성 화면⭐️ 이미지 중앙 정렬 하기의 문제이미지를 중앙에 두는건 쉽다. (캔버스 사이즈 - 이미지사이즈)/2 로 계산해주면 끝.function centerImage() { if (imageRef.current) { const width = imageRef.current.width() * imageRef.current.scaleX(); const height = imageRef.current.height() * imageRef.current.scaleY(); currentDegree.current = ..

⭐️ 이미지 회전 함수 구현⭐️ 회전할 각도를 구하는 함수 구현⭐️ 최종 코드 깃헙에서 보기  완성 화면 이번엔 이미지 회전 기능을 구현해보자.캔버스의 회전 방식은 객체의 중앙 축을 중심으로 객체를 회전 시키는 방식이 아니다.자세한 내용은 이 링크를 참고하자.어쨌든 캔버스 회전 방식대로 회전시키면 이미지가 제자리에서 회전하는게 아니라 원을 그리며 회전한다.우리는 이미지 중심축을 기준으로 이미지가 회전하도록 만들 것이다.⭐️ 이미지 회전 함수 구현일단 canvas의 회전 방식이 어떻게 동작하는지 보기 위해Konva의 Node에 내장된 rotate함수를 사용해보자.import { useCallback, useEffect, useRef, useState } from 'react';import Konva fro..

⭐️ konva.js 설치⭐️ 빈 div 엘리먼트 준비⭐️ Stage, layer 준비⭐️ 이미지 띄우기⭐️ 최종 코드 깃헙에서 보기     ⭐️ konva.js 설치react프로젝트에 konva.js를 설치해준다.- npm install konva ⭐️ 빈 div 엘리먼트 준비export default function Canvas() { return ( );} ⭐️ Stage, layer 준비Konva.js를 이용해 캔버스 위에 이미지를 띄우기 위해서는기본적으로 Stage와 Layer가 필요하다.Stage는 캔버스이고,Layer는 포토샵의 레이어와 마찬가지로 캔버스 위에 레이어를 하나 까는 것이다.필요에 따라 이 Layer는 여러겹 올릴 수 있다.일단 기본적으로 하나의 레..