크롤링한 이미지 편집하기 인코딩 문제일까요?

Question

안녕하세요.이번에 프로젝트를 진행하고 있는데, 외부 이미지를 크롤링해서 편집해서 IMGBB라는 서버에 저장하는 것을 하고 있습니다.그런데 이미지가 모바일뷰에서 base64일때는 canvas에 부드럽게 그려지는데 외부 url를 가지고오면 깨지는 현상이 일어나거든요.그래서 문제점이 무엇인지 궁금합니다..아래 React image crop이란 라이브러리 사용하였는데 로컬 파일 받아와서 수정하는 것을 제가 커스텀해서크롤링한 url를 받아오도록 했는데 로컬파일 코드를 그대로 사용해서 그런가.. 뭐가 문제인지 모르겠습니다 ㅠㅠ궁금한 점은1번 모바일뷰에서 깨지는 것이 canvas에 그려지는 것에 관한 문제인지..2번 외부 url를 base64로 바꿔서 그려야하는지 궁금합니다.그래도 2번 방법은 직접 해보았는데, cors 오류를 피하기 위해 imgbb 서버에서 저장하고 그 url를 받아와서 base64로 바꿔서 처리하였는데 4초에서.. 7초나 걸려서 절망중입니다..만약에 가능한 방법이 2번이라면3번 외부 url을 이미지 서버에 보내지 않고 바로 base64로 편집할 수있는지 궁금합니다 (시간 단축을 위함)https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-y831o?file&#61;/src/App.tsx:423-709위는 리액트 이미지 크롭이라는 라이브러리 코드펜이고, 로컬 파일 받아서 쓰는 것을 편집해서 url을 넣는 방식으로 수정했습니다.사진으로 설명드리자면 a처럼 나오고 싶은데url을 받아와서 편집하면 b처럼 나와서 걱정입니다.. ㅠㅠ외부 url을 편집한 경험이라도 좋습니다 편하시게 조언해주시면 제가 찰떡같이 알아듣고 찾아보겠습니다감사합니다! await fetch(image) .then((response) &#61;> response.blob()) .then((blob) &#61;> { // Use the image blob as needed console.log(blob); // Further processing with the blob (e.g., display or save) }) .catch((error) &#61;> { console.error(&#34;Error fetching image:&#34;, error); }); Failed to load resource: the server responded with a status of 404 (Not Found)editors:1 Access to fetch at 'http://imgnews.naver.net/image/108/2023/05/08/0003150687_001_20230508152701184.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.위와 같은 방법으로 외부 url를 바로 편집하는 방법도 사용해보았는데 cors오류로 실패하였습니다.

doooss · Answer

외부 url 이미지를 fetch 를 통해 블롭 이미지 형태로 받은 후, 렌더링 후 캔버스에서 해당 blob url 을 타겟으로 하도록 제작하면cors 를 피하고 react-image-crop 을 사용할 수 있습니다.

크롤링한 이미지 편집하기 인코딩 문제일까요?

1개의 답변

Q&A 목록