リーフレットの円がキャンバスの画像に保存されていません

Question

リーフレットマップを使用していて、10,20および30キロのリーフレットサークル半径を作成しています。サークルが作成されましたが、html2canvas関数の画像を保存しようとしました。リーフレットマップ（マーカー）は保存されていますが、円はキャンバスイメージを保存していません。

リーフレット円機能：

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機能：

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); 
     } 
     }); 

私を助けてください。ありがとう...

Answer 1

html2canvasはSVGを単独で変換することはできません。

リーフレットをロードする前にグローバルスイッチL_PREFER_CANVASを設定して、サークルがSVGの代わりにキャンバスとして直接レンダリングされるようにしてください。その後、html2canvasはそれらを使用できるはずです。

そうでなければ、html2canvasを適用する前に、SVGをキャンバスに変換するための他の投稿を探すことができます。