[FE] 웹 사이트에서 이미지 링크 주소 복사를 통해 가져온 URL을 base 64로

Question

안녕하세요.현재 구현하려는 기능에 대해서 설명을 간략하게 드려보면, 유저가 네이버나 구글 등의 플랫폼에서 혹은 어느 사이트에서든 이미지를 마우스 우클릭을 한 다음에 링크 주소 복사하기 기능을 통해얻은 image url 을 저희 사이트 input에 입력하고 확인을 누르면,제 프로젝트 안에서 해당 url 을 가지고 image를 size 조절을 거친 후에 base64(꼭 base64가 아니어도 됩니다)로 해서 화면에 img 태그로 띄우고자 합니다.이 때, 단순히 url을 img src attribute에 넣으면 그만이긴 하지만, size 조절을 위해(resize and center crop) canvas를 만들어서 drawImage 함수를 쓰는 과정을 거쳐야하는데요. 그 과정에서 index.vue:87 Error converting image to base64: DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.위와 같은 에러가 나서 완성을 못하고 있습니다.일단 이미지 리사이즈 앤 센터 크롭은 반드시 canvas를 만든 다음에 drawImage 함수를 써야하기에 저 부분은 건들 수 없구요.제가 설명드린 방법에서 저 에러가 나지 않을 수 없을까요 ??프로젝트는 vuejs로 돼있습니다.

킁킁탐정 · Answer

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL#exceptionsSecurityErrorThe canvas's bitmap is not origin clean; at least some of its contents have or may have been loaded from a site other than the one from which the document itself was loaded.다음 에러 메시지로 검색하면 꽤 많은 양의 답변을 얻을 수 있습니다.&#34;Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.&#34;

Tae-woong Kim · Answer

Canvas에서 외부 이미지를 로드할 수 있지만 이미지 데이터를 조작하려면 CORS 이슈를 해결해야합니다. 이미지 원본이 CORS 허용 되어있는지 확인해보시고 이미지 로드할때 이미지 태그에 crossOrigin &#61; &#34;anonymous&#34;; 설정을 해주어야합니다. 참고링크 https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

[FE] 웹 사이트에서 이미지 링크 주소 복사를 통해 가져온 URL을 base 64로

2개의 답변

Q&A 목록