获取地图转成图片技术分析

Canvas实现技术详细步骤

   1.获取当前div大小

   2.获取div中所有图片

   3.获取div中图片存在位置left top

   4.遍历当前地图中的图片

       4.1分清地图层次
       4.2先遍历最下层画最下层到最上

   5.将canvas画布设置大小宽高和div一样

       5.1创建画布

       5.2设置2d状态
           getContext('2d');

       5.3调用画图方法
           drawImage(img, 10, 10);
           context.drawImage(img,x,y,width,height);
           context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

   7.将地图中的每张图片添加到画布中设置图片起始位置和大小



项目风险分析：
   1.Svg技术实现不了，因为目前img标签在svg中转换没成功！

代码：

<html>
<head>
<title></title>
<script type="text/javascript" src="./framework/jquery_2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./framework/iclient/include-leaflet.js" ></script>
</head>
<body >
   <div id="map" style="width: 500px;height: 500px;left:0px;position: fixed;background-color:#2ad027;">
       123
       <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF4AAAAdCAYAAAAjHtusAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozYWZlOGIwMi01MWE3LTRiZjYtYWVkYS05MGQ2ZTQ4YjZiMmUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODg0NkFBQUE3RjEzMTFFNzhFRjJFQkY4RjcxQjc1NjIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODg0NkFBQTk3RjEzMTFFNzhFRjJFQkY4RjcxQjc1NjIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4MWI3NzdhNC1lZmEyLTQ1MzUtOGQzNi03MmRjNDkyODMzN2UiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpjYTYzODVjMi1jNDQ1LTExN2EtYTc0ZC1lM2I5MzJlMGE4Y2QiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5q1HM0AAAF/ElEQVR42tSabYhUVRjHZ7W01C1uaCRW4F3oi9SXCUnwQ9gsGUFvOEtQH1bLu5VS9sbYh5KicjYt29qiGQwVg2xWWKgocob91AvC+CWsoJqB3qHMSdTMpZyeU/+Df07n3pk7997Z6cBv99z7nHvOvf/z/pxJNZvNVI/jCKXmv6EquAmVkxPSlvtp2GItr0/96fFQForChJAWDiVYTkMYMu4XBFcYjLOwWS3sNwmn8NGzZ0h4Flv/zwIdchAnh/slCGmmKUNIBzYPaXOUr0vPuEjD71JAPh7l61embzinhV3V8nnCGmGT8LwlzSL8/yUh4Tfjo9T/CgnCIYNKycA2Qq21AcHU/VHE80Idoo3Qs0W6p0UtUnkZvEMDeVcCyqxEafF7hL8Qf0oYsIj+lfC9cH1CwhchWAGCtZO+AooQOkdC1Km1VtCb63StW73uFSzgKFUkNwBbmZGGmqowhvg8ZNpH9oXChcIcYRdeNomgxLkaH+S1SGubAxyIpFv+Zp+0DYjrAS00j/dem2VGEl6FJ4Qa4quEu8j2hTCJ+GJhe4JjfQMf6JCYPPbysMPxBlp0BUKOogEF9Rg9/heNvNKYfM0KsZUZaYxX4STGrzJa+zbhPeFH2DcK10KItcI+pI0rVElwXl1ULaKnIJhDw0oRQpTQc1zcbwRU8ATy4DR6yMlTzwkqMziEWHvubJ4Nk4ZtHdnqwvwY17xq3Z4FjrG+z2Kdrdf2ZSGD+xlLPh6t1R0jP9fI22ZzKI92yvQl7EbmBxI4S7Y+vIAOL87QZqsc5uNnssxZIcfYjXT9snCR7jjobidp+FkxA2v+Cq1QervMDmp4P7Xs3YZtE9kOC3P/By6JGaETl8ElwueYTNTDq4UDsKnd7YfCNbT239LF1udS72xYJt1UWxNfN4IIP4bWuTpEja01JtMFZFsm/AHbtHBlDE6yasA4moYTrUbvdBTXHqUrAH4uSadbyzF+vbBM2IsNkS3MNa5305JxqfA02T4TnkX8XOH1mPw8ruVejpxbI9hZD2Cz1U7LdrrUvjP/WfZinNZhr6V27hP+FPZh9aLvLxVO4DllX0G2OcKnlO/DCblxaz6uXBtmi+8mBaP3/SP8IuEIiTRoPPQm2TaEmEyXo0JU+F0YiPFD0hhOsiE/vqeEVwyTgF8L51OilcIZ2I4Ll5NttvAJPfukUeB2sk0ZPSbKIUUJpCII7+DasWy08uhNNazT0wGHI7mAtB7KqMKm38HhDdAUibTVKGicbB8YAqrJ9DRsp43JdB4qUof1HQrPE6XTQWu3Ce/inVzjXhXpMiTwUYugNVQ+p80jrUsV5EH0POKeuXO9QjhFq5GryNYvfEMCDhsftYVsB9ETtG0V9ZjfhCURhbcJFpfwVZ9jvhxsLHwTYtp2svlWQw3vXL8UnqHVSIG8l8ex+tHhBXgjddgqHEZ8ufAA2aaEnYgrF/KrPXrEmMUqZ9THLW06xhoBaVueQpkug+ewOUphE3Qv2Q5gGamXYa+QbVq4O+DQ5FHyZqrjxNt7UHh9uuRa0F7HjCF8o9PCTOGnscM7g2u1Hl9C9oeEnxC/1ajZg8JLiM9Hj9GHJseMShwL2DO0G5yEWn3Zh1QUods5CPkIoqlwAZxhXMsb6HrcEPBxchhdJ6wj29vCW4hfLOzo8J3rltYX50nXQAATSf/K4DEaGlTLvplsk/QCpoD60EQ7gLYZc8H9wq+I3yncEOEcNhuz6HWf3XEiwU/4Y8YEqVp2P10rt+8REvBGw026i4aDcbL9jF8r8Blmf4fCOzhViiscskygXRdehf3CO4hfigmTBXyQrl8TFtD1IzQX3CbcQrY3hPcRv4z8OmHPXwchVNln2MmE7BX6VwIFi/he6uxvb6JM3m0fdqvx/ATidxg2JeC7VDErAw5NzGfvwRJVheEIQ8Mg/pdwIM+UOmi9Q8ivCsrIy0tF+wVbEcLrd3Pb2XisEb4Tdlhsi4WP4RBbaLGrHfC3PrvMIezy9rTpGm5lz9LOMG15xvFxD/j5gjzjjDbMOzk+9zzt3v5bgAEAibzFeFHVgYkAAAAASUVORK5CYII=">
   </div>

   <div id="mapImg" style="position: fixed;right:2px;top:0px;height: 600px;width:600px;border:1px solid #000;"></div>

   <div style="position:fixed;bottom:20px;">
       <input type="button" value="生成SVG图片" onClick="printMap('map')" />
       <input type="button" value="下载PNG图片" onClick="saveMap()" />
   </div>

</body>
<script type="text/javascript">
   var host = "http://support.supermap.com.cn:8090";
   var map, url = host + "/iserver/services/map-world/rest/maps/World";
   map = L.map('map', {
       crs : L.CRS.EPSG4326,
       center : [ 0, 0 ],
       renderer: L.svg(),
       maxZoom : 18,
       zoom : 1
   });
   L.supermap.tiledMapLayer(url).addTo(map);

var imgObj;

}

   function saveMap() {
       var img = imgObj;//document.getElementById("ssssssssssss").getElementsByTagName("img");
       //2.svg转成canvas
       var canvas = document.createElement('canvas'); //准备空画布
       canvas.width = img.width;
       canvas.height = img.height;

var context = canvas.getContext('2d'); //取得画布的2d绘图上下文
context.drawImage(img, 0, 0);

       //var a = document.createElement('a');
       //a.href = canvas.toDataURL('image/png'); //将画布内的信息导出为png图片数据
       //a.download = "MapByMathArtSys"; //设定下载名称
       //a.click(); //点击触发下载

       //3. 图片导出为 png 格式
       var type = 'png';
       var imgData = canvas.toDataURL(type);

       imgData = imgData.replace(_fixType(type), 'image/octet-stream');
       // 下载后的图片名
       var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;
       // download
       saveFile(imgData, filename);
   }

   var _fixType = function(type) {
       type = type.toLowerCase().replace(/jpg/i, 'jpeg');
       var r = type.match(/png|jpeg|bmp|gif/)[0];
       return 'image/' + r;
   };

   var saveFile = function(data, filename) {
       var save_link = document.createElementNS(
               'http://www.w3.org/1999/xhtml', 'a');
       save_link.href = data;
       save_link.download = filename;

       var event = document.createEvent('MouseEvents');
       event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0,
               false, false, false, false, 0, null);
       save_link.dispatchEvent(event);
   };

   //将图片转成base64数据格式
   function toBase64(id){
   //#target是目标图标,我们需要将其转换为base64格式
   var c=document.createElement("canvas");
   //设置canvas宽高为图片宽高
   c.width=$(id).width;
   c.height=$(id).width;
   //将图片绘制到canvas
   var cxt=c.getContext("2d");
   var img=new Image();
   img.src=$(id).attr('src');

   cxt.drawImage(img,0,0);
   //得到图片的base64编码数据
   var dd=c.toDataURL();
   //log出图片base64数据
   return dd;
   }


</script>
</html>

获取地图转成图片技术分析

代码：

mail:[email protected]

猜你喜欢