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

html2canvas文档：html2canvas

    
	
    

        出图
 

$("#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);
   })

完整代码：

    
    
    
    
    
    
    
    
    
    

   
    



    

    
	
    

        出图
    

截图效果：