먼저, 어떤 문제가 발생했는지 이야기해 보겠습니다. 우선 그런 필요성이 있습니다. 프런트 엔드는 백 엔드에서 전달된 데이터를 기반으로 그림을 동적으로 생성해야 합니다. 사진 속 카피라이팅, 배경 사진, 사용자 아바타는 모두 백엔드 인터페이스를 통해 얻습니다. 그러나 html2canvas를 사용하여 생성된 캔버스의 일부 이미지가 캔버스에서 성공적으로 생성되었습니다. 그러나 일부 사진은 어쨌든 표시되지 않습니다.
공식 문서오랫동안 프로젝트를 진행했지만 결과가 없었고, 오랫동안 Google에서 검색해도 결과가 없었습니다. 이때 약간의 절망감도 있었습니다. 갑자기 그런 생각이 들었습니다. 공식 웹사이트를 확인해 보세요. 그래서 공식 홈페이지에서 다음과 같은 내용을 보았습니다.
제한사항<br/>
스크립트가 사용하는 모든 이미지는 프록시의 도움 없이 읽을 수 있도록 동일한 원본에 있어야 합니다. 마찬가지로 페이지에 원본 간 콘텐츠로 오염된 다른 캔버스 요소가 있는 경우 , 더러워지고 html2canvas에서 더 이상 읽을 수 없게 됩니다.<br/>
스크립트는 Flash 또는 Java 애플릿과 같은 플러그인 콘텐츠를 렌더링하지 않습니다.
이게 무슨 말이에요? 영어를 잘 못하는 학생들을 위한 번역입니다. 영어를 잘하시는 분들은 위에서 바로 읽어보셔도 됩니다. 일반적인 의미는 html2canvas에서는 스크립트를 사용하여 작동한다는 것, 즉 html을 캔버스로 변환하는 데 스크립트를 사용하지만 크로스 소스 이미지를 사용할 수 없다는 제한이 있습니다. 사용하는 경우 html2canvas는 리소스를 읽지 않습니다.
이것이 변환된 캔버스의 일부 그림이 항상 비어 있는 이유입니다. 크로스 소스 이미지 리소스를 사용하는 페이지에 다른 캔버스가 있는 경우 html2canvas는 해당 캔버스를 읽지 않습니다.
해결책정적 리소스를 한 번 전달하고 html2canvas 구성에서 교차 출처 리소스 로드를 허용하면 됩니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.