截取 html 中某些元素的屏幕截图

Question

所以我想知道，如果我有一个 div，其中包含由一些制造商渲染的谷歌地图的地图，并且我想为该元素拍照，我该怎么做？我发现 this solutions 这是一种方法我需要什么，但问题是发送 url 对我没有帮助，我需要带有所有标记的特定 Div。对于服务器端，我使用 C#，对于客户端，使用带有 jquery 的 asp.net。还有谷歌地图apiV3来处理地图

Answer 1

看看 Nihilogic Labs 的 Canvas2Image 库：

http://www.nihilogic.dk/labs/canvas2image/

这是一个如何通过 JavaScript 截取元素的示例：

var oCanvas = document.getElementById("thecanvas");    
Canvas2Image.saveAsPNG(oCanvas);

编辑

您也可以看看Html2Canvas 和FlashCanvas。我相信其中之一支持早期的浏览器（不支持 HTML5 的浏览器）。

Answer 2

使用您提到的链接中的方法并将生成的图像裁剪为您的 div 的尺寸。您可以在 JavaScript 中使用 myDiv.getBoundingClientRect() 来获取 div 的尺寸。

使用WebBrowser control，您可以使用 html 或 JavaScript 操作文档，以使页面处于您需要截取屏幕截图的状态。

Answer 3

您是否考虑过使用 Google Maps Static API - 这会将带有标记的地图图像呈现为 PNG。