Fabric 이미지 CORS (FabricJS Image CORS)

이미지 오브젝트

fabricJS에서 이미지 오브젝트를 생성하는 방법 에는 fabric.Image.fromURL 함수를 이용한 방법이 있다.

 

fabric.Image.fromURL( 이미지 주소, 콜백함수, {crossOrigin : ''})

 

여기서 crossOrigin 을 anonymous로 설정해 주어야 불러온 이미지에 대해 수정할 수 있다. ( 예) 필터 적용 )

그러나 anonymous로 설정하고 불러 올 이미지 헤더에 access-control-allow-origin가 없다면 cors 정책에 의해서 이미지 불러오기가 금지된다.

crossOrigin을 설정하지 않으면 이미지 불러오기는 가능하지만 수정이 불가능하다.

 

해결책은 이미지 헤더에 access-control-allow-origin 을 추가하면 된다. 그러나 이미지를 가지고 있는 서버에 직접 연락할 수 없기 때문에 프록시 서버를 통해 추가한다.

---

cors anywhere 사용법

node js로 작성된 프록시 서버이다.

간단하게 이미지 주소 앞에 https://cors-anywhere.herokuapp.com/ 을 붙여주면 된다.

그러나 프록시서버를 통하기 때문에 속도가 느려진다.
또한 파일 객체를 URL.createObjectURL(file)로 변환해서 사용 할 경우 프록시 서버를 이용하면 안된다.

---

예제