[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.download = 'image.png';
        link.href = dataUrl;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      };
      imageElement.src = dataUrl;
    }
  }

 

그런데 만약 이 때 Tainted canvases may not be exported.. 라는 에러가 발생한다면

이 이미지는 외부 서버에서 받아온 이미지라서 발생하는 에러다.

이런 경우 drawImage함수에 코드 한 줄을 추가해준다.

  const drawImage = useCallback(async () => {
    if (layerRef.current) {
      const imageObj = new Image();
      imageObj.src = source;
      try {
        await new Promise((resolve, reject) => {
          imageObj.onload = resolve;
          imageObj.onerror = reject;
        });

        const imageOpt = {
          width: CANVAS_SIZE,
          height: CANVAS_SIZE,
          image: imageObj,
          id: 'imageId',
          draggable: true,
          crossOrigin:"anonymous", //=> ✨ 이거 추가
        };

        const defaultImage = new Konva.Image(imageOpt);

        imageRef.current = defaultImage;
        layerRef?.current?.add(defaultImage);
      } catch (error) {
        alert('이미지 로드에 실패했다!');
      }
    }
  }, []);

 

⭐️ 최종 코드 깃헙에서 보기

아래의 레포를 clone받은 뒤 bbb4d3d커밋으로 체크아웃 하면 최종 완성된 코드를 볼 수 있다.

https://github.com/seoulsaram/canvas-search

GitHub - seoulsaram/canvas-search