Html2canvas: 전단지를 사용하여 내보내기

http://jsfiddle.net 을 사용하여 문제의 예를 제공하십시오.

jsfiddle을 추가했습니다. https://jsfiddle.net/japiasente/7ybndo5L/

작동하려면 몇 가지 추악한 해킹이 필요합니다. 다음은 수정 사항이 없는 간단한 예입니다.

http://jsfiddle.net/djwbra47/

몇 가지 문제가 있습니다.

1. 원형 마커가 1/4원으로 잘립니다. 변환이 적용되기 전에 html2canvas가 요소를 클리핑하는 것 같습니다. 마커는 변형 없이 0,0의 중앙에 위치하므로 해당 위치에서 볼 수 있는 1/4 원으로 잘립니다. 그런 다음 html2canvas는 이를 실제 위치로 변환합니다. 왼쪽 및 위쪽 여백을 음수 대신 0으로 설정하여 수정했습니다(전체 마커가 0,0에서 표시됨). 그런 다음 동일한 양만큼 변형을 조정했습니다. (물론 캔버스를 잡은 후에 값을 다시 변경하십시오.)
2. 선이 잘못된 위치에 나타납니다. html2canvas가 SVG 경로에 두 번 변환을 적용하는 것 같습니다. 수정 사항이 없으면 선이 왼쪽 상단에 너무 멀리 표시됩니다. 변환을 0으로 변경하면 오른쪽 아래로 너무 멀리 동일한 거리가 표시됩니다. 작동하려면 변환을 원래 값의 절반으로 설정해야 했습니다.
3. 지도를 이동하면 타일이 원래 범위로 잘립니다. 이것은 1번과 동일한 문제입니다. Leaflet은 지도 창을 변환하여 지도를 이동하고 html2canvas는 해당 변환이 적용되기 전에 타일을 클리핑합니다. 수정하려면 변환 X 및 Y 값을 각 img의 왼쪽 및 상단 값에 추가한 다음 변환을 0으로 설정합니다.
4. 지도를 이동하면 html2canvas가 타일을 마커와 선 위에 그려서 더 이상 표시되지 않습니다. 이것은 숫자 3을 변경하면 수정되지만 이유를 모르겠습니다. 요소의 속성이 업데이트되면 그리기 순서가 변경될 수 있습니까?

다음은 고정 버전입니다.
http://jsfiddle.net/oo2yms1h/

아직 해결하지 못한 문제가 하나 있습니다. 지도를 패닝하여 선이 오른쪽 가장자리 근처에 오도록 하면 캔버스에 표시되지 않습니다. 그러나 나는 그것이 변환 전에 html2canvas 클리핑의 또 다른 결과라고 추측하고 있습니다.

한 가지 추가 사항: 기본 전단지 마커는 cdn.leaflet.com에서 호스팅되는 이미지로, CORS 오류가 발생하여 캔버스에 표시되지 않습니다. html2canvas와 함께 사용하는 사람은 아이콘 자체를 호스팅하거나 다른 마커 스타일로 전환해야 합니다.

JAPiasente, 3번의 수정 사항을 적용하여 타일 및 패닝 문제를 해결할 수 있는 것 같습니다. 또한 귀하의 마커는 SVG 경로이며 2번의 내 라인과 동일한 이중 변환 문제를 겪고 있는 것 같습니다. 왼쪽 상단에 너무 멀리 표시됩니다. 다음은 이러한 변경 사항이 적용된 버전입니다.

https://jsfiddle.net/6tn0zy48/

마커가 지도 하단보다 더 위로 잘리는 것을 제외하고 모든 것이 올바른 위치에 표시됩니다. 제가 여전히 작업하고 있는 동일한 문제인 것 같습니다.

마지막 남은 문제를 수정하는 것은 어렵지 않았습니다. 변환을 0으로 설정하고 대신 왼쪽과 위쪽을 사용하는 문제였습니다.

내 간단한 예가 업데이트되었습니다.
http://jsfiddle.net/oo2yms1h/1/

지도에 대한 수정 수정 사항:
https://jsfiddle.net/6tn0zy48/1/

Chrome에서 작업하고 있었는데 Firefox 및 IE에서 수정 사항이 작동하지 않는다는 것을 알게 되었습니다. 그들은 변환 스타일을 translate3d 대신 translate로 제공했고 내 코드는 그것이 항상 translate3d일 것이라고 가정했습니다. 그리고 Chrome에서처럼 왼쪽과 위쪽 대신 번역을 사용하여 타일을 배치했습니다. 이 업데이트된 예제는 세 가지 브라우저 모두에 대해 수정되었습니다. 타일 ​​및 마커 아이콘은 세 가지 모두에서 작동하지만 여전히 Firefox 및 IE에서 SVG 경로를 표시할 수 없습니다.

http://jsfiddle.net/oo2yms1h/3/

IE는 선을 표시하기 전에 html2canvas.svg가 필요했으며 SVG 레이어에 변환 또는 왼쪽/상단 속성이 설정되어 있을 때도 작동하지 않습니다. 이 예제는 IE에서 작동하며 거의 Firefox에서 작동합니다.

http://jsfiddle.net/oo2yms1h/5/

파이어폭스에 줄을 표시하려면 #648에 언급된 html2canvas를 변경하여 base64 인코딩으로 전환해야 합니다.
https://github.com/niklasvh/html2canvas/pull/648/files

지금까지 도와주셔서 감사합니다. 이제 유일한 마지막 문제는 그 위에 svg 오버레이가 있으면 IE가 제대로 작동하지 않는다는 것입니다. 지도와 svg 오버레이는 크롬에서 잘 작동합니다. 어떤 아이디어?

@CraigVA 당신은 훌륭합니다. 이 문제를 해결하기 위해 지난 이틀을 보냈습니다. 나는 당신의 jsfiddles를 더 일찍 만났더라면 좋았을 것입니다. 감사 해요!!!

@CraigVA 솔루션을 사용하는 데 문제가 있었는데 지도를 전혀 패닝하면 오버레이가 타일의 중심에서 벗어났습니다.

이를 방지하기 위해 내가 한 일은 잠시 동안 바다의 다른 장소로 뷰를 설정한 다음 뷰를 원래 위치로 다시 설정하는 redraw() 함수였습니다. 잘 작동합니다.

function redraw() {
    var lat_tmp = map.getCenter().lat;
    var lng_tmp = map.getCenter().lng;
    map.setView([-66.22149259832975, -1.142578125]);
    setTimeout(function () {
        waitForTilesToLoad()
    }, 50000);
    map.setView([lat_tmp, lng_tmp]);
}

누군가이 문제를 겪고 동일한 문제가 발생하는 경우.

안녕하세요, 이 해킹 덕분에 Path 레이어와 큰 TileLayers를 제외하고는 잘 작동합니다.

• 경로 레이어(폴리곤/폴리라인)의 일부가 원래 지도 경계를 벗어나면 지도를 이동할 때 html2canvas에 의해 잘립니다.
  http://jsfiddle.net/c8LL4qfo/ 에서 더 긴 폴리라인으로 코드를 업데이트했습니다. 지도를 이동하려고 하면 캔버스에서 선이 잘린 것을 볼 수 있습니다.
  이 버그를 해결하는 방법에 대한 아이디어가 있습니까?

• 두 번째 요점: tileLayers가 너무 큰 경우 html2canvas는 지도가 렌더링될 때까지 기다리지 않습니다. UseCors=true인 경우에도 마찬가지입니다. tileLayers가 로드될 때까지 기다릴 방법이 있습니까? load 이벤트를 사용하려고 생각했지만 어떻게 할 수 있는지 모르겠습니다.

감사

이것이 여전히 v1.0.0 의 문제입니까? 그렇다면 jsfiddle 에 대한 예를 공유해 주시겠습니까?

나는 React를 사용하여 이 문제를 해결했습니다. 지도를 이동한 후 전단지 구성 요소가 재설정되어 마지막 중앙과 확대/축소 수준을 유지합니다. 제공된 지도가 새 지도이므로 html2canvas와 더 이상 충돌하지 않습니다.

좋아, 여기에서 jsfiddle 코드를 업데이트했습니다. http://jsfiddle.net/2zkLkLxc/
V1.0.0에는 더 이상 클리핑 문제가 없지만 지도를 이동할 때 아이콘 클리핑(언제든지) 및 타일 클리핑과 관련된 문제가 있습니다.
타일의 핵을 제거하려고 시도했지만 아무 것도 변경되지 않았습니다.

내 코드에서 v.1.0.0으로 업데이트했고 아이콘 클리핑이 없기 때문에 이상합니다.

이 호는 원저자의 추가 정보 요청에 대한 응답이 없었기 때문에 자동으로 종료되었습니다. 현재 문제에 있는 정보만으로는 조치를 취하기에 충분한 정보가 없습니다. 더 조사할 수 있도록 필요한 답변이 있거나 찾으면 연락해 주십시오.

같은 문제가 있지만 Google Map 대신 Leaflet Map을 사용했습니다.
코드는 아래에 있습니다

var 변형=$(".리플릿 지도 창").css("변환");
if (변환) {
var c = transform.split(",");
var d = parseFloat(c[4]);
var h = parseFloat(c[5]);
$(".leaflet-map-pane").css({
"변환": "없음",
"왼쪽": d,
"상단": h
})
}
html2canvas(document.body).then(함수(캔버스){
$(".leaflet-map-pane").css({
왼쪽: 0,
상단: 0,
"변환": 변형
})
} // 여기에 html2canvas 1.0.0-alpha.9가 사용되었습니다.

@CraigVA 정말 감사합니다!

클리핑 문제와 관련하여 현재 stackoverflow에 문제가 있습니다. 나는 전단지 1.3.1을 사용하고 있습니다. 누군가 나에게 지침을 제공할 수 있다면 대단히 감사하겠습니다. 문제는 여기에 있습니다.

@niklasvh 문제는 여전히 존재합니다: http://jsfiddle.net/x3jzsg9b/4/

문제는 여전히 존재합니다: https://jsfiddle.net/x512pgjt/269/

@Amarandon @bomba1990

지도에서 렌더러 패딩을 제거해 보세요. 그것은 나를 위해 일했습니다.

map.getRenderer(지도).options.padding = 0;

이것은 사랑스럽게 일했습니다!

html2canvas(document.querySelector("#mapid"), {
allowTaint: 사실,
useCORS: 사실
}).then(캔버스 => {
document.body.appendChild(캔버스)
});