Tainted canvases may not be loaded. - 임이지의 블로그

CORS - DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': Tainted canvases may not be loaded. cepiloth 2021. 5. 11. 메뉴레이어 임이지의블로그 메뉴리스트 홈 태그 미디어로그 위치로그 방명록 분류전체보기 AI 개발도구 용어 빅데이터 Kaggle KoNLPy Dacon AWS 개발환경 AWS기반AI개발 Developer 일상다반사 형상관리 IT도서 LEETCODE 혼공단 Web 개발환경 HTMLJS REACT VUE.JS FIREBASE 개발환경 Android Python Window Graphics COLAB CERT-취약점 병렬처리 AMP OpenMP SIMD 영상처리 OpenCV OpenCVPython OpenCV실습 멀티미디어 동영상(Movie) 사운드(Sound) 이미지(Image) 폰트(Font) 압축(Compress) PDF 컴퓨터언어 C++ C# NDK MFC Python Script 디자인패턴 개발자행사 LibreOffice Hacktoberfest2020 PyTorchHub 미분류 검색레이어 임이지의블로그 검색영역 컨텐츠검색 상세컨텐츠 본문제목 CORS-DOMException:Failedtoexecute'texImage2D'on'WebGL2RenderingContext':Taintedcanvasesmaynotbeloaded. Web/HTMLJS bycepiloth 2021.5.11.11:13 본문 좋아요 - 댓글달기 반응형 TensorFlow.js를사용하다가Canvas객체의이미지데이터를접근하려하다가아래오류가발생하였다.drawCanvas는HTML에서선언한이미지를그리는용도로사용하였다.  //HTML선언부 //shapeimg객체를canvas에그리는코드 functionimageDraw(){ varimg=document.getElementById("shape"); ctx.drawImage(img,0,0); } //canvas의데이터를접근하여추론하는코드 asyncfunctionpredict(){ //predictcantakeinanimage,videoorcanvashtmlelement varcanvas=document.getElementById("drawCanvas"); constprediction=awaitmodel.predict(canvas); for(leti=0;i HeadersetAccess-Control-Allow-Origin"*"   AWSS3 //S3에서는권한탭에서CORS설정을한다. http://www.example1.com GET PUT POST DELETE *   AWSCloudFront CloudFront는Behavior에서CacheBasedonSelectedRequestHeaders을whitelist로변경후아래whitelist에서Origin을추가한다.   프론트엔드에서수정 scripttag에crossorigin속성추가  간단하게아래코드처럼crossorigin속성을추가해서해결할수있지만브라우저마다crossorigin속성을지원유무가다르다는것에유의해야한다.   crossorigin속성을추가하였지만Chrome브라우저버전90.0.4430.93(공식빌드)(64비트)에서는오류가해결되지않았다.   imgtag에crossorigin속성추가 이방법이제일간단하다.그러나브라우저마다다를수있으니유의해야한다.   이미지자체에CrossOrigin속성을설정 varimg=newImage(); img.src="http://other-domain.com/image.jpg"; img.crossOrigin="Anonymous";    이미지파일을Origin(경로)를사용하지않고base64data로처리하는방식도있습니다.애초에CORS상황이나타나지않도록코드를구성하는것이옳다고생각한다. 반응형 공유하기 게시글관리 구독하기 임이지의블로그 저작자표시비영리변경금지 'Web > HTMLJS'카테고리의다른글 Window크기에맞게HTML5Canvas크기조정하기  (0) 2021.06.18 TeachableMachineTensorFlow.js예제분석  (2) 2021.05.10 Canvas객체를이미지로AWSS3에업로드하기  (0) 2021.05.10 이미지객체를Canvas에그리기  (0) 2021.05.04 태그 AccessControlAllowOrigin, Access-Control-Allow-Origin, CORS, crossorigin, Taintedcanvases 관련글더보기 Window크기에맞게HTML5Canvas크기조정하기 2021.06.18 TeachableMachineTensorFlow.js예제분석 2021.05.10 Canvas객체를이미지로AWSS3에업로드하기 2021.05.10 이미지객체를Canvas에그리기 2021.05.04 댓글영역 댓글 0 개 댓글쓰기 이전 댓글더보기 비밀글 댓글 남기기 추가정보 반응형 인기글 - - VisualStudioCode에서JupyterNotebook사용하기 2022.01.1015:11 - - 비전시스템을위한딥러닝 2022.02.2314:50 - - 윈도우에서MiniConda및Labelme설치하기 2022.01.2414:48 - OMP:Error#15:Initializinglibiomp5md.dll,butfoundlibiomp5md.dllalreadyinitialized 2022.01.2516:35 최신글 - - NGINX주요디렉터리구조와명령어 카테고리없음 - - NGINX설치및상태점검확인 카테고리없음 - - 포켓몬상테스트만들기-종료 개발도구 - - 포켓몬상테스트PWA배포도전기!!-종료 개발도구 페이징 이전 1 ··· 168 169 170 171 172 173 174 175 176 ··· 516 다음 티스토리툴바 임이지의블로그 구독하기