Canvas(7)
-
[Canvas] 인스타그램 스토리같은 사진/동영상 편집기 만들기
소개회사에서 캔버스 다룰 일이 늘어나다 보니 여러 라이브러리를 사용하게 되는데, 이번에 써본 fabric.js가 캔버스 위에 그려진 오브젝트를 관리하는게 konva.js보다 훨씬 쉬웠다. 그래서 재미삼아 인스타그램 스토리에서 처럼 간단하게 동영상/사진 위에 스티커나 텍스트를 올릴 수 있는 캔버스를 만들어보았다.혹시 에디터를 만들어야 하는 분들에게 도움이 되길 바란다. 완성된 화면데스크탑 버전 모바일 버전 사용한 스팩- next.js v15- fabric.js- react-color-palette 프로젝트 구조src ㄴapp ㄴclass ㄴeditor.class.ts #텍스트, 이모지 편집을 관리하는 class. 아래의 fabric class를 상속받음 ㄴfab..
2025.03.10 -
[Canvas] 이미지 에디터 만들기 6 : 이미지 저장하기
⭐️ 이미지 저장하기⭐️ 최종 코드 깃헙에서 보기최종 완성 ⭐️ 이미지 저장하기이미지를 저장하는 방법은 쉽다. 아래의 함수를 추가해주면 끝. 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..
2024.08.26 -
[Canvas] 이미지 에디터 만들기 5 : Redo, Undo기능 구현
완성!⭐️ 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';//관리할 데이터의 타입을 동적으로 ..
2024.08.26 -
[Canvas] 이미지 에디터 만들기 4 : 이미지 중앙정렬 기능 구현
⭐️ 이미지 중앙 정렬 하기의 문제⭐️ 이미지 중앙 정렬 문제점 해결⭐️ 이미지가 캔버스에 처음부터 중앙정렬 되도록 수정⭐️ 이미지 정보 추출하기⭐️ 최종 코드 깃헙에서 보기완성 화면⭐️ 이미지 중앙 정렬 하기의 문제이미지를 중앙에 두는건 쉽다. (캔버스 사이즈 - 이미지사이즈)/2 로 계산해주면 끝.function centerImage() { if (imageRef.current) { const width = imageRef.current.width() * imageRef.current.scaleX(); const height = imageRef.current.height() * imageRef.current.scaleY(); currentDegree.current = ..
2024.08.26 -
[Canvas] 이미지 에디터 만들기 3 : 이미지 회전 기능 구현
⭐️ 이미지 회전 함수 구현⭐️ 회전할 각도를 구하는 함수 구현⭐️ 최종 코드 깃헙에서 보기 완성 화면 이번엔 이미지 회전 기능을 구현해보자.캔버스의 회전 방식은 객체의 중앙 축을 중심으로 객체를 회전 시키는 방식이 아니다.자세한 내용은 이 링크를 참고하자.어쨌든 캔버스 회전 방식대로 회전시키면 이미지가 제자리에서 회전하는게 아니라 원을 그리며 회전한다.우리는 이미지 중심축을 기준으로 이미지가 회전하도록 만들 것이다.⭐️ 이미지 회전 함수 구현일단 canvas의 회전 방식이 어떻게 동작하는지 보기 위해Konva의 Node에 내장된 rotate함수를 사용해보자.import { useCallback, useEffect, useRef, useState } from 'react';import Konva fro..
2024.08.26 -
[Canvas] 이미지 에디터 만들기 1: 캔버스에 이미지 띄우기
⭐️ 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는 여러겹 올릴 수 있다.일단 기본적으로 하나의 레..
2024.08.26