提供WebGIS网页应用到图片下载功能的方法

问题:

在诸如百度地图、天地图、高德地图等的在线地图应用上，用户要求能提供下载功能，并且不使用QQ截图等用户手工截图方式。

解决办法:

1.使用Java swt在后台部署服务器端浏览器应用，每次有请求过来，根据请求参数打开一个嵌入的浏览器窗口，然后调用相关api截取窗口，此过程中请求的地址页面需要考虑到除在线地图外的其他页面元素，需要做些手脚，比如在该服务器页面如果接收到了某些额外参数要隐藏在线地图外的其它元素。此实现太过复杂，可控性低，对服务器端造成的压力大(NO)

2.客户端装浏览器插件,js调用它，提供在线地图所在块的浏览器位置和获取浏览器窗口在屏幕的位置以定位，如果所在块没有在浏览器视野中需要页面跳转到该处。此实现需要编写浏览器插件，太过复杂，未找到可用开源插件，而且客户端需要对此另外安装插件。(NO)

3.使用html5的canvas的toDataURL()来处理，高德地图在chrome和firefox下使用canvas绘图，ie9未验证，ie8下未使用canvas，对调用高德地图的过程中所依赖的js文件下载下来然后在本地直接调用，修改依赖的天地图api有关js文件以解决toDataURL()的图片的跨域访问问题，在chrome下和firefox下能正常展示静态图片。此实现尚可，但是需要修改高德地图api的js文件，并且在得到<img>的过程中只有特定种类绘制的元素能显示出来，其它元素不在canvas之上，所以具有一定的局限性。(NO)

4.使用js工具将html转化成canvas，要求有解决图片跨域访问的能力。(YES)

1)下载html2canvas.js: https://github.com/niklasvh/html2canvas

2)下载用于跨域的专用代理服务器: https://github.com/niklasvh/html2canvas/wiki/Proxies

3) 编写代码调用js，后台部署专用代理服务器

源码：

<script type="text/javascript" src="js/html2canvas.js" ></script>

$("#btnExport").click(function(){
			html2canvas($("#map-t")[0], {
				  onrendered: function(canvas) {
				  	$('#mapimg').attr('src',canvas.toDataURL());
				    //document.body.appendChild(canvas);
				  },
				  proxy:"http://localhost:8000"
				});
			});

运行:

以windows下使用nodejs版后台专用代理程序为例:

1) 安装nodejs(省略)

2) cmd>npm install request -gd

    如果需要指定node运行所依赖的node_modules目录: cmd>set NODE_PATH=(指定安装node_modules的目录)

    到达解压缩的专用代理程序的目录后: cmd>node server.js

3) 运行HTTP服务器

总结:

1.使用天地图测试，该实现在最新版chrome/firefox/ie9下运行良好，在firefox下图片显示略模糊。其它在线地图未进行测试。

2.ie8及以下可以考虑使用其它js库来实现浏览器支持html5 canvas，html2canvas.js可能需要修改。

3.有限的元素支持，例如天地图在chrome下调用api绘制不规则多边形，页面元素将以svg元素呈现，而绘制矩形用了div，用此实现只会在图片中看到矩形，svg不被支持。