Html2canvas: 지도 이미지 생성 문제(Google Maps)

문제는 Google 지도가 html2canvas에서 완전히 구현되지 않은 CSS3 변환 매트릭스를 사용한다는 것입니다.

어떻게 해야 하나요?

Google 지도 이미지(외부 서버의 이미지)?

프록시 사용: https://github.com/niklasvh/html2canvas#how -does-it-work

brcontainer: 불법이라고 생각합니다(다른 컴퓨터 /proxy/에서 직접 지도 타일에 액세스). 유일한 방법은 CORS를 사용하는 것입니다.

@bkralik 프록시는 "차단된 사이트"에 액세스하기 위한 html2canvas용 프록시가 자바스크립트 API가 로컬 사이트에 있는 것처럼 외부 서버에서 이미지를 열 수 있도록 하는 경우 프록시 용어는 다른 것을 의미합니다.

프록시는 다운로드한 외부 서버를 만들고 html2canvas는 다운로드가 완료된 후에만 이미지를 로드합니다.

주제를 이해하려면 http://en.wikipedia.org/wiki/Same_origin_policy 를 읽으십시오.

이 프록시를 어떻게 사용합니까?

프록시 사용에 대한 모든 링크를 사용한 링크(php 언어 , C#(asp.net), python 및 VB(asp 클래식)).

프록시에 대한 링크를 눈치채지 못했을 수도 있습니다. 그러면 여기에서 알려 드리겠습니다.
https://github.com/niklasvh/html2canvas/wiki/Proxies

새 라이브러리를 사용할 때는 항상 전체 README를 읽는 것이 좋습니다.

@brcontainer 이 프록시가 하는 일을 알고 있습니다. 클라이언트가 페이지를 스크린샷하고 싶을 때 SERVER가 모든 사진을 로컬 폴더에 다운로드한 다음 클라이언트가 로드합니다. 하지만 그건 잘못된 것입니다. Google은 타일 서버를 직접 사용하는 것을 허용하지 않기 때문입니다. 그리고 그들의 관점에서 누군가 웹페이지를 보지 않고 갑자기 많은 타일을 서버에 다운로드하고 있습니다...

나는 자바를 사용하고 있습니다.
프록시를 사용하는 예가 있습니까?

@brcontainer 그리고 내가 언급한 것처럼 CSS3 변환에는 실제로 문제가 있습니다. Google 크롬에서 실행되는 googlemaps가 이를 사용하기 때문에 현재 구현에서는 맵을 스크리닝할 수 없기 때문입니다. 저를 믿으세요. 제가 작성한 프로젝트에 이 문제가 있었습니다...

@bkralik 그래서, 어떻게 할 수 있습니까?
예가 있습니까?

나도 자바로 프로그래밍을 하지만(이미 PHP, C # 및 VB로 프록시를 생성했다) 자바로 프록시를 생성할 시간이 아니다. 아마도 일요일에 할 수 있을 것이다.

응용 프로그램은 JSP 또는 "Java Desktop"입니까?

@brcontainer JSF, Primefaces, Javascript 및 Java를 사용하는 웹

@DanielSBelo JSF 프레임워크 저는 프레임워크 없이 순수 Java로 프로그래밍했는데 Java 부분의 코드로 현재 코드를 구현하는 것이 쉬울지 모르겠습니다. 나는 그를 돕고 싶었지만, 정말로 시기적절하지 않았다.

[편집됨]
CSS 변환 지원 정보: https://github.com/niklasvh/html2canvas#contributing

@DanielSBelo 이에 대한 좋은 솔루션을 찾았습니까? 같은 문제가 있습니다.

지도를 캔버스로 저장하면 Firefox에서는 제대로 작동하지만 Chrome에서는 지도를 저장하지 못합니다. 변환과 직접적인 관련이 있다고 생각하지 않지만 Chrome이 COR을 처리하는 방식일 가능성이 더 큽니다. 그래도 답을 찾으려고 완전히 막혔습니다.

@TGOlson html2canvas 의 현재 릴리스는 "한 레벨"의 변환만 렌더링할 수 있기 때문에 CSS3 변환에 정말 문제가 있습니다.
Google 지도를 가지고 놀기만 하면 문제가 변환에 있는지 확인할 수 있습니다. 일반적으로 다음과 같은 스크린샷이 제공됩니다.

(css에서는 전체 맵이 올바르게 배치되지만 css3을 비활성화한 후 이러한 일이 발생합니다.)
유일한 해결책은 전체 css3 변환 스택을 구현하는 것입니다. 나는 그것이 Niklas에 의해 진행되고 있는지 모르지만 누군가가 그것을해야합니다 :-)

구독

저도 같은 문제가 있습니다. Chrome에서만 가능합니다. html2canvas-proxy-php를 사용하고 있습니다. 다른 브라우저는 잘 작동합니다. 지도의 일부가 누락되었습니다.. 지도 크기 조정, 오버레이 추가/제거 등과 관련된 것 같습니다.

참고 - 일부 지도 캡처 기능을 신속하게 시작하고 실행해야 하는 경우 언제든지 Google 스트리트 뷰 또는 정적 지도 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 위치로 자동 변환한 다음 렌더링 후에 제거할 수 있습니다.

일정하지 않은 화면 캡처 기능이 있습니다.
페이지를 완전히 새로고침한 후 작동합니다(firefox에서 CTLR+R 사용).

여기 내 코드가 있습니다. 기본적으로 창의 캡처된 printreen의 64 기본/png 이미지와 내가 입력한 최종 결과를 생성하는 것입니다. 태그가 작동하는지 확인합니다.

여기 기능이 있습니다

함수 ebfPrintScreen(구성 요소 이름)
{
html2카브나스
([문서.본문],
{
로깅: 참,
useCORS: 사실,
onrendered: 함수(캔버스)
{
img = 캔버스.toDataURL("이미지/jpg");

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

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

                                          }
                      }
                );

}

주요 목표는 생성된 후 Google 지도 경로를 캡처하는 것이지만 내가 말했듯이 작동할 때도 있고 그렇지 않을 때도 있습니다. 무슨 일이 일어나고 있는지에 대한 단서가 있습니까?

같은 문제가 있습니다. 지도를 확대하고 패닝한 후 이미지를 찍으러 가는데 지도 전체가 갑자기 연한 갈색으로 뒤덮이게 됩니다. 누구든지 Chrome에서 이에 대한 수정 사항이 있으면 알려주십시오.

@mfirdaus 의 솔루션을 시도했지만

@mfirdaus 의 솔루션을 적용한 후 지도 보기를 캡처할 수 있었습니다. 그러나 어떻게든 아래의 이 코드는 지도를 사용할 수 없게 만듭니다(그러나 html2canvas는 사용할 수 있음).

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

해당 라인이 수행하는 작업을 "복원"하는 방법이 있습니까? 지금은 변환 코드와 함께 html2canvas 함수를 호출한 후 지도가 작동하도록 하기 위해 initMap 함수를 다시 호출하고 있습니다.

위의 스크립트가 Google Maps v3에서 작동합니까?

제 요구 사항은 경로가 그려진 Google Map v3의 스크린샷을 찍는 것입니다.

Firefox에서는 잘 작동하지만 Chrome에는 마커나 경로가 없습니다. 저는 이미 커스텀 마커를 사용하고 있습니다.

콘솔에 오류가 없고 로깅이 너무 제한되어 디버깅에 어려움을 겪습니다.

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

작동하지만 핸들러로 맵을 이동하면 작동하지 않습니다. 마커, 폴리곤 등으로 작업합니다. 파이어폭스에서도 작동하지만(지도를 이동할 수 있음) 크롬에서는 작동하지 않습니다.

어떤 생각?

고정 !

내가 어리석게 복사/붙여넣기한 크롬 수정이 실행되지 않았습니다.

나는 이걸했다 :

  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 감사합니다. 귀하의 솔루션과 매우 잘 작동합니다.

위의 해결 방법은 지도를 렌더링하는 데 사용할 수 있지만 상단 컨트롤이 없거나 잘못된 위치에 있습니다. 어떤 아이디어?

이것은 여전히 v1.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을 다운그레이드했습니다. 감사합니다.

@Ananda-Pryana 감사합니다! 지난 주에 이 작업을 수행한 다음 새 플랫폼으로 옮겼고 그 움직임이 문제라고 생각했습니다. 나는 새로운 환경이 범인이라고 가정하고 완전히 쥐구멍에 빠져들고 있었다. 나는 3.30으로 다운 그레이드했고 모든 것이 잘됩니다.

Google 지도의 새 버전에서는 변환이 다른 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 오버레이 레이어가 어떤 div를 찾았습니까? 나는 현재 오버레이 레이어가 잘리는 것과 같은 문제로 어려움을 겪고 있습니다.

현재 오버레이 레이어로 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