如何使用 html2canvas 在 Naver 地图上捕获折线?

问题描述 投票:0回答:0

enter image description here

当我按下下面的按钮时,文件被捕获并保存,但粉红色的折线没有保存。我该怎么办?

喜欢 enter image description here

`

<div id="map" style="width: 600px; height: 600px;"></div>

<br>
<button onclick="capture();">캡쳐</button>

<script>
    
    var map = new naver.maps.Map('map',{
  center: new naver.maps.LatLng(37.4923615, 127.0292881),
  zoom:11
})
var rectangle = new naver.maps.Rectangle({
    strokeColor: '#ff00ff',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#ff00ff',
    fillOpacity: 0.35,
    bounds: new naver.maps.LatLngBounds(
        new naver.maps.LatLng(37.5924988, 127.1291527),
        new naver.maps.LatLng(37.5315893, 127.2149296)),
    clickable: true,
    map: map
});


function capture(){
    
    var input = document.querySelector("#map");
    html2canvas(input,{ allowTaint: true, useCORS: true }).then((canvas) => {
        var dataURL = canvas.toDataURL('image/png');
        var img = new Image();
        img.src = dataURL;
        var link = document.createElement('a');
        var str = 'asdffdas'
        link.download = String(str).substring(0,4)+'naver-map.png';
        link.href = dataURL;
        link.click();
    });
}

</script>
`
javascript jsp html2canvas
© www.soinside.com 2019 - 2024. All rights reserved.