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

回答

相關問題