Html2canvas: сделать снимок экрана карты Google с помощью javascript

Созданный на 13 дек. 2014  ·  7Комментарии  ·  Источник: niklasvh/html2canvas

Привет

Я пробовал следующий код: этот div "# map-canvas" содержит карту Google.
$ ('# map-canvas'). html2canvas ({
onrendered: function (canvas) {
var img = canvas.toDataURL ("изображение / png");
window.open (img);
}
});
}

Используя этот код, я получаю пустую карту.
Пожалуйста, найдите вывод карты Google.

Дайте мне знать, как решить эту проблему.

googlemapimageusinghtml2canvas

Question

Самый полезный комментарий

Передача useCORS: true в параметрах устранила проблему для меня. Также allowTaint: false . Было бы полезно, если бы вы выполняли функцию после того, как все плитки видны, вы можете прослушать tilesloaded и выполнить html2canvas после того, как это произойдет.

Все 7 Комментарий

Вы не можете отображать изображения (в данном случае плитки Google Maps), которые находятся в другом источнике, если они не обслуживаются с заголовками cors . Один из способов решить эту проблему - использовать прокси для изображений.

Я пробовал использовать прокси-сервер php, но столкнулся с ошибкой: «Не пойман.
SecurityError: не удалось выполнить toDataURL на HTMLCanvasElement:
Испорченные холсты не могут быть экспортированы ".

Я пробовал этот прокси-сервер:
https://github.com/brcontainer/html2canvas-php-proxy ,
С указанным выше прокси-сервером я использовал направление карты Google:
https://developers.google.com/maps/documentation/javascript/examples/directions-simple

В сб, 13 декабря 2014 г., 23:11, Никлас фон Герцен <
[email protected]> написал:

Вы не можете отображать изображения (в данном случае плитки Google Maps), которые находятся под
различное происхождение, если они не обслуживаются с заголовками 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_

Я столкнулся с той же проблемой. Вы нашли для этого решение? Я хочу получить снимок экрана для карт Google с помощью html2canvas. Оцените ваш ответ.

Удар. Любые обновления?

Передача useCORS: true в параметрах устранила проблему для меня. Также allowTaint: false . Было бы полезно, если бы вы выполняли функцию после того, как все плитки видны, вы можете прослушать tilesloaded и выполнить html2canvas после того, как это произойдет.

Я столкнулся с той же проблемой. Я пробовал использовать useCORS: true и allowTaint: false в параметрах карты, но это не помогло. Я пытаюсь сделать снимок экрана только после загрузки страницы. Я что-нибудь упускаю?

У меня тоже возникает проблема при создании снимков экрана Google Maps, я получаю эту ошибку:
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)

Пожалуйста, это очень важно.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги