如何使用部分Google地图的屏幕截图使用JavaScript

Question

在我的页面上，有一个容器使用Google Maps API显示地图，下方有一个按钮，用户可以将地图拖动到某个位置，然后点击按钮，我想截取屏幕截图现在在容器中显示的地图，并在画布中显示它。是否可以使用纯JavaScript执行此操作？

只需支持Chrome

Answer 1

没有浏览器支持将很难做到。但您可以使用Google Static Maps API： https://developers.google.com/maps/documentation/staticmaps/

示例：https://developers.google.com/maps/documentation/staticmaps/#quick_example

---

有一些项目可以将HTML DOM绘制到画布上：

• HTML2Canvas：http://html2canvas.hertzen.com/index.html
• jsFeedback：http://hertzen.com/experiments/jsfeedback/

您还可以将javascript与某些服务器端解决方案（使用webkit）集成，例如phantomjs

代码示例:(阅读更多here）

var page = require('webpage').create();

page.open('http://www.google.com', function() {

    page.viewportSize = {width: 1024, height: 768};
    page.render('screenshot.png');
    phantom.exit();
});

---

如果您只需要特定范围的用户使用Chrome解决方案，您可以编写自己的Chrome扩展程序来执行此操作：Taking screenshot using javascript for chrome extensions