이미지 URL로 이미지 가져오기

Question

안녕하세요.현재 제가 구현하고자 하는 기능은 유저가 인터넷에서, 예를 들어, 네이버 이미지에서 마우스 우클릭을 통해 링크 주소 복사 를해서이미지 링크를 저희 사이트 input에 복붙해서 가져오기를 누르면 해당 이미지를 저희 사이트 canvas에 그리는 기능 입니다.이 때, 문제가 되는게 일부 이미지들이(현재 CORS 이슈 때문에 백엔드에서 링크를 받아서 fetch해서 프론트로 보내주고 있습니다)data:application/octet-stream;base64,이렇게 리턴을 하고 있어서 canvas로 컨버팅을 할 수 없는 상태입니다. https://search.pstatic.net/sunny/?src&#61;https%3A%2F%2Fimages.unsplash.com%2Fphoto-1681538880649-d60945daebb3%3Fixlib%3Drb-4.0.3%26ixid%3DMnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDZ8fHxlbnwwfHx8fA%253D%253D%26w%3D1000%26q%3D80&type&#61;a340예시로 저 이미지가 fetch 하면 위에서 말한 리턴값을 리턴하는데요.. (나머지 이미지는 정상적으로 base64 포맷으로 리턴돼 잘 사용할 수 있습니다.)혹시 이런 이슈를 겪어보셨거나 해결책을 아시는분은 알려주시면 감사합니다 :)

허랴 · Answer

자바스크립트에 base64 디코딩 함 찾아보세요

킁킁탐정 · Answer

브라우저에서 링크를 열면 image/jpeg으로 뜹니다. 테스트를 위해 wget이나 curl등을 이용하여 오고가는 헤더에 따라 받는 내용이 어떻게 달라지는지를 확인해보셔야할꺼 같습니다. 예를들어 user-agent에 따라 서버에서 응답을 이미지가 아닌 다른 값을 줄 수도 있습니다.

이미지 URL로 이미지 가져오기

2개의 답변

Q&A 목록