Html2canvas: Экспорт с помощью Leaflet

Приведите пример проблемы с использованием http://jsfiddle.net

Я добавил jsfiddle. https://jsfiddle.net/japiasente/7ybndo5L/

Требуется несколько уродливых хаков, чтобы заставить его работать. Вот простой пример без каких-либо исправлений:

http://jsfiddle.net/djwbra47/

Есть несколько проблем:

1. Круговой маркер обрезается до четверти круга. Похоже, что html2canvas обрезает элементы ДО применения каких-либо преобразований. Маркер будет центрирован на 0,0 без каких-либо преобразований, поэтому он обрезается до четверти круга, который будет виден в этом положении. Затем html2canvas преобразует его в фактическое местоположение. Я исправил это, установив левое и верхнее поля на 0 вместо отрицательного (чтобы весь маркер был виден в 0,0), а затем скорректировав преобразования на ту же величину. (И затем измените эти значения обратно после захвата холста, конечно.)
2. Линия появляется не в том месте. Похоже, html2canvas применяет преобразования к путям SVG ДВАЖДЫ. Без каких-либо исправлений линия отображается слишком далеко в левом верхнем углу. Если вы измените его преобразование на 0, оно будет отображаться на том же расстоянии слишком далеко в правом нижнем углу. Мне пришлось установить преобразование на половину исходных значений, чтобы заставить его работать.
3. При панорамировании карты тайлы обрезаются до исходного экстента. Это та же проблема, что и в пункте 1: Leaflet панорамирует карту, преобразуя панель карты, а html2canvas обрезает плитки до применения этого преобразования. Чтобы это исправить, добавьте значения преобразования X и Y к левому и верхнему значениям каждого изображения, а затем установите для их преобразования значение 0.
4. Когда вы панорамируете карту, html2canvas рисует плитки поверх маркера и линии, чтобы они больше не были видны. Это исправлено, когда вы вносите изменения в номер 3, но я не понимаю, почему. Может быть, порядок отрисовки меняется при обновлении свойств элемента?

Вот исправленная версия:
http://jsfiddle.net/oo2yms1h/

Есть еще одна проблема, которую я еще не решил: когда вы панорамируете карту так, что линия находится рядом с правым краем, она не отображается на холсте. Но я предполагаю, что это еще один результат обрезки html2canvas перед преобразованием.

Еще одно примечание: маркер листовки по умолчанию — это изображение, размещенное на сайте cdn.leaflet.com, которое выдает ошибку CORS, что означает, что оно не будет отображаться на холсте. Любой, кто использует его с html2canvas, должен будет разместить значок самостоятельно или переключиться на другой стиль маркера.

JAPiasente, похоже, что мое исправление в номере 3 можно адаптировать для решения ваших проблем с плиткой и панорамированием. Кроме того, ваши маркеры являются путями SVG и, похоже, страдают от той же проблемы двойного преобразования, что и моя строка в номере 2, они отображаются слишком далеко в левом верхнем углу. Вот версия с этими изменениями:

https://jsfiddle.net/6tn0zy48/

Все отображается в правильном месте, за исключением того, что маркеры обрезаются выше нижней части карты. Похоже, это та же проблема, над которой я все еще работаю.

Исправить эту последнюю оставшуюся проблему было несложно, нужно было просто установить преобразование на 0 и вместо этого использовать левое и верхнее.

Мой простой пример, обновленный:
http://jsfiddle.net/oo2yms1h/1/

И мое исправленное исправление для вашей карты:
https://jsfiddle.net/6tn0zy48/1/

Я работал в Chrome и только что заметил, что мое исправление не работает в Firefox и IE. Они задавали стили преобразования как translate вместо translate3d, и мой код предполагал, что это всегда будет translate3d. И они позиционировали плитки с помощью перевода, а не слева и сверху, как в Chrome. Этот обновленный пример переработан для всех трех браузеров. Плитки и значки маркеров работают во всех трех, но я все еще не могу отобразить пути SVG в Firefox и IE.

http://jsfiddle.net/oo2yms1h/3/

IE нужен html2canvas.svg, прежде чем он покажет строку, и он также не работает, когда в слое SVG установлены свойства преобразования или свойства left/top. Этот пример работает в IE и почти работает в Firefox:

http://jsfiddle.net/oo2yms1h/5/

Чтобы строка отображалась в Firefox, вам также необходимо переключиться на кодировку base64, внеся изменения в html2canvas, упомянутые в #648:
https://github.com/niklasvh/html2canvas/pull/648/files

Спасибо за вашу помощь. Единственная последняя проблема сейчас заключается в том, что если у меня есть оверлей svg поверх него, IE не очень хорошо с ним работает. Карта и наложение svg прекрасно работают в Chrome. Любые идеи?

@CraigVA Ты потрясающий. Я просто провел последние два дня, пытаясь решить эту проблему. Жаль, что я не наткнулся на ваши jsfiddles раньше. Спасибо!!!

У меня возникла проблема с использованием решения @CraigVA , из-за которой, если я вообще панорамирую карту, наложения будут смещены от центра плиток.

Чтобы бороться с этим, все, что я сделал, это функция redraw(), которая на секунду устанавливала вид в какое-то другое место в океане, а затем возвращала вид туда, где он был. Работает отлично.

function redraw() {
    var lat_tmp = map.getCenter().lat;
    var lng_tmp = map.getCenter().lng;
    map.setView([-66.22149259832975, -1.142578125]);
    setTimeout(function () {
        waitForTilesToLoad()
    }, 50000);
    map.setView([lat_tmp, lng_tmp]);
}

В случае, если кто-то столкнется с этим и имеет ту же проблему.

Привет, спасибо за этот хак, он работает хорошо, за исключением слоев Path и больших TileLayers.

• Если часть слоя пути (многоугольник/полилиния) выходит за границы оригинальной карты, она обрезается html2canvas при перемещении карты.
  Я обновил ваш код здесь http://jsfiddle.net/c8LL4qfo/ , добавив более длинную полилинию. Попробуйте переместить карту, вы увидите, что линия обрезается на холсте.
  Любые идеи о том, как решить эту ошибку?

• Второй момент: если tileLayers слишком велики, html2canvas не ждет рендеринга карты. Даже с UseCors=true. Есть ли способ дождаться загрузки tileLayers? Я думал об использовании события загрузки, но понятия не имею, как я мог.

Благодарность

Это все еще проблема с v1.0.0 ? Если да, не могли бы вы поделиться примером на jsfiddle .

Я решил эту проблему с помощью React: компонент листовки сбрасывается после перемещения карты, сохраняя в состоянии последний центр и уровень масштабирования. Конфликта с html2canvas больше нет, так как предоставленная карта является новой картой.

Хорошо, я сделал обновление в коде jsfiddle здесь: http://jsfiddle.net/2zkLkLxc/
В V1.0.0 больше нет проблем с отсечением, но у нас есть проблемы с отсечением значков (в любое время) и отсечением тайлов при перемещении карты.
Я пытался удалить хаки на плитках, и это ничего не меняет.

Это странно, потому что я обновил свой код до версии 1.0.0, и у меня нет обрезки значков.

Эта проблема была автоматически закрыта, так как не было ответа на наш запрос о дополнительной информации от первоначального автора. Имея только ту информацию, которая в настоящее время содержится в проблеме, у нас недостаточно информации для принятия мер. Пожалуйста, свяжитесь с нами, если у вас есть или вы найдете ответы, которые нам нужны, чтобы мы могли продолжить расследование.

У меня та же проблема, но я использовал Leaflet Map вместо Google Map.
Код ниже

var transform=$(".панель листовки-карты").css("преобразование");
если (преобразовать) {
var c = transform.split(",");
var d = parseFloat(c[4]);
var h = parseFloat(c[5]);
$(".листовая-карта-панель").css({
"преобразование": "нет",
"слева": д,
"сверху": ч
})
}
html2canvas(document.body).затем(функция(холст){
$(".листовая-карта-панель").css({
слева: 0,
верх: 0,
"трансформировать": трансформировать
})
} // Здесь используется html2canvas 1.0.0-alpha.9

@CraigVA Большое спасибо!

В настоящее время у меня есть проблема в stackoverflow, связанная с проблемой отсечения. Я использую листовку 1.3.1. Если кто-то может дать мне некоторые рекомендации, это было бы очень признательно. Проблема здесь.

@niklasvh Проблема все еще существует: http://jsfiddle.net/x3jzsg9b/4/

Проблема все еще существует: https://jsfiddle.net/x512pgjt/269/

@ амарандон @bomba1990

Попробуйте удалить заполнение de renderer с вашей карты. Это сработало для меня.

map.getRenderer(карта).options.padding = 0;

Это сработало прекрасно!

html2canvas(document.querySelector("#mapid"), {
разрешитьTaint: правда,
использоватьCORS: правда
}).тог(холст => {
document.body.appendChild (холст)
});