如何使用 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
• js反馈：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