Fabric JS 이미지 포함 캔버스 저장

Fabric JS 이미지 객체

Fabric JS에서 이미지 객체를 생성하는 원리는 URL을 이용해 해당 이미지를 서버에서 불러와 캔버스 상에 추가한다. 그러나 URL을 이용하기 때문에 원본 이미지가 저장되어있는 서버에 영향을 받는다.

 

만약 해당 이미지가 서버상에서 제거되었을 경우 해당 이미지객체를 다시 불러올 수 없으며, BLOB URL 경우에도 이미지 객체를 다시 불러올 수 없다,

 

즉, 이미지 주소값을 그대로 이용할 경우 캔버스 저장/불러오기가 제대로 작동하지 않는다.

 

---

해결책 

이미지를 Canvas.toDataURL함수를 이용해서 base64문자열로 변환한다.

 

 

그러나, 기존 이미지 URL을 사용하는 것 보다 시간이 오래 걸리게 된다.