html2canvas实现将地图截屏输出图片（设置图片标题，自动下载截图的图片）

jimjiayu

已于 2024-05-21 15:32:42 修改

阅读量5.8k

点赞数 2

于 2019-11-11 11:22:24 首次发布

本文链接：https://blog.csdn.net/zhongshijun521/article/details/103006774

版权

javascript 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

ArcGIS API For JavaScript

2 篇文章 0 订阅

订阅专栏

html2canvas文档：html2canvas

<div id="map"></div>
    <canvas id="myCanvas" width="800" height="600" style="display:none;">
	</canvas>
    <div id="box">
        <button id="export">出图</button>
 </div>

$("#export").click(function(){
          setTimeout(function(){
	       var canvasImgSizeArr = [ $('#map')[0].offsetWidth, $('#map')[0].offsetHeight ];
		   html2canvas($('#map')[0], {
		      useCORS:true,//保证跨域图片的显示，如果为不添加改属性，或者值为false,地图底图不显示
		     x:window.pageXOffset, //页面在水平方向的滚动距离
		     y:window.pageYOffset,//页面在垂直方向的滚动距离
		     onrendered: function (canvas) {
		     var img = new Image();
		     var canvas2 = document.getElementById("myCanvas");
		     var ctx = canvas2.getContext('2d');
		    ctx.fillStyle="#FFFFFF";//画布填充色    	                                    ctx.fillRect(0,0,canvasImgSizeArr[0],canvasImgSizeArr[1]);
		    ctx.lineWidth="1";
		    ctx.rect(20,30,canvas2.width-40,canvas2.height-60);//矩形距离画布左上角水平和垂直距离，矩形的宽高
		    ctx.stroke();
		    img.src = canvas.toDataURL(); 
		                                	  
		    img.onload=function(){
		         // 绘制图片
		          ctx.drawImage(img,24,34,canvas2.width-48,canvas2.height-68);    //图片距离画布左上角水平和垂直距离，图片的宽高
		          // 绘制水印
		          ctx.font="15pt Arial";  //水印文字添加
		          ctx.fillStyle = "#000000"; //设置画布背景色
		          var text = "全国省级边界图";
		          ctx.textBaseline = 'bottom';
		          ctx.fillText(text,(canvas2.width/2-ctx.measureText(text).width/2), 27);//文字的位置
			      var a = document.createElement("a");
			      a.setAttribute("id", "download3");
			      document.body.appendChild(a);
			       //以下代码为下载此图片功能
			      var triggerDownload = $("#download3").attr("href", canvas2.toDataURL()).attr("download", "专题图.png");
			      triggerDownload[0].click();
			       //移除下载a标签
			      document.body.removeChild(a);
		        }
		      }
		                                  
		 });	     
	                              
	              },500);
   })

完整代码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Test Map</title>
    <link rel="stylesheet" href="../js/arcgis_js_api/library/3.17/3.17/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="../js/arcgis_js_api/library/3.17/3.17/esri/css/esri.css">
    <style>
        html,
        body,
        #map {
            margin: 0;
            padding: 0;
            width: 800px;
            height: 600px;
            position: relative;
        }
    </style>
    <script src="../js/arcgis_js_v317_api/arcgis_js_api/library/3.17/3.17compact/init.js"></script>
    <script src="../js/jquery-1.11.3.js"></script>
    <script src="../js/html2canvas.min.js"></script>
    <script src="../js/canvas2image.js"></script>

   
    <script>
        var map;
        require([
            "esri/map",
            "esri/geometry/Extent",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/layers/FeatureLayer",
            "dojo/parser",
            "dojo/domReady!"
        ], function (
            Map,
            Extent,
            ArcGISTiledMapServiceLayer,
            FeatureLayer,
            parser
        ) {
                parser.parse();
                map = new Map("map", {
                    center: [116.389160, 39.91816],
                    zoom:4
                });
                //切片地图
                var tiledMapServiceLayer = new ArcGISTiledMapServiceLayer(
                    "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer"
                );
                //添加省份服务
				var provinceLayer = new FeatureLayer("http://59.108.92.196:8061/arcgis/rest/services/provincelayer/MapServer/0", {
					showLabels : true,
					outFields : [ "*" ],
					visible : true
				});
                map.addLayer(tiledMapServiceLayer);
                map.addLayer(provinceLayer);
                $("#export").click(function(){
                    	  setTimeout(function(){
	                    	var canvasImgSizeArr = [ $('#map')[0].offsetWidth, $('#map')[0].offsetHeight ];
		                              html2canvas($('#map')[0], {
		                            	  useCORS:true,//保证跨域图片的显示，如果为不添加改属性，或者值为false,地图底图不显示
		                            	  x:window.pageXOffset, //页面在水平方向的滚动距离
		                            	  y:window.pageYOffset,//页面在垂直方向的滚动距离
		                                  onrendered: function (canvas) {
		                                	  var img = new Image();
		    	                    		  var canvas2 = document.getElementById("myCanvas");
		    	                              var ctx = canvas2.getContext('2d');
		    	                              ctx.fillStyle="#FFFFFF";//画布填充色
		    	                              ctx.fillRect(0,0,canvasImgSizeArr[0],canvasImgSizeArr[1]);
		    	                              ctx.lineWidth="1";
		    	                              ctx.rect(20,30,canvas2.width-40,canvas2.height-60);//矩形距离画布左上角水平和垂直距离，矩形的宽高
		    	                              ctx.stroke();
		                                	  img.src = canvas.toDataURL(); 
		                                	  
		                                	  img.onload=function(){
		                                		// 绘制图片
		                                          ctx.drawImage(img,24,34,canvas2.width-48,canvas2.height-68);    //图片距离画布左上角水平和垂直距离，图片的宽高
		                                          // 绘制水印
		                                          ctx.font="15pt Arial";  //水印文字添加
		                                          ctx.fillStyle = "#000000"; //设置画布背景色
		                                          var text = "全国省级边界图";
		                                          ctx.textBaseline = 'bottom';
		                                          ctx.fillText(text,(canvas2.width/2-ctx.measureText(text).width/2), 27);//文字的位置
			                                      var a = document.createElement("a");
			                                      a.setAttribute("id", "download3");
			                                      document.body.appendChild(a);
			                                      //以下代码为下载此图片功能
			                                      var triggerDownload = $("#download3").attr("href", canvas2.toDataURL()).attr("download", "专题图.png");
			                                      triggerDownload[0].click();
			                                      //移除下载a标签
			                                      document.body.removeChild(a);
		                                	  }
		                                	  }
		                                  
		                              	});	     
	                              
	                    	  },500);
                })

            });
    </script>
</head>

<body>
    <div id="map"></div>
    <canvas id="myCanvas" width="800" height="600" style="display:none;">
	</canvas>
    <div id="box">
        <button id="export">出图</button>
    </div>
</body>

</html>

截图效果：
在这里插入图片描述