Leaflet Circle spart nicht auf Leinwand Bild

Question

Ich benutze Leaflet Karte und erstellen Leaflet Kreisradius für 10,20 und 30 km. Der Kreis ist erstellt, aber ich habe versucht, Bild für html2canvas Funktion zu speichern. So wird die Map (Markierung) nur gespeichert, aber der Kreis speichert das Leinwandbild nicht.

Leaflet Kreisfunktion:

circle3 = L.circle(pointA, (30 * 1000), { color: 'red', fillOpacity: 0.07 ,fill:false,weight: 2}); 
    circle2 = L.circle(pointA, (20 * 1000), { color: 'green', fillOpacity: 0.07 ,fill:false,weight: 2}); 
    circle1 = L.circle(pointA, (10 * 1000), { color: 'blue', fillOpacity: 0.07 ,fill:false,weight: 2}); 

    circles.addLayer(circle3); 
    circles.addLayer(circle2); 
    circles.addLayer(circle1); 
    map.addLayer(circles); 

html2canvas Funktion:

html2canvas($('#map'), { 
      allowTaint : false, 
      logging : true, 
      taintTest: false, 
      useCORS: true, 
      onrendered: function(canvas) { 

      // canvas is the final rendered <canvas> element 
      dataURL = canvas.toDataURL("image/png"); 

      //map.panBy([100, 100]); 

      var dimensions = map.getSize(); 
      img.width = dimensions.x; 
      img.height = dimensions.y; 
      img.src = canvas.toDataURL(); 
      sample3.innerHTML = ''; 
      sample3.appendChild(img); 
     } 
     }); 

Bitte helfen Sie mir. Danke ...

Answer 1

Beachten Sie, dass html2canvas SVG nicht selbst konvertieren kann.

Sie sollten versuchen, den globalen Schalter L_PREFER_CANVAS vor dem Laden von Leaflet zu setzen, damit Ihre Kreise direkt als Canvas statt als SVG gerendert werden. Dann sollte html2canvas in der Lage sein, sie zu verwenden.

Andernfalls könnten Sie versuchen, nach anderen Posts zum Konvertieren von SVG in Leinwand vor der Anwendung html2canvas suchen.