Карта Google не отображается при использовании html2canvas

Question

Карта Google не отображается при использовании html2canvas

1

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

Но на этом скриншоте карта google не отправляется. Для этого я использовал библиотеку html2canvas. Вот код:

HTML:

 <button type="button" class="btn btn-default btn-sm" id = 'screenShotBtn' onclick="takeScreenShot()">

JAVASCRIPT:

var takeScreenShot = function() {
var screenshot = {};
html2canvas(document.getElementById('screenAll'), {
    onrendered: function (canvas) {
        var tempcanvas=document.createElement('canvas');
        tempcanvas.width=1350;
        tempcanvas.height=700;
        var context=tempcanvas.getContext('2d');
        context.drawImage(canvas,0,0,1350,700,0,0,1350,700);
        var link=document.createElement("a");
        link.href=tempcanvas.toDataURL('image/jpg');   //function blocks CORS
        link.download = 'screenshot.jpg';
        link.click();
    }
});

И вот что я имею, когда делаю скриншот:

посмотреть скриншот

не могли бы вы рассказать мне, что случилось?

Olena Chaban 18 сен. 2017, в 16:18

Источник

Теги:

javascript

google-maps

html2canvas

screenshot

2 ответа

Ещё вопросы

DobromirM · Answer 1 · 2017-09-18T13-13-00.000Z

Я думаю, что это известная проблема, которая присутствует в Chrome.

Вы можете попробовать это обходное решение, которое я нашел:

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

Ссылка на оригинальную тему: https://github.com/niklasvh/html2canvas/issues/345

Olena Chaban · Answer 2 · 2017-09-18T12-55-00.000Z

Я добавил эти свойства в код, и он работает:

var takeScreenShot = function() {
    var screenshot = {};
    html2canvas(document.getElementById('map'), {
        useCORS: true,
        optimized: false,
        allowTaint: false,
        onrendered: function (canvas) {
            var tempcanvas=document.createElement('canvas');
            tempcanvas.width=1350;
            tempcanvas.height=700;
            var context=tempcanvas.getContext('2d');
            context.drawImage(canvas,0,0,1350,700,0,0,1350,700);
            var link=document.createElement("a");
            link.href=tempcanvas.toDataURL('image/jpg');   //function blocks CORS
            link.download = 'screenshot.jpg';
            link.click();
        }
    });
}