Canvas에 크로스 도메인 이미지를 도입할 때 toDataURL() 오류 문제를 해결하는 방법

이 글은 Canvas에 크로스 도메인 이미지를 도입하면서 발생하는 toDataURL() 오류 문제를 해결하는 방법에 대한 관련 정보를 주로 소개하고 있어서 편집자께서 꽤 좋다고 생각해서 지금 공유해 드리고자 합니다. 참고로. 에디터와 함께 구경해보세요

추천 매뉴얼:최신 버전의 HTML5 참조 매뉴얼

캔버스에 크로스 도메인 이미지 도입으로 인해 발생하는 toDataURL() 오류 문제에 대한 해결 방법을 소개하는 글입니다. .다음과 같이 공유하고 싶습니다.

[시나리오]

사용자가 웹페이지를 열면 Tencent COS(사진 서버)에 사진을 요청합니다. 캔버스를 사용하여 그립니다.

그런 다음 사용자는 이미지를 다시 선택하고 자르고 업로드할 수 있습니다.

【문제】

사진이 처음으로 로드되었습니다. 새 사진을 선택한 후 자르기 및 그리기에 문제가 없습니다. 하지만 다음 오류로 인해 업로드가 실패했습니다.

'HTMLCanvasElement'에서 'toDataURL'을 실행하지 못했습니다. 오염된 캔버스를 내보낼 수 없습니다.

이해한 후 이미지가 HTMLCanvasElement에 참조될 때 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에 로그인하여 이 버킷을 찾아 "Cross-domain access CORS"를 설정합니다. (다른 PHP/JAVA 서버에도 동일하게 적용됩니다.)

다시 테스트해 보세요. 이미지가 성공적으로 표시되고 이미지가 성공적으로 업로드됩니다.

추천 관련 기사:
1.html5 캔버스 태그의 역할 소개와 캔버스 태그의 역사적 유래
2.3분 HTML5 캔버스(캔버스) 애니메이션 튜토리얼
관련 영상 튜토리얼:
1.Dugu Jiujian (1)_HTML5 동영상 튜토리얼

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다!

위 내용은 Canvas에 크로스 도메인 이미지를 도입할 때 toDataURL() 오류 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!