Html2canvas: 使用javascript拍摄Google地图的屏幕截图

创建于 2014-12-13 · 7评论 · 资料来源: niklasvh/html2canvas

你好

我尝试了以下代码：此div“＃map-canvas”内容google map。
$（'＃map-canvas'）。html2canvas（{
onrendered：功能（画布）{
var img = canvas.toDataURL（“ image / png”）;
window.open（img）;
}
}）;
}

使用此代码，我得到空白地图。
请找到Google地图的输出。

让我知道如何克服这个问题。

googlemapimageusinghtml2canvas

Question

资料来源

hardikshah157

👍2

最有用的评论

在选项中传递useCORS: true对我来说解决了这个问题。此外， allowTaint: false 。如果在所有图块都可见之后执行该功能，将很有帮助，您可以听tilesloaded并在发生这种情况后执行html2canvas 。

orloxx 于 2017-03-02

❤2 🎉2 👍1

所有7条评论

除非渲染图像带有cors标头，否则您不能渲染位于不同原点的图像（在这种情况下为Google地图图块）。解决此问题的一种方法是使用图像代理。

niklasvh 于 2014-12-13

我曾尝试使用php代理服务器，但遇到错误：“未捕获
SecurityError：无法在“ HTMLCanvasElement”上执行“ toDataURL”：
被污染的画布可能无法导出。”

我已经尝试过此代理服务器：
https://github.com/brcontainer/html2canvas-php-proxy ，
通过上面的代理服务器，我使用了Google Map的方向：
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/zh-CN/docs/Web/HTTP/Access_control_CORS。
解决此问题的一种方法是使用图像代理。
-
直接回复此电子邮件或在GitHub上查看
https://github.com/niklasvh/html2canvas/issues/485#issuecomment -66884354
。

_HARDIK SHAH_

hardikshah157 于 2014-12-14

我正面临着同样的问题。您找到解决方案了吗？我想使用html2canvas获取Google地图的屏幕截图。感谢您的答复。

tarekahf 于 2016-11-25

👍1

磕碰。任何更新？

smittysmee 于 2017-02-28

orloxx 于 2017-03-02

❤2 🎉2 👍1

我正面临着同样的问题。我尝试在地图选项中使用useCORS：true和allowTaint：false，但这没有帮助。我试图仅在页面加载后获取屏幕截图。我有什么想念的吗？

NikhilDole 于 2019-07-30

拍摄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)

拜托，这很重要。

shaji-Dev 于 2019-09-01

此页面是否有帮助？

0 / 5 - 0 等级

Html2canvas: 使用javascript拍摄Google地图的屏幕截图

最有用的评论

所有7条评论

_HARDIK SHAH_

相关问题