이 기사에서는 캔버스에서 도메인 간 내보낸 이미지를 잠금 해제하기 위한 N 자세를 요약하여 소개합니다. 세부 사항은 다음과 같습니다.
포착되지 않은 DOMException: 'HTMLCanvasElement'에서 'toDataURL'을 실행하지 못했습니다. 오염된 캔버스를 내보낼 수 없습니다.
캔버스를 사용하여 toDataUrl을 실행하여 이미지를 내보낼 때 위의 오류가 발생했다고 생각합니다. 보안 정책에서 이미지의 도메인 간 내보내기를 허용하지 않기 때문에 이미지 서버 도메인 이름이 현재 이름과 다릅니다.
이 스패닝 문제를 해결하는 방법에는 여러 가지가 있습니다. 1. 이미지를 base64로 변환이미지가 base64가 되면 당연히 도메인 이름이 없습니다.
참고: 이미지를 base64로 변환하고 이미지 파일 크기를 늘리십시오. 이미지가 상대적으로 큰 경우 base64로 변환하지 않는 것이 좋습니다. 그렇지 않으면 웹 페이지 로딩 시간이 늘어나고 웹 사이트 속도에 영향을 미칠 수 있습니다. 작은 이미지의 경우.
2. 이미지 서버 설정을 통해 도메인 간 허용 즉, 이미지를 요청하여 반환된 응답 헤더에는 값이 *(모든 웹사이트의 교차 도메인 요청 허용) 또는 현재 웹사이트 도메인 이름(아래의 교차 도메인 요청만 허용)으로 설정된 Access-Control-Allow-Origin 포함되어 있습니다. 고정 도메인 이름) 그러면 프런트 엔드에서 이미지 교차 출처 속성 img.crossOrigin=anonymous。 구체적인 코드는 다음과 같습니다
var canvas = document.getElementById('myCanvas') var ctx = canvas.getContext('2d') var img = document.createElement('img') img.crossOrigin=anonymous img.src = 'https://p4-q.mafengwo.net/s12/M00/CA/3B/wKgED1w8fL6ADk16AAXyDaz2bdU61.jpeg' img.onload = function() { ctx.drawImage(img,0,0,500,300); console.log(canvas. toDataURL()) }이런 식으로 전면과 후면을 결합하면 도메인 간 문제를 쉽게 해결할 수 있습니다.
3. 현재 도메인 이름 아래에 이미지를 넣습니다.불친절하게 웃어서 죄송합니다. 이것이 실제로 문제의 해결책입니다.
그러나 실제 프로젝트에서는 일반적으로 이미지를 CDN에 저장하므로 이 방법은 현실적이지 않습니다.