canvas - リーフレット+canvg+html2canvas = MyImage.png

Question

親愛なる友よ、こんにちは。リーフレットマップからpngファイルを作成したい。私は html2canvas ライブラリを使用しており、リーフレット マップ タイルやその他の要素は png に変換されますが、svg-elements(offsets) には変換されません。すべての svg 要素を canvas(

var canvas = L.canvas();
var map = new L.Map('map', {layers: [osm], preferCanvas: true}); 

しかし、これは私にとって悪い方法です.なぜなら、extendを変更するとすべてのsvg要素がちらつくからです...

だから... CANVGを使用してリーフレットのsvgポリゴンをキャンバスに変換するにはどうすればよいですか? これは、svg要素のオフセットを持つpngを作成するための私のコントロールです

<script>
    var CustomControl = L.Control.extend({
            options: {
                position: 'bottomright'
            },
            onAdd: function (map) {
                var container = L.DomUtil.create('div', 'leaflet-control-custom');
                L.DomEvent.addListener(container, 'click', this._clicked,this);
                return container;
            },

            _clicked: function(e){
                e.preventDefault();
                window.jQuery(".leaflet-control-container").attr("data-html2canvas-ignore", "true");

                html2canvas(window.jQuery('#map'), {
                    allowTaint : false,
                    logging : true,
                    taintTest: false,
                    useCORS: true,
                    onrendered: function(canvas) { 
                        // canvas is the final rendered <canvas> element

                        var myImage = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                        var link = document.createElement('a');
                        if(link.download !== undefined){
                            link.download = "test.png";
                            link.href = myImage;                     
                            document.body.appendChild(link);
                            window.jQuery(link).css("display", "none");
                            link.click();
                            document.body.removeChild(link);
                        }else{
                            alert('WTF!!!')
                        }
                    }
                });
            }
        });
    map.addControl(new CustomControl());
</script>

HTML:

 <div class="leaflet-pane leaflet-overlay-pane">
    <svg pointer-events="none" class="leaflet-zoom-animated" width="1559" height="960" viewBox="-45 -861 1559 960" style="transform: translate3d(-45px, -861px, 0px);">
    <g>
    <path class="leaflet-interactive" stroke="#000000" stroke-opacity="1" stroke-width="1.04" stroke-linecap="round" stroke-linejoin="round" fill="#b6f666" fill-opacity="0.5" fill-rule="evenodd" pointer-events="visiblePainted" d="M787 -563L821 -569L826 -573L829 -578L843 -585L858 -583L862 -581L865 -572L874 -564L883 -545L894 -540L896 -537L892 -525L891 -507L888 -498L880 -496L877 -493L875 -486L857 -481L852 -482L848 -488L844 -489L832 -483L828 -479L824 -478L814 -482L797 -485L788 -485L782 -482L766 -481L759 -497L753 -502L742 -505L734 -511L733 -517L738 -544L745 -557L756 -558z"></path>
    <path class="leaflet-interactive" stroke="#000000" stroke-opacity="1" stroke-width="1.04" stroke-linecap="round" stroke-linejoin="round" fill="#b6f666" fill-opacity="0.5" fill-rule="evenodd" pointer-events="visiblePainted" d="M904 -689L884 -693L881 -702L888 -713L920 -734L924 -740L929 -739L934 -734L940 -717L951 -698L956 -675L961 -661L965 -639L962 -637L956 -637L953 -641L950 -658L948 -664L945 -666L938 -664L935 -660L925 -661L905 -668L906 -681L910 -681L912 -685L908 -690z"></path>
    </g>
    </svg></div>