Добрый день уважаемые форумчане, никак не могу понять в чем проблема моего кода,
есть карта на основе лифлета, хочу получить его скриншот. Делаю это через html2canvas, но есть большая проблема, лифлет использует SVG графику для отображения объектов, поэтому пришлось воспользоваться canvg.js которая преобразует SVG элементы и вырисовывает их на канвасе, но при обрисовке канвас сдвигается...и я никак не могу понять, в чем проблема + пришлось преобразовывать свойство стиля SVG из transform:translate3d в transform:translate, так в библиотеке нет понимания 3д транслэйта
Я тут оставлю код страницы, все скрипты подключаемые должны работать, так как они идут через cdn.
Код большой, но при копировании он должен работать....
я уже неделю бьюсь над проблемой, но видимо не дано её так решить с наскока....
И ещё, если приблизить к объектам, то часть будет пропадать....
Канвас появляется на моменте нажатия синий кнопки, а удаляется когда сдвигается или зумируется карта....
Проблемный код в третьем теги скрипт(в конце)
Неправильно формируется сам канвас в моменте canvg(canvas,xml)
И сдвиг идет ровно на то количество пикселей, которые указаны в ViewBox
<html>
<head>
<meta charset="utf-8"/>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="https://select2.github.io/vendor/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script type="text/javascript" src="http://gabelerner.github.io/canvg/rgbcolor.js"></script>
<script type="text/javascript" src="http://gabelerner.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://gabelerner.github.io/canvg/canvg.js"></script>
<style type="text/css">
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
background-color: #ECE5CE;
}
#uptomap {
height: 500px;
width: 700px;
position: absolute;
z-index: 100;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border-radius: 20px;
border: 8px solid #F38630;
box-shadow: 0 0 30px rgba(0,0,0,0.7);
}
#map {
height: 500px;
width: 700px;
position: absolute;
z-index: 100;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border-radius: 20px;
border: 6px solid white;
}
.ui-button {
position:absolute;
top:10px;
right:10px;
z-index:1000;
}
.leaflet-control-custom{
width: 50px;
height: 70px;
background: #69D2E7;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.7);
}
.leaflet-control-attribution {
margin-right: 25px;
box-shadow: 0 0 7px rgba(255, 255, 255, 0.4);
border-radius: 5px;
}
</style>
</head>
<body>
<div id="uptomap"></div>
<div id="map"></div>
<script>
var map = L.map('map').setView([60,30], 8);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
</script>
<script>
var geojsonFeature ={
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 29.9593239057, 60.0376265505 ], [ 29.9930998542, 60.03992675612], [ 29.9930998542, 60.03992675612], [ 30.048369588160821, 60.0452932794 ], [ 30.0974982405, 60.0498924624], [ 30.1466268928, 60.054491004], [ 30.1742617598, 60.06521844], [ 30.1788675709, 60.0744106204 ], [ 30.189614463, 60.07977153929], [ 30.2111082490, 60.0828345302 ], [ 30.23260203, 60.087428483], [ 30.2494900, 60.0935527578], [ 30.264842712, 60.0989105648 ], [ 30.290942309, 60.0989105648 ], [ 30.32164771684, 60.09508364877 ], [ 30.349282583, 60.093552757891], [ 30.3723116, 60.08742848], [ 30.3815232, 60.0751765], [ 30.390734884, 60.06292000224 ], [ 30.4045523176, 60.051425381115], [ 30.422975562, 60.046826411], [ 30.436792995786064, 60.039160038744008 ], [ 30.44293407, 60.0299580417], [ 30.455216240416586, 60.02382195287], [ 30.467498403503544, 60.01615023934], [ 30.4767100258, 60.0015690774], [ 30.487456918519801, 59.989285216676862 ], [ 30.5258386781, 59.98006932788], [ 30.5473324633, 59.97392397640], [ 30.55654408, 59.964703810], [ 30.550403004, 59.949331162 ], [ 30.5381208412, 59.932413011], [ 30.5289092189, 59.917025], [ 30.528909218, 59.90778937933], [ 30.528909218, 59.8962407614 ], [ 30.528909218, 59.88391780872], [ 30.527373948, 59.8708196631], [ 30.5166270558, 59.858487281], [ 30.501274351, 59.85463247475], [ 30.472104214, 59.85231937618], [ 30.453680970, 59.8438366389], [ 30.44139880694, 59.82609301936 ], [ 30.4106933992, 59.8199191091], [ 30.373846909965355, 59.81374405483], [ 30.346212043, 59.812200112449112 ], [ 30.315506635302313, 59.81528792569371 ], [ 30.297083390, 59.83072270121], [ 30.2725190644, 59.834580277893], [ 30.244884197, 59.8260930193], [ 30.20650243, 59.8160598343], [ 30.186543922, 59.80679575 ], [ 30.160444326, 59.8037071508 ], [ 30.12820364, 59.8091120131], [ 30.10670986282387, 59.81528792569], [ 30.062187021, 59.816831725], [ 30.016128910, 59.821462693], [ 29.9639297169, 59.8214626939], [ 29.931689038, 59.8145159992], [ 29.894842549, 59.8122001124], [ 29.8457138972, 59.81297209], [ 29.821149571, 59.832265785], [ 29.8057968671, 59.855403471], [ 29.7704856483, 59.86927836550], [ 29.71368064404097, 59.8777546183 ], [ 29.6660872620, 59.893930555], [ 29.6614814509, 59.910098621033], [ 29.6799046955, 59.9508687482], [ 29.69218685, 59.986213538], [ 29.730568618, 60.0199863186], [ 29.7873736225, 60.0230548616 ], [ 29.95932390, 60.037626550] ] ] } }
]
};
function doStyle123(feature) {
return {
weight: 1.04,
color: '#000000',
fillColor: '#b6f666',
dashArray: '',
opacity: 1.0,
fillOpacity: 0.5
};
}
var geojsonlayer = L.geoJson(geojsonFeature, {
style: doStyle123
}).addTo(map);
</script>
<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();
$(".leaflet-control-container").attr("data-html2canvas-ignore", "true");
var svgElements = $("#map").find('svg');
svgElements.each(function() {
var canvas, xml;
canvas = document.createElement("canvas");
canvas.className = "screenShotTempCanvas";
$(canvas).attr("id", "canvas1");
var shet = $(this)[0].getAttribute("viewBox");
var shetArray = shet.split(" ");
var x = shetArray[0];
var y = shetArray[1];
//canvas.style.top = y;
//canvas.style.left = x;
$(this)[0].removeAttribute("style");
var transform = 'translate(' + x + 'px, ' + y + 'px)';
$(this)[0].style.webkitTransform = transform;
xml = new XMLSerializer().serializeToString(this);console.log(xml);
canvg(canvas, xml);
$(canvas).insertAfter(this);
$(this).attr('class', 'tempHide').attr("id", "chtoto").hide();
});
html2canvas($('#map'), {
allowTaint : false,
logging : false,
taintTest: false,
useCORS: true,
onrendered: function(canvas) {
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);
$(link).css("display", "none");
link.click();
document.body.removeChild(link);
}else{
alert('Скачивание поддерживается только в браузерах Chrome, Firefox и Opera')
};
}
});
},
});
map.addControl(new CustomControl());
map.on('zoomstart', function(event){
$("#map").find("#canvas1").remove();
$("#map").find('#chtoto').show().removeClass('tempHide');
});
map.on('dragstart', function(event){
$("#map").find("#canvas1").remove();
$("#map").find('#chtoto').show().removeClass('tempHide');
});
</script>
</body>
</html>
