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

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="https://img-blog.csdnimg.cn/2022010617170440536.png">
<!--         <img alt="" role="presentation" src="http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China/tileImage.png?width=256&amp;height=256&amp;redirect=false&amp;transparent=false&amp;cacheEnabled=true&amp;origin=%7B%22x%22:-20037508.342789244,%22y%22:20037508.342789244%7D&amp;overlapDisplayed=false&amp;scale=3.3803271432053105e-9&amp;x=0&amp;y=0" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(128px, 0px, 0px); opacity: 1;"> -->    </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 printMap(id) {//1.将div转成svgvar divContent = document.getElementById(id).innerHTML;//防止#号问题var newData = "";for(var i = 0; i < divContent.length; i++){if(divContent.substr(i,1) == "#"){newData += '%23';}else{newData += divContent.substr(i,1);}} //将图片转成所有base64var data = "data:image/svg+xml,"+ "<svg id='abcdddd' xmlns='http://www.w3.org/2000/svg' width='500' height='500'>"+ "<foreignObject width='100%' height='100%'>"+ "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>"+ newData + "</div>" + "</foreignObject>" + "</svg>";var img = new Image();img.src = data;document.getElementById(id + "Img").appendChild(img);imgObj = img;}function saveMap() {var img = imgObj;//document.getElementById("ssssssssssss").getElementsByTagName("img");//2.svg转成canvasvar 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;// downloadsaveFile(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;//将图片绘制到canvasvar 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:1251767927@qq.com

获取地图转成图片技术分析相关推荐

arcgis中如何导出奥维可识别的图_如何将地图及奥维对象导出成图片 | 奥维互动地图浏览器...
将地图导出成图片只能在Windows客户端软件进行,手机版.网页版无此功能:并且需要开通VIP才可以执行此操作,导出的图片像素大小和VIP级别有关,详见表1: 表1 将地图导出成图片的具体操作步骤: ...
php 文字图片怎么保存为图片,php技术实现加载字体并保存成图片
下面通过一段代码给大家详解介绍下php技术实现加载字体并保存成图片. // Set the content-type header("Content-type: image/png" ...
vue获取后台的文件流并且转换成图片
vue获取后台的文件流并且转换成图片 1.添加request的responseType export function addCode(Equip,data) { return request({ m ...
计算机识别技术检测交通标志图片大全,交通标志检测与识别技术分析
摘要:本文阐述了交通标志的检测,交通标志的识别等内容. 交通标志的检测与识别是一项十分艰巨的时代任务,要求相关工作人员认真在实践中进行思考和探索,保证对于交通标志进行细化的研究,这对于智能代步工具的 ...
获取网页字体图标转成图片
将字体图标转成图片第一步:获取字体图标文件在网页控制台中的network标签里差找请求的 tff 文件在所需要的文件上右键选择在新页面中打开然后下载该文件第二步将tff文件转为svg文件 ...
C#技术分享【PDF转换成图片——13种方案】
1.[O2S.Components.PDFRender4NET.dll],第三方DLL,可以实现PDF转图片,支持32位系统.64位系统官方试用版的dll左上角会有一排红色水印,下面这个是破解版的没 ...
C#技术分享【Word转换成图片和PDF——2种方案】
上个工作完成之后,老大接着又布置一个任务,要求把Word转成图片,这次时间没有那么充裕,所以也没有研究的很深入,只跟大家分享2个很容易实现的方法. [Aspose.Words]第三方破解插件:其功能无 ...
C#技术分享【PDF转换成图片——13种方案】（2013-07-25重新整理） .
Acrobat.dllc#PDFPDFRender4NET.dllpdf转图片写在最前面:为了节约大家时间,博主把最常用的方法写在第一条,如果不满足您的需要,您可以继续往后看. 如果看完全文还是不能 ...
Google VP8 Code 首次深入技术分析 1
The first in-depth technical analysis of VP8 首次深入技术分析 Back in my original post about Internet video, ...

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

Canvas实现技术详细步骤

代码：

mail:1251767927@qq.com

获取地图转成图片技术分析相关推荐

最新文章

热门文章