Добрый день!
Есть проблема:
Использую leaflet.js для отображения карт, геометрия полигонов в формате свг. Хочу получить png страницы. Для конвертации из svg на canvas использую canvg(свойства translate3d и viewBox заимствуются у svg дива), а для преобразования страницы в png использую html2canvas, но при формировании финальной картинки канвас(полученный при конвертации из свг в канвас) обрезается.
Имею следующую структуру:
<div id="map" class="leaflet-container leaflet-fade-anim leaflet-grab" tabindex="0" style="outline: medium none;">
<div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(753px, 48px, 0px);">
<div class="leaflet-pane leaflet-overlay-pane">
<svg id="chtoto" class="tempHide" pointer-events="none" width="2304" height="424" style="transform: translate3d(-945px, -83px, 0px); display: none;" viewBox="-945 -83 2304 424" data-html2canvas-ignore="true">
<canvas id="canvas1" class="screenShotTempCanvas" style="transform: translate3d(-945px, -83px, 0px); position: absolute; width: 2304px; height: 424px;" viewbox="-945 -83 2304 424" width="2304" height="424"></canvas>
и так далее.
Сама проблема кроется в translate3d, на карте канвас преобразованный из svg ложится верно, но когда html2canvas его использует он его обрезает справа и по нижней линии. В приведенном примере структуры канвас обрезается справа на 192 пикселя, а снизу на 35 пикселей, т.е. обрезка равна разнице между
<div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(753px, 48px, 0px);">
и
<canvas id="canvas1" class="screenShotTempCanvas" style="transform: translate3d(-945px, -83px, 0px);
самое что интересное тайлы карты нормально отображаются, а канвас режется....
как это исправить?
Можно и костыль какой-нибудь.
Заранее спасибо!
