如何使用 JavaScript 截取部分谷歌地图的截图
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11590620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to take the screenshot of part of Google Maps use JavaScript
提问by wong2
On my page, there is a container which use Google Maps API to display a map, there is a button below it, user can drag the map to a position, then click the button, I'd like to take the screenshot of the map displayed in the container now and show it in a canvas. Is it possible to do this with pure JavaScript?
在我的页面上,有一个使用Google Maps API来显示地图的容器,它下面有一个按钮,用户可以将地图拖动到某个位置,然后单击该按钮,我想截取地图的截图现在显示在容器中并将其显示在画布中。是否可以使用纯 JavaScript 做到这一点?
Just need to support Chrome
只需要支持Chrome
回答by rogal111
It will be hard to do without browser support. But you can use Google Static Maps API: https://developers.google.com/maps/documentation/staticmaps/
如果没有浏览器的支持,这将是很难做到的。但您可以使用 Google 静态地图 API:https: //developers.google.com/maps/documentation/staticmaps/
Example: https://developers.google.com/maps/documentation/staticmaps/#quick_example
示例:https: //developers.google.com/maps/documentation/staticmaps/#quick_example
There is some projects to draw HTML DOM to canvas:
有一些项目可以将 HTML DOM 绘制到画布上:
- HTML2Canvas: http://html2canvas.hertzen.com/index.html
- jsFeedback: http://hertzen.com/experiments/jsfeedback/
- HTML2Canvas:http://html2canvas.hertzen.com/index.html
- jsFeedback:http://hertzen.com/experiments/jsfeedback/
You can also integrate javascript with some server-side solution (using webkit) for example phantomjs
您还可以将 javascript 与一些服务器端解决方案(使用 webkit)集成,例如phantomjs
Code example: (read more 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();
});
If you need only chrome solution for specific range of users you can write your own chrome extension to do this: Taking screenshot using javascript for chrome extensions
如果您只需要针对特定用户范围的 chrome 解决方案,您可以编写自己的 chrome 扩展来执行此操作:使用 javascript 进行 chrome 扩展的截屏