Html2canvas: 자바 스크립트를 사용하여 Google지도의 스크린 샷 찍기

cors 헤더 와 함께 제공되지 않는 한 다른 출처에있는 이미지 (이 경우 Google지도 타일)를 렌더링 할 수 없습니다. 이를 극복 할 수있는 한 가지 방법은 이미지에 프록시를 사용하는 것입니다.

PHP 프록시 서버로 시도했지만 오류가 발생했습니다. "Uncaught
SecurityError : 'HTMLCanvasElement'에서 'toDataURL'을 실행하지 못했습니다.
오염 된 캔버스는 내보낼 수 없습니다. "

이 프록시 서버를 시도했습니다.
https://github.com/brcontainer/html2canvas-php-proxy ,
위의 프록시 서버에서 Google지도 방향을 사용했습니다.
https://developers.google.com/maps/documentation/javascript/examples/directions-simple

2014 년 12 월 13 일 토요일 오후 11:11, Niklas von Hertzen <
[email protected]> 작성 :

아래에있는 이미지 (이 경우 Google지도 타일)를 렌더링 할 수 없습니다.
cors 헤더와 함께 제공되지 않는 한 다른 출처
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS.
이를 극복 할 수있는 한 가지 방법은 이미지에 프록시를 사용하는 것입니다.

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/niklasvh/html2canvas/issues/485#issuecomment -66884354
.

_HARDIK SHAH_

나는 같은 문제에 직면하고 있습니다. 이에 대한 해결책을 찾았습니까? html2canvas를 사용하여 Google지도의 스크린 샷을 얻고 싶습니다. 답장에 감사드립니다.

충돌. 업데이트가 있습니까?

옵션에서 useCORS: true 를 전달하면 문제가 해결되었습니다. 또한 allowTaint: false . 이 기능을 실행하면 그것은 모든 타일을 볼 수 있습니다 후, 당신은들을 수 있습니다 도움이 될 것이다 tilesloaded 및 실행 html2canvas 그런 일이 후.

나는 같은 문제에 직면하고 있습니다. 지도 옵션에서 useCORS : true 및 allowTaint : false를 사용해 보았지만 도움이되지 않았습니다. 페이지가로드 된 후에 만 ​​스크린 샷을 얻으려고합니다. 내가 놓친 것이 있습니까?

Google지도의 스크린 샷을 찍을 때도 문제가 발생합니다.이 오류가 발생합니다.
ERROR Error: Uncaught (in promise): InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0. Error: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0. at CanvasRenderer.<anonymous> (html2canvas.js:6289) at step (html2canvas.js:83) at Object.next (html2canvas.js:64) at fulfilled (html2canvas.js:54) at ZoneDelegate.invoke (zone-evergreen.js:365) at Object.onInvoke (core.js:39698) at ZoneDelegate.invoke (zone-evergreen.js:364) at Zone.run (zone-evergreen.js:124) at zone-evergreen.js:851 at ZoneDelegate.invokeTask (zone-evergreen.js:400) at resolvePromise (zone-evergreen.js:793) at resolvePromise (zone-evergreen.js:752) at zone-evergreen.js:854 at ZoneDelegate.invokeTask (zone-evergreen.js:400) at Object.onInvokeTask (core.js:39679) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Zone.runTask (zone-evergreen.js:168) at drainMicroTaskQueue (zone-evergreen.js:570) at invokeTask (zone-evergreen.js:485) at ZoneTask.invoke (zone-evergreen.js:470)

제발, 이것은 매우 중요합니다.