"Tainted canvases may not be exported"웹에서 canvas를 다루다 보면 이런 에러를 자주 접할 수 있습니다.특히 toDataURL()같은 메서드로 캔버스 내용을 추출할 때 문제가 생기죠.이 에러는 외부에서 불러온 이미지 때문에 canvas가 오염(tainted)되었을 때 발생합니다.이게 무슨말이냐고요?이걸 이해하려면 CORS(교차 출처 리소스 공유)개념을 알아야 합니다. Tainted Canvas 에러 발생 상황에러가 발생하는 맥락:1. toDataURL() 호출 시캔버스에 그린 이미지를 저장하려고 할 때, 외부 리소스가 CORS 정책을 통과하지 못하면 에러 발생 const dataURL = canvas.toDataURL();2. crossOrigin="anonymous"..

⭐️ 이미지 저장하기⭐️ 최종 코드 깃헙에서 보기최종 완성 ⭐️ 이미지 저장하기이미지를 저장하는 방법은 쉽다. 아래의 함수를 추가해주면 끝. 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가 사용법이 훨씬 직관적이고 쉽다.문서가 잘 작성되어있고 커뮤니티도 나름대로 운영되고 있다.자유도가 높다. ⭐️ 이미지 편집기 기능캔버스에 이미지 띄우기이미지 바운딩박스 구현하기이미지 회전 기능 구현이미지 중앙정렬 기능 ..