如何截取部分Google地图的屏幕截图使用JavaScript [英] How to take the screenshot of part of Google Maps use JavaScript
问题描述
在我的网页上,有一个容器使用Google Maps API显示地图,其下方有一个按钮,用户可以将地图拖动到某个位置,然后点击按钮,我想截取屏幕截图的地图显示在容器中,并将其显示在画布中。
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?
推荐答案
只需要支持Chrome
这将是很难做到没有浏览器支持。但您可以使用Google Static Maps API:
https://developers.google.com/maps/documentation/ staticmaps /
It will be hard to do without browser support. But you can use Google Static Maps API: https://developers.google.com/maps/documentation/staticmaps/
示例: https: //developers.google.com/maps/documentation/staticmaps/#quick_example
有一些项目将HTML DOM绘制到画布:
There is some projects to draw HTML DOM to canvas:
- 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/
您还可以将JavaScript与某些服务器端解决方案(使用webkit)例如 phantomjs
You can also integrate javascript with some server-side solution (using webkit) for example 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();
});
如果您只需要对特定范围用户可以编写自己的Chrome扩展程序来执行此操作:使用javascript进行Chrome截图扩展
这篇关于如何截取部分Google地图的屏幕截图使用JavaScript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!