본문 바로가기

프로그래밍/web

Canvas cross domain 문제

내 블로그에 슬라이딩 갤러리를 만들면서 가장 하고 싶었던 것은 흑백의 사진에서 마우스를 대면 컬러 사진으로 변하는 효과였다. 구글링을 해서 방법을 알아냈고 시도를 해보았고 테스트에서도 사진이 흑백으로 바뀌는 것을 확인하였다. 아래의 링크로 Grayscale화된 로고를 확인해 보자.

http://jsfiddle.net/LPNCW/4/

흑백으로 변한것을 확인할 수 있다. 이번에는 다음을 확인해 보자

http://jsfiddle.net/LPNCW/2/

이상하게 같은 코드에서 이미지만 바꾼것임에도 불구하고 이미지가 grayscale로 바뀌지 않는다. 콘솔을 확인하여 무슨 일이 일어났는지 확인해 보자.

어쩌고 저쩌고 canvas 쏼라쏼라 cross-origin data라고 써진것을 확인 할 수 있다. 이 문제는 다른 도메인에 있는 이미지를 불러올때 생기는 문제이다. 이 문제에 대해 더욱 자세히 알아보았다. 

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements

결국은 보안문제였다. 외부에서 이미지 분석을 너무 쉽게 해버린다면 이미지를 통한 정보 유출의 가능성이 생길 수 있다는 것이다. 이로인해 다른 도메인에서 이미지 데이터를 갖어오는 것은 원천적으로 차단되어 있다.

문제는 티스토리에서 이미지가 저장되는 도메인과 블로그의 도메인이 다르기 때문에 이미지 처리를 할 수가 없다. 그래서 나의 사진의 grayscale화는 아쉽게도 실패하고 말았다. 대신 반투명의 검은색 판을 대서 어두운 효과를 내는것으로 대처를 했다. 그러다 보니 판하고 사진을 같이 조정해야하다보니 코드도 2배로 복잡해 지는 결과가 나오고 말았다.ㅠㅠ

어디 쉬운 방법없나?

그런데 좋은 소식이 있다. 최근 css3 표준에 filter효과가 채택되었다. 확정된건지는 아직 정확히는 모르겠지만, 나와 같은 사람들에게는  좋은 소식임에 틀림없다. 

-webkit-filter: grayscale();

이 한줄이면 해결된다. 또한번 신세계가 오는것인가... filter 효과에 대해서는 다음에 더 자세히 포스팅 해 보겠다.