Html2canvas не работает с Google Maps Pan - программирование

Я использую html2canvas для сохранения моей онлайн-карты в качестве изображения (см. ссылку "Сохранить как изображение" ). Я пробовал это в Firefox, Chrome и Opera.

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

Картинка правильно отображается, но html2canvas использует старую точку центра и карту. Почему это?

Для поддержки получения изображений из разных доменов у меня есть параметр:

useCors: true;

Я пробовал следующие решения

- Изменение типа карты вручную. Иногда это исправляет.

-Тергирование события изменения размера браузера - не полезно.

-Использовать setTimeout(), чтобы подождать 2000 мс, чтобы гарантировать, что плитки загружены - не полезно

-Использование прокси (html2canvas_proxy_php.php) - не полезно

-Использование события простоя google maps для ожидания перехода в режим ожидания до сохранения - не полезно

Ответ 1

По-видимому, проблема, по-видимому, связана с тем, что html2canvas не может преобразовывать css-преобразования, по крайней мере, в хром (я мог только воспроизвести проблему в chrome, на OSX). Контейнер, содержащий плитки, преобразуется с помощью -webkit-transform. Итак, что мы можем сделать, это захватить значения, которые перемещают контейнер, удалить преобразование, назначить left и top из значений, которые мы получили transform, затем использовать html2canvas. Тогда карта не сломается, мы reset значения kc map, когда выполняется html2canvas.

Итак, я вложил это в консоль javascript на вашем сайте и на нем, казалось, работал

//get transform value
var transform=$(".gm-style>div:first>div").css("transform")
var comp=transform.split(",") //split up the transform matrix
var mapleft=parseFloat(comp[4]) //get left value
var maptop=parseFloat(comp[5])  //get top value
$(".gm-style>div:first>div").css({ //get the map container. not sure if stable
  "transform":"none",
  "left":mapleft,
  "top":maptop,
})
html2canvas($('#map-canvas'),
{
  useCORS: true,
  onrendered: function(canvas)
  {
    var dataUrl= canvas.toDataURL('image/png');
    location.href=dataUrl //for testing I never get window.open to work
    $(".gm-style>div:first>div").css({
      left:0,
      top:0,
      "transform":transform
    })
  }
});