이번 글에서는 Canvas에서 크로스 도메인 이미지를 도입할 때 toDataURL()이 오류를 보고하는 문제에 대한 해결 방법을 소개하고자 합니다.
【장면】
사용자가 웹페이지를 열면 Tencent COS(사진 서버)에 사진을 요청합니다. 캔버스를 사용하여 그립니다.
그런 다음 사용자는 이미지를 다시 선택하고 자르고 업로드할 수 있습니다.
【질문】
이미지를 처음 불러오면 새 이미지를 선택한 후 잘라내기와 그리기에 문제가 없습니다. 그러나 다음 오류로 인해 업로드가 실패했습니다.
'HTMLCanvasElement'에서 'toDataURL' 실행 실패: 오염된 캔버스를 내보낼 수 없습니다.
이해한 후에는 이미지가 처음 참조될 때 crossOrigin 필드를 설정해야 합니다.
var c=document.getElementById(cover_show); var img=new Image(); img.src=http://vsqx-cover-xxxxxx.coscd.myqcloud.com/+this.vsqx_uid+.jpg; : img.setAttribute(crossOrigin,'anonymous') img.onload = function(){ var cxt=c.getContext(2d); cxt.drawImage(img,0,0,300,150,0,0,200,126);그런 다음 다시 실행하십시오. 처음 로드했을 때 이미지가 표시되지 않는 것을 발견했습니다. . .
콘솔 오류는 다음과 같습니다.
【최종 해결방안】
Tencent Cloud COS에 로그인하여 이 버킷을 찾고 교차 도메인 액세스 CORS를 설정하세요. (다른 PHP/JAVA 서버에도 동일하게 적용됩니다)
다시 테스트하세요. 이미지가 성공적으로 표시되고 이미지가 성공적으로 업로드됩니다.
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.