Html2canvas: Проблема с созданием изображения карты (Google Maps)

Проблема в том, что карты Google используют матрицу преобразования CSS3, которая не полностью реализована в html2canvas.

Как мне это сделать?

Изображения Google Maps (изображения на внешнем сервере)?

Используйте прокси: https://github.com/niklasvh/html2canvas#how -does-it-work

brcontainer: Я считаю его незаконным (доступ к фрагментам карты напрямую с другого компьютера / прокси /). Единственный способ - использовать CORS.

Прокси- сервер

Прокси-сервер загружает внешний сервер, а html2canvas загружает изображение только после завершения загрузки.

Прочтите http://en.wikipedia.org/wiki/Same_origin_policy , чтобы разобраться в теме.

как использовать этот прокси?

Ссылка, по которой вы провели все ссылки на использование прокси (на языках php, C # (asp.net), python и VB (asp classic)).

Может вы не заметили ссылки на прокси, тогда я вам сюда дам:
https://github.com/niklasvh/html2canvas/wiki/Proxies

При использовании новой библиотеки всегда полезно прочитать README целиком.

@brcontainer Я знаю, что делает этот прокси - когда клиент хочет сделать снимок экрана, СЕРВЕР загружает все изображения в локальную папку, а затем клиент загружает их. Но это неправильно - потому что Google не разрешает прямое использование своих тайловых серверов - и с их точки зрения, кто-то случайно загружает множество тайлов на сервер, не просматривая веб-страницу ...

я использую Java.
у вас есть пример использования прокси?

@brcontainer И, как я уже упоминал, действительно существует проблема с преобразованиями CSS3, потому что карты Google, работающие в Google Chrome, используют их, поэтому карта не отображается при текущей реализации. Поверьте мне, у меня была эта проблема в проекте, который я написал ...

@bkralik Итак, как мне это сделать?
у тебя есть какой-нибудь пример?

Я тоже программирую на java (я уже создавал прокси на PHP, C # и VB), но я не успеваю создать прокси на Java, может быть, я смогу просто сделать это в воскресенье.

Его приложение - JSP или "Java Desktop"?

@brcontainer Это веб-приложение, использующее JSF, Primefaces, Javascript и Java.

@DanielSBelo JSF framework Я никогда не использовал, я программирую на чистой Java, без фреймворков, не знаю, легко ли будет реализовать текущий код с кодом в java-части. Я хотел ему помочь, но действительно не вовремя.

[отредактировано]
О поддержке преобразований css читайте: https://github.com/niklasvh/html2canvas#contributing

@DanielSBelo вы нашли для этого хорошее решение? У меня такая же проблема.

Сохранение карты как холста отлично работает в Firefox, но не может сохранить карту в Chrome. Я не думаю, что это напрямую связано с преобразованием, но более вероятно, что Chrome обрабатывает COR. Однако я совершенно застрял, пытаясь найти ответ.

@TGOlson Это действительно проблема с преобразованиями CSS3, потому что текущая версия html2canvas может отображать только «один уровень» преобразования - он не складывает их.
Вы можете убедиться, что проблема в преобразованиях, просто поиграв с картами Google - обычно дается скриншот, подобный этому:

(В css вся карта позиционируется правильно, но после отключения css3 это происходит)
Единственное решение - реализовать весь стек преобразований css3. Не знаю, идет ли это Никлас, но кто-то должен это сделать :-)

подписка

У меня тоже такая же проблема - только в Chrome. Я использую html2canvas-proxy-php. Другие браузеры работают нормально. Части карты просто отсутствуют ... похоже, это связано с изменением размера карты, добавлением / удалением наложений и т. Д.

К вашему сведению - если вам нужно быстро настроить и запустить некоторые функции захвата карт, вы всегда можете использовать Google Streetview или API статических карт. По сути, реконструируйте то, что текущий пользователь смотрит на карту ( map.getPov и т. Д.), А затем получите это статическое изображение из Google.

Я не думаю, что этот подход работает с наложениями

Я только что наткнулся на эту проблему. Если я не ошибаюсь, этот вопрос о stackoverflow демонстрирует эту проблему, и я предложил обходной путь, прочитав преобразования css3 и применив их как обычные позиции CSS.

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,
})

Возможно, преобразования css3 можно было бы проверить и автоматически преобразовать в нормальное позиционирование CSS во время рендеринга, а затем удалить их после рендеринга.

у меня непостоянная функция захвата экрана.
Работает после полной перезагрузки страницы (с помощью CTLR + R в firefox)

вот мой код, в основном он создает изображение 64 base / png захваченного экрана печати окна и конечный результат, который я помещаю в тег, чтобы увидеть, работает ли он.

Вот функция

функция ebfPrintScreen (имя_компонента)
{
html2cavnas
([document.body],
{
ведение журнала: правда,
useCORS: правда,
onrendered: функция (холст)
{
img = canvas.toDataURL ("изображение / jpg");

                                                  console.log(img.length);
                                                  console.log(img);

                                                  var imgComp = $c(conponentName);
                                                  imgComp.img.src = img

                                          }
                      }
                );

}

Основная цель - захватить маршрут карты Google после его создания, но, как я уже сказал, иногда это работает, а иногда нет. Есть какие-нибудь подсказки о том, что происходит?

Я с той же проблемой. Я делаю снимок карты после масштабирования и панорамирования, и большие части, чтобы выровнять всю карту, внезапно окутывались светло-коричневым цветом. Если у кого-нибудь есть исправление для этого в Chrome, дайте мне знать.

попробовал решение @mfirdaus , и оно работает для просмотра карты noraml, однако в просмотре улиц оно все еще не работает ... у кого-нибудь есть такая же проблема?

После применения решения @mfirdaus я смог получить изображение карты. Но каким-то образом этот код ниже делает карту непригодной для использования (но при этом может использоваться html2canvas):

$(".gm-style>div:first>div").css({ //get the map container. not sure if stable
      "transform":"none",
      "left":mapleft,
      "top":maptop,
    })

Есть ли способ «восстановить» то, что делает эта строка? А пока я снова вызываю функцию initMap, чтобы карта работала после вызова функции html2canvas с кодом преобразования.

Работает ли приведенный выше сценарий для Google Maps v3?

Мое требование - сделать снимок экрана Google Map v3 с нарисованным на нем маршрутом.

Он отлично работает в Firefox, но в Chrome нет маркера или маршрута. Я уже использую нестандартные маркеры.

Мне сложно отлаживать время, потому что в консоли нет ошибок, а ведение журнала настолько ограничено.

Кто-нибудь решил проблему в Хроме? Я пробовал сценарии прокси на двух языках, но, похоже, ни один из них не имеет значения.

У меня похожая проблема, копирую / вырезаю из интернета этот код:

  if($.browser.safari) {// Fix for Chrome
    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")[0]], {
    logging: false,
    useCORS: true,
    onrendered: function (canvas) {
      $('#screenshot').after(canvas);

      if($.browser.safari) {// Fix for Chrome
        $(".gm-style>div:first>div").css({
          left:0,
          top:0,
          "transform":transform
        });
      }
    }
  });

Это работает, но если я перемещаю карту с помощью обработчика, это не работает. Я работаю с маркерами, полигонами и т. Д. Он также работает в firefox (я могу перемещать карту), но не в хроме.

Любая идея ?

Фиксированный !

Исправление для хрома, которое я тупо скопировал / вставил, не сработало.

Я сделал это :

  if(window.chrome) {// Fix for Chrome
    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 > div.g-map-canvas > div > div > div:nth-child(1)")[0]], {
    logging: false,
    useCORS: true,
    onrendered: function (canvas) {
      $('#screenshot').after(canvas);

      if(window.chrome) {// Fix for Chrome
        $(".gm-style>div:first>div").css({
          left:0,
          top:0,
          "transform":transform
        });
      }
    }
  });

Очень длинный селектор в html2canvas предназначен для использования карты без кнопок и параметров.

Сейчас работаю, спасибо.

Спасибо @GCorbel Это очень хорошо работает с вашим решением.

Вышеупомянутые обходные пути работают для визуализации карты, но верхние элементы управления либо отсутствуют, либо находятся в неправильном положении. Любые идеи?

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

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

@niklasvh Я могу подтвердить, что это все еще проблема с последней версией. Вот скрипка, которую я создал при тестировании этой проблемы: http://jsfiddle.net/9agom947/4/

Скрипка показывает проблему, как описано в вопросе связанного stackoverflow, не обязательно в том, что находится в OP этого потока. Если вы не панорамируете карту, нет проблем с копированием карты. После панорамирования карты в Chrome, но не в FireFox, скопированная карта будет пустой за пределами области, которая была изначально загружена.

Исправление, приведенное в этом потоке, похоже, решает проблему.

@ Ananda-Pryana Я пробовал ваш jsFiddle, но исправление, похоже, больше не работает. Есть ли другое решение?

Заранее спасибо.

Похоже, что последняя версия карты Google (v3.32), выпущенная недавно, имеет новый экспериментальный рендерер.
https://developers.google.com/maps/documentation/javascript/releases

Это нарушило исправление. Я провел только быстрое тестирование, но похоже, что теперь все работает одинаково во всех браузерах (не только для Chrome), так что, надеюсь, это упростит исправление в следующей версии html2canvas?

Но быстрое решение - использовать старую версию gmap, где исправление все еще работает нормально.

@ Ananda-Pryana Ага, я понизил gmap, работал, спасибо.

Спасибо @ Ананда-Пряна! У меня была эта работа на прошлой неделе, затем я перенес ее на новую платформу, и я подумал, что именно этот ход сломал ее. Я полностью спускался в крысиную нору, полагая, что виновата новая среда. Я понизил рейтинг до 3.30, и все хорошо.

Похоже, что в новой версии Google Maps преобразование применяется к другому div. Использование решения @GCorbel , но с этим селектором (".gm-style> div: first> div: first> div: last> div"), похоже, работает. Хотя досконально еще не тестировал.

Совет @rSensation работал как шарм в последней версии. Спасибо!

Хм, похоже, эта проблема вернулась ко мне, мне нужно панорамировать карту, чтобы увидеть проблему, и когда я панорамирую и использую Html2Canvas для захвата экрана, некоторые области отображаются как пустые серые?

Для любого из вас, кто имеет дело с обрезанием оверлейных слоев -
Селектор @GCorbel преобразует только слой карты Google. Если у вас есть другие оверлеи, вам нужно будет найти, в каком div они находятся (например, $('.gm-style>div:first>div:first>div:first>div:first>div') был одним из моих оверлеев div и применить то же преобразование к CSS.

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

В настоящий момент я использую GmapMarker и GmapPolyline в качестве наложенных слоев.

@sunghunOW
Решение можно найти здесь https://github.com/niklasvh/html2canvas/issues/1568
Вы можете использовать инструмент проверки вашего браузера, чтобы увидеть, какие блоки div нуждаются в преобразовании.

Лучшее решение, которое я нашел:

    html2canvas($('.gm-style>div:eq(0)')[0],{
        useCORS: true,
        allowTaint: true,
        async:false,
    }).then(canvas => {document.body.appendChild(canvas)});

    html2canvas($('.gm-style>div:eq(0)')[0],{
        useCORS: true,
        allowTaint: true,
        async:false,
    }).then(canvas => {document.body.appendChild(canvas)});

Это дает мне холст не определен .. Должен ли селектор элементов слова из коробки?

@hseeda Спасибо! Ваш селектор помог мне!

Вот мой слегка измененный селектор, который действительно работает (по крайней мере, для меня, ха-ха)

const div = document.querySelector('#map > div:first-of-type')

html2canvas(div, {})

Однако теперь он отключает логотип Google, который всегда должен отображаться, чтобы соответствовать условиям :(

Хорошо, я просто клонирую узел или что-то в этом роде. Я уже давно борюсь с этой картой: D

Это работает для меня:

$('#snapshot').on('click',function () {
    html2canvas(document.querySelector('.gm-style'), 
           {useCORS:true, allowTaint: true,async:false} ).then(canvas => {
            document.body.appendChild(canvas)
    });
});

Проблема с пустой картой или ошибкой, генерирующей холст, была сложной, но в конечном итоге для меня это исправило добавление этой конфигурации:

ignoreElements: (node) => {
        return node.nodeName === 'IFRAME';
      }

html2canvas(mapWrapper, {
      useCORS: true,
      allowTaint: false,
      ignoreElements: (node) => {
        return node.nodeName === 'IFRAME';
      }
    }).then(canvas => {
      const url = canvas.toDataURL('image/png');
      saveAs(url, 'image3.png');
      window.URL.revokeObjectURL(url);
    });

Спасибо @imlinus и @hseeda ! Этот селектор у меня отлично работает! и он даже сохраняет логотип Google, спасибо!

@hseeda Спасибо! Ваш селектор помог мне!

Вот мой слегка измененный селектор, который действительно работает (по крайней мере, для меня, ха-ха)

const div = document.querySelector('#map > div:first-of-type')

html2canvas(div, {})

Однако теперь он отключает логотип Google, который всегда должен отображаться, чтобы соответствовать условиям :(

Хорошо, я просто клонирую узел или что-то в этом роде. Я уже давно борюсь с этой картой: D