html2canvas «скриншот» элемента div, содержащего карту указателей Google.

Я пытаюсь сделать «снимок экрана» элемента div, в котором находится карта Google. Я использую html2canvas и не сталкиваюсь с какой-либо проблемой, когда речь идет о «обычных картах» (отображение некоторого местоположения с одним или несколькими маркерами на карте). Однако проблема возникает с помощью карты направлений движения - карты, которая соединяет две точки с вычисленным маршрутом. Эта карта, вероятно, не просто куча слоев/изображений, но также использует службы google servicesService и routesDisplay, которые отвечают за вычисление и рисование маршрута. (возможно, это невозможно сделать в фоновом режиме, когда html2canvas попытается восстановить «изображение»). Наконец, я получаю SecurityError: Не удалось выполнить 'toDataURL' в 'HTMLCanvasElement': Tainted canvas не может быть экспортирован.html2canvas «скриншот» элемента div, содержащего карту указателей Google.

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

Я знаю, что фон безопасности этой проблемы и принципы CORS. Анализ заголовков там может быть найдена строка Access-Control-Allow-Origin: *. Также каждая другая карта отображается без каких-либо проблем, поэтому я не вижу здесь основной причины этого конкретного проблема.

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

Это код:

 
    html2canvas(document.getElementById('map'), { 
 
     //"proxy": "/html2canvasproxy.php",  //proxy is not used
 
     "logging": true, 
 
     "useCORS": true, 
 
     "onrendered": function (canvas) { 
 
      var img = new Image(); 
 
      img.onload = function() { 
 
       img.onload = null; 
 
       img.setAttribute('crossOrigin', 'anonymous');  
       document.getElementById("output").appendChild(img);  
      }; 
 
      img.src = canvas.toDataURL("image/png");  //error line
 
     } 
 
    });

источник

2016-05-26 Oddomir

возможно дубликат HTTP: // StackOverflow. com/questions/18743166/why-google-maps-and-charts-are-not-supported-by-html2canvas-in-javascript? rq = 1 –

К сожалению, это не так. Как я уже сказал, я знаю основы безопасности этой проблемы и принципы CORS. При анализе заголовков можно найти строку Access-Control-Allow-Origin: *. Каждая другая карта отображается без каких-либо проблем, поэтому я не вижу здесь основной причины этой конкретной проблемы. Также вы можете увидеть в опции кода __ «useCORS»: true__. Пожалуйста, помогите, это сходит с ума :) – Oddomir

Никто? :) Может быть, попробовать PhantomJS или что-то еще вместо html2canvas? – Oddomir

Некоторые старые синтаксис и уродливый код, но это должно быть что-то, что работал в конце ...

screenShot (i) { 
     html2canvas(document.getElementById('map' + i), { 
      "logging": true, 
      "useCORS": true 
     }).then(function (canvas) { 
      var encodedString = canvas.toDataURL("image/png"); 

      // sending encoded base64 image to the server 
      googleMaps.$http.post('/api/screenshots', { 
       appraisalId: googleMaps.$data.appraisal_id, 
       encodedScreenshot: encodedString, 
       tag: 'googlemaps', 
       index: i, 
      }).then(function (response) { 
       googleMaps.setButtonsCaptions(); 
       console.log(response.data.success); 
      }, function (response) { 
       console.log(response); 
       console.log('Problem while sending screenshot to the server') 
      }.bind(googleMaps)); 
     }); 
    }

источник

2018-01-23 08:53:38 Oddomir

html2canvas «скриншот» элемента div, содержащего карту указателей Google.

ответ

Смежные вопросы