이미지 url을 가져오는 경우 base64로 어떻게 변환시킬 수 있나요?

Question

이미지 다운로드 관해서 질문드리고 싶은데요..
이미지 다운로드 기능을 계속 구현을 못하겠어서 찾아보니까 클라이언트에서 셀렉한 이미지를 base64로 인코딩해서 서버에 보내면 될 것 같더라고요.. 근데 이미지를 셀렉트 했을 때 value 값이 외부 사이트의 url을 그대로 긁어오는데, 이걸 어떻게 base64로 변환시킬 수 있나요?

손정현 · Answer

안녕하세요!

img와 Canvas API를 활용하면 가능하지 않을까 생각됩니다. img.onload라는 콜백을 활용해서 Canvas에 이미지를 그린 뒤 base64로 변환할 수 있습니다.

요 글에서 1번 참고해보세요. 글 하단에 codepen도 있습니다 :)
- https://levelup.gitconnected.com/how-to-convert-image-to-base64-by-javascript-d110556de37f