Tainted Canvas 에러와 CORS: 원인과 해결 방법canvas에서 작업하다 보면 "Tainted canvases may not be exported"라는 에러를 종종 접할 수 있다.이 에러를 제대로 이해하고 수정하려면, CORS(교차 출처 리소스 공유)와 관련된 동작 원리를 알아야 한다.아래에서는 Tainted canvas 에러가 발생하는 이유와 해결 방법, 그리고 관련된 `crossOrigin` 속성과 서버 설정의 관계를 정리해봤다.Tainted Canvas 에러 발생 상황에러가 발생하는 맥락1. canvas데이터를 추출하려 할 때   예: toDataURL() 메서드를 호출해 canvas 데이터를 이미지로 저장하려는 경우.2. crossOrigin="anonymous"설정 후   `cros..

⭐️ 이미지 저장하기⭐️ 최종 코드 깃헙에서 보기최종 완성 ⭐️ 이미지 저장하기이미지를 저장하는 방법은 쉽다. 아래의 함수를 추가해주면 끝. 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';//관리할 데이터의 타입을 동적으로 ..

⭐️ 완성 된 화면 미리보기⭐️ Konva.js를 선택한 이유⭐️ 이미지 편집기 기능⭐️ 최종 완성 코드 미리 보기⭐️ 완성 된 화면 미리보기이미지를 편집할 수 있는 기능을 만들어보자.HTML5의 canvas api를 조작하기 쉽게 만든 라이브러리 Konva.js를 이용해 볼 것이다.⭐️ Konva.js를 선택한 이유canvas 라이브러리는 여러 종류가 있지만 Konva를 선택한 이유는 아래와 같다. Konva.js 개발자와 소통이 가능하다.react-konva도 있지만, Konva.js가 사용법이 훨씬 직관적이고 쉽다.문서가 잘 작성되어있고 커뮤니티도 나름대로 운영되고 있다.자유도가 높다. ⭐️ 이미지 편집기 기능캔버스에 이미지 띄우기이미지 바운딩박스 구현하기이미지 회전 기능 구현이미지 중앙정렬 기능 ..