Leaflet.js客户端 - syde截图白色支持翻译3d

美好的一天！我正在尝试使用html rasterize生成传单地图的截图。 usind translate3d和scale（硬件加速）库canvg和html2canvas的原因不能给我很好的结果。有谁知道我应该怎么做html截图？首先，作为绘画瓷砖 - 好吧（但它只是幸运的，因为html2canvas需要翻译[0]为x，并翻译[1]为y。如果图层有规模 - 它给了我错误的位置）Leaflet.js客户端 - syde截图白色支持翻译3d

5月有没有脚本可以解决这个问题？

来源

2016-02-12 Triple -B

您是否设法用canvg和html2canvas成功生成屏幕截图？ – MZH

是的，一步一步，我在画布上绘制翻译3d偏移量，但svg窗格我推入canvg（不Canvg.min.js，只Canvg.js），绘制在另一个画布上，而不是使用translate3d偏移它PARAMS。 –

谢谢。你能发布你如何在画布上偏移translate3d吗？我的SVG画在画布上偏移错误的位置，我再次感谢 – MZH

以下是类方法地图 - 是一般地图， mainpane - 克隆地图容器， CTX - 是主画布背景：

var mainpane = $(map.getContainer()).clone(); 
    var mapPane = mainpane.find(".leaflet-map-pane")[0]; 
    var mapTransform = mapPane.style.transform.split(","); 
    this.mapX = parseFloat(mapTransform[0].split("(")[1].replace("px", "")); 
    this.mapY = parseFloat(mapTransform[1].replace("px", "")); 
    var canvas = document.createElement("canvas"); 
    canvas.className = "screenShotCanvas"; 
    canvas.width = map.getSize().x; 
    canvas.height = map.getSize().y; 
    canvas.style.left = -this.mapX; 
    canvas.style.top = -this.mapY; 
    var ctx = canvas.getContext("2d"); 



drawSVGOnCanvas: function(map, mainpane, ctx) { 
    var overlayClass = $(map.getPanes().overlayPane).attr('class'); 
    var svgE = mainpane.find('.' + overlayClass.replace(' ', '.')).find('svg'); 
    var xml; 
    var svgElements = svgE[0]; 
    var svgElementsTransform = svgElements.style.transform.split(","); 
    var svgElementsX = parseFloat(svgElementsTransform[0].split("(")[1].replace("px", "")); 
    var svgElementsY = parseFloat(svgElementsTransform[1].replace("px", "")); 
    svgElements.style.transform = " "; 
    svgElements.style.left = svgElementsX + "px"; 
    svgElements.style.top = svgElementsY + "px"; 

    var svgCanvas = document.createElement("canvas"); 
    svgCanvas.className = "screenShotTempCanvas"; 
    svgCanvas.id = "SvgToCanvas"; 
    svgCanvas.width = map.getSize().x; 
    svgCanvas.height = map.getSize().y; 
    var svgCtx = svgCanvas.getContext("2d"); 

    svgE.each(function() { 
     L.DomUtil.getPosition(svgE); 
     xml = new XMLSerializer().serializeToString(this); 
     canvg(svgCanvas, xml); 
    }); 
    ctx.drawImage(svgCanvas, svgElementsX + that.mapX, svgElementsY + that.mapY); 
},

来源

2016-10-17 13:22:24

由于三B，我做了类似的事情。

 var that = this, 
      map_c = that.map.getContainer(); 

     //Check if have svg on map 
     var svg  = map_c.querySelector('svg'); 
     var _canvas = map_c.querySelector('canvas'); 

     if(svg) { 

      var svg_attr = { 
       w: parseInt(svg.attributes.width.value), 
       h: parseInt(svg.attributes.height.value) 
      }; 

      _canvas.width = svg_attr.w; 
      _canvas.height = svg_attr.h; 

      _canvas.style.display = 'block'; 

      var serializer = new XMLSerializer(); 

      var c = _canvas; 
      var ctx = c.getContext('2d'); 
      ctx.clearRect(0, 0, svg_attr.w, svg_attr.h); 

      var trans_val = map_c.querySelector('.leaflet-map-pane').style['transform'].replace('translate','').replace(/px/g,'').replace('(','').replace(')','').split(','); 

      var trans_y = parseInt(trans_val[trans_val.length - 1]) , 
       trans_x = parseInt(trans_val[trans_val.length - 2]); 


      ctx.translate(trans_x,trans_y); 
      ctx.drawSvg("<svg>"+serializer.serializeToString(svg)+"</svg>", 0, 0, svg_attr.w, svg_attr.h); 
      svg.style.display = 'none'; 
     }

来源

2016-10-17 19:25:54 MZH

Leaflet.js客户端 - syde截图白色支持翻译3d

回答

相关问题