javascript - 如何使用 JavaScript 截取部分谷歌地图的截图

Question

在我的页面上，有一个使用 Google Maps API 显示地图的容器，它下面有一个按钮，用户可以将地图拖到一个位置，然后单击按钮，我想截取地图现在显示在容器中并将其显示在画布中。可以用纯 JavaScript 做到这一点吗？

只需要支持Chrome

Answer 1

没有浏览器支持将很难做到。但您可以使用 Google 静态地图 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

代码示例：（在这里阅读更多）

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 扩展来执行此操作：使用 javascript 为 chrome 扩展截屏