⭐️ 이미지 저장하기⭐️ 최종 코드 깃헙에서 보기최종 완성 ⭐️ 이미지 저장하기이미지를 저장하는 방법은 쉽다. 아래의 함수를 추가해주면 끝. 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..

⭐️ 이미지 바운딩박스 추가하기⭐️ 이미지 바운딩박스 스타일 주기⭐️ 캔버스에 마우스를 올릴 때만 바운딩박스 보여주기⭐️ 최종 코드 깃헙에서 보기  이미지 바운딩박스는 Transformer객체를 통해 생성한다.이미지 바운딩 박스를 추가하고, 스타일 커스텀하는 방법과캔버스에 마우스가 들어갈 때만 바운딩박스가 보이도록 하는 방법까지 알아보자.⭐️ 이미지 바운딩박스 추가하기import { useCallback, useEffect, useRef } from 'react';import Konva from 'konva';import { Stage } from 'konva/lib/Stage';import { Layer } from 'konva/lib/Layer';import { Node } from 'konva/li..

⭐️ 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는 여러겹 올릴 수 있다.일단 기본적으로 하나의 레..