Html2canvas: 'overflow:auto' div에서 숨겨진 부분 전체를 렌더링하는 방법

현재 특정 옵션으로 페이지를 렌더링하는 옵션이 없으므로 원하는 렌더링 방식으로 페이지를 수정해야 합니다.

즉, 높이/너비 제한을 제거하고 html2canvas를 실행한 다음 높이/너비를 원래 값으로 다시 설정하면 원하는 것을 얻을 수 있습니다.

정말 감사합니다.... 말씀하신대로 해봐야겠습니다...

나는 오랫동안 노력했지만... 그것은 많은 문제를 만든다. 나는 당신이 말한 것을 달성하지 못했습니다. 스크롤이 있어도 '본문'일 때 잘 작동한다는 것을 알았습니다 ... 스크롤이있는 요소가있는 div에 대해서도 동일한 결과를 얻고 싶습니다 ...이 문제를 도와 줄 수 있다면 저에게 큰 도움이 됩니다... 여러분의 의견을 기다립니다...

@niklasvh , 나는 같은 문제가 있고 내가 가진 유일한 해결 방법은 html2canvas (항상 옵션은 아님)를 호출하기 전에 대상 요소의 너비를 줄이거나 html2canvas 을 호출하는 것입니다.

http://jsfiddle.net/fMeRC/1/ (이 특정 예는 Chrome에서만 작동합니다. 다른 브라우저에서 문제를 보려면 너비를 조정해야 함)

이것은 기본적으로 요소가 창 또는 (document.width - 8) 보다 넓을 때만 발생합니다. 어느 것이 더 중요하고 직접적인 관련이 있는지 잘 모르겠고 다른 브라우저에서는 변경될 수 있습니다.

아마도 관련: #199 및 #108.

childElement를 시도하거나 "overflow=visible"을 설정하고 "overflow=auto|hidden|inherit"를 설정한 후 ?

스타일이 없는 childElement, 오버플로가 있는 div의 내용만 수신:

<div id="main"><!--// main div -->
<div class="mainContent"><!--// div without style (height: auto, width: auto, margin: 0, padding: 0) -->
...content...

html2canvas([$("#main div.mainContent").get(0)],...)

제안 감사합니다, @brcontainer. overflow: visible -> html2canvas( ... ) -> overflow: [old overflow] 접근 방식을 시도했지만 숨겨진/숨김 해제/숨김 다시 콘텐츠의 플래시가 너무 눈에 띄었습니다. 비교적 복잡하다). 나는 그 점에서 차이를 만드는 것으로 보이는 해결 방법의 약간 최적화된 변형을 생각해 냈지만:

html2canvas( targetElement, {
  onpreloaded: function(){ /* set parent overflow to visible */},
  onparsed: function(){  /* reset parent overflow */ },
  // ... onrendered, etc.
});

이것은 h2c가 대상을 적절하게 구문 분석하는 데 필요한 가장 짧은 시간 동안에만 오버플로를 '표시'로 설정하므로 적어도 제 경우에는 플래시를 거의 완전히 제거합니다. 즉, 오버플로를 재설정/다시 숨기기 전에 캔버스 렌더링 단계가 완료될 때까지 더 이상 기다릴 필요가 없습니다. 이 수정된 접근 방식이 모든 사람에게 효과가 있을지는 모르겠지만 html2canvas( ... ) 연속으로 두 번 호출하거나 DOM에 추가 항목을 추가하여 대상 콘텐츠를 래핑하는 것보다 더 나은 해결 방법이라고 생각합니다.

어쨌든 이것은 여전히 ​​제대로 수정되었으면 하는 실제 버그입니다. (특히 IE9 및 10에서는 두 가지 해결 방법이 모두 제대로 작동하지 않기 때문에 적어도 IE11에서는 시도하지 않았습니다.)

_참고: 앞서 언급한 해결 방법은 현재 마스터에 있는 최신 버전에서는 작동하지 않습니다. 테스트하지는 않았지만 oncloned 옵션을 대신 사용해야 하는 것 같으며 이제 .then() 에 대한 콜백에서 오버플로 부모 재설정이 호출됩니다. (복제된 문서 내에서 부모의 오버플로를 독점적으로 볼 수 있도록 하고 재설정에 대해 전혀 걱정하지 않아도 됩니다.)_

왜 이런 식으로 사용했는지 이해가 되지 않습니다. 다음과 같이 하는 것이 좋습니다.

function SnapShotDOM(target,call){
    var data = {};

    //use jquery or getComputedStyle|style.overflow
    data.overflow = /*get overflow property*/;
    data.width = /*get width property*/;
    data.height = /*get height property*/;
    data.maxWidth = /*get maxWidth property*/;
    data.maxHeight = /*get maxHeight  property*/;

    target.style.overflow="visible !important";
    target.style.height="auto !important";
    target.style.maxHeight="auto !important";

    html2canvas(target, {
        "onrendered": function(canvas) {
            target.style.overflow = data.overflow;
            target.style.width = data.width;
            target.style.height = data.height;
            target.style.maxWidth = data.maxWidth;
            target.style.maxHeight = data.maxHeight;
            call(canvas);
        }
    });
}

SnapShotDOM(document.body,function(canvas){
    console.log(canvas);
});

또는 클래스를 사용하십시오.

<style>
*.html2canvasreset{
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
    max-height: auto !important;
}
</style>
<script>
function SnapShotDOM(target,call){
    var data = target.className;
    target.className += " html2canvasreset";//set className - Jquery: $(target).addClass("html2canvasreset");
    html2canvas(target, {
        "onrendered": function(canvas) {
            target.className = data;//old className - Jquery: $(target).removeClass("html2canvasreset");
            call(canvas);
        }
    });
}

SnapShotDOM(document.body,function(canvas){
    console.log(canvas);
});
</script>

onrendered 에 오버플로와 관련된 내용을 넣지 않는 이유는 파싱과 렌더링 사이의 시간이 눈에 띄기 때문에 가능한 한 빨리 오버플로를 재설정하는 것이 좋습니다(즉, 파싱 직후, 렌더링 전). 콘텐츠의 눈에 띄는 플래시를 피하기 위해. 대신 onparsed 에 오버플로 재설정을 넣으면 이 작업이 수행됩니다.

나는 "onpreloaded"를 언급하고 있었다.

이 시도:

function SnapShotDOM(target,call){
    var data = target.className;
    target.className += " html2canvasreset";//set className - Jquery: $(target).addClass("html2canvasreset");
    html2canvas(target, {
        "onparsed": function() {
            target.className = data;//old className - Jquery: $(target).removeClass("html2canvasreset");
        },
        "onrendered": function(canvas) {
            call(canvas);
        }
    });
}

SnapShotDOM(document.body,function(canvas){
    console.log(canvas);
});

onpreloaded 를 사용하는 것도 같은 이유입니다. 즉, 구문 분석 단계 직전에 오버플로 숨기기 해제 부분을 가능한 최신 시점으로 이동하여 시간을 최소화하는 최적화입니다. 콘텐츠가 화면에 완전히 표시됩니다. 여기 및 여기 코드에서 이것이 어떻게 작동하는지 확인할 수 있습니다.

@niklasvh , 이 문제가 여기에서 찾은 TODO( options.useOverflow )와 전혀 관련이 있습니까?

어떤 버전을 사용하셨습니까? .. 내 버전에서 onparsed 및 onpreloaded 메서드를 찾을 수 있습니다.
html2canvas-0.5.0-alpha1을 사용하는 메신저

@ejlocop 이 문제는 이전 버전에 대해 몇 년 전에 제출되었으며 사용 사례(#511)와 관련이 없을 수 있습니다.

그들은 문제를 해결? paraa 솔루션 내 Gantt 차트로 뭔가를 찾고 있어요, 당신이 완전히 필요합니다 ...

작동하지 않습니다.

http://jsfiddle.net/fMeRC/368/

@pkpatels 왜 작동하지 않습니까? 나는 당신의 바이올린을 실행했고 문장은 끊기지 않고 렌더링되었습니다 ...
나는 또한이 문제가 있었고 나를 위해 일한 솔루션은 # 117에서 제안한 것입니다.

@uriklar 수직이 아닌 수평 스크롤에서 작동합니다. 내 div를 확인하십시오. 거기에는 세 가지 다른 요소가 있습니다.

@uriklar 제안한 솔루션은 div를 아래로 스크롤하고 완전히 표시를 클릭해도 작동하지 않습니다.

렌더링하기 전에 #text div의 높이를 자동으로 설정하고 나중에 재설정하는 것은 어떻습니까? 효과가 있을 것입니다.

가장 최근 릴리스(0.5.0-beta4)에서 여전히 오버플로 문제가 있었습니다. @usmonster 의 해결 방법을 사용하여 h2c 및 Promises의 최근 변경 사항에 적용했습니다( @usmonster 의 메모에 설명됨).

참고: 앞서 언급한 해결 방법은 현재 마스터에 있는 최신 버전에서는 작동하지 않습니다. 테스트하지는 않았지만 대신 onclone 옵션을 사용해야 하는 것 같으며 오버플로 부모 재설정은 이제 .then()에 대한 콜백에서 호출됩니다. (복제된 문서 내에서 부모의 오버플로를 독점적으로 볼 수 있도록 하고 재설정에 대해 전혀 걱정하지 않는 것도 가능해야 합니다.)

따라서 웹페이지의 실제 DOM을 변경하지 않고 onclone 콜백을 사용하여 h2c에서 렌더링에 사용되는 복제된 문서를 변경할 수 있습니다. 실제로 매우 간단합니다. 여기 내 h2c 호출이 있습니다.

var renderingPromise = html2canvas($(item), {
    width: item.clientWidth,
    height: item.clientHeight,
    onclone: function(clone) {
            $(clone).find('.grid-stack-item-content')
                .css('overflow-x', 'auto')
                .css('overflow-y', 'auto');
        return true;
    }
}).then(
    function(c) {/* success */},
    function() {/* fail */}
);

나를 위해 일한 유일한 방법은 캔버스를 iframe에 넣고 그 안에 html2canvas를 호출하고 캔버스에서 toDataURL()을 호출한 다음 콜백을 사용하여 해당 이미지를 맨 위 창으로 다시 전달하는 것입니다. 캔버스 개체를 다시 전달할 수도 있다고 가정합니다.

return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) { if (typeof(options.onrendered) === "function") { log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas"); options.onrendered(canvas); } return canvas; });
로 변경
var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth; var height = options.height != null ? options.height+node.ownerDocument.defaultView.innerHeight : node.ownerDocument.defaultView.innerHeight; return renderDocument(node.ownerDocument, options, width, height, index).then(function (canvas) { if (typeof(options.onrendered) === "function") { log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas"); options.onrendered(canvas); } return canvas; });

이것은 화면의 오버플로(너비와 높이 모두)에 대한 질문을 해결할 수 있습니다.

xzw123에는 잘못된 솔루션이 있습니다. ownerDocument.defaultView.innerHeight 수동으로 설정하면 실제 창 크기 조정 이벤트에서 바인딩이 해제됩니다. iframe에서 하는 것이 가장 좋을 것 같습니다. Jordan의 솔루션을 시도하고 싶습니다.

Jordan, 어떻게 iframe에서 캔버스를 사용하게 되었나요? 지금 시도하고 있습니다. 이것이 html2canvas의 최종 솔루션이어야 한다고 생각합니다... iframe 통신은 API 외부에서 보이지 않도록 해야 합니다.

아 예, window.postMessage(myData, ... ) 를 사용하여 iframe에서 수행하면 트릭이 수행됩니다. 렌더링된 픽셀의 전체 데이터 URL을 다시 게시할 수 있습니다. iframe의 HTML에 렌더링 코드를 넣고 HTML 소스를 렌더링하는 데 필요한 데이터를 전달하고 캔버스에 렌더링한 다음 toDataUrl 데이터를 다시 내보내도록 했습니다.

+1

안녕하세요. 솔루션을 검색하고 코드가 어떻게 실행되는지 관찰한 후 나만의 까다로운 솔루션을 작성합니다.

https://gist.github.com/simonmysun/c6da13ce2827a374e71ccf07d9f08e2d

그것은 나를 위해 일하고 그것이 필요한 사람에게 도움이되기를 바랍니다.

그러나 앞으로 이 라이브러리에서 지원될 수 있기를 바랍니다.

나는 여전히 그것을 이해하지 못하지만 내 문제는 이미지가 잘리는 것입니다. 크롬 버전 54.0.2840.99 m 사용 시
(반쪽 이미지는 스크린샷이 찍혔지만 나머지 반쪽은 검은색 화면이 됨)

// the timeline show up 100%, but cut off, cause its static and not dynamic.
// (its cut off from the screen,but the size, and picture show as normal, 100% show)
// after moving to the canvas, everthing that not in the screen will get blank in chrome  
// it depends to the user screen, if i zoom out my chrome, i get 100% image.

그러나 Mozilla 50.0.2를 사용할 때 축소 없이 잘 작동합니다. (100% 이미지),

이유를 모르겠습니다.

코드:

var zenleft = $("#leftPanel").width();  //calculate left side
var zenright = $(".dataPanel").width();  //calculate right side
var after = zenright + zenleft + 250;  // add all

//add the css, even after add overflow still not working
$("#timelineTarget").css({"background-color":"white","width":after});   

 html2canvas(canvTimeline, {
    onrendered: function (canvas) {
            $("#previewImage").html(canvas);
            getCanvas = canvas;
   }
});

마지막으로 다음을 추가하여 이 문제를 해결합니다.

$("body").css({"width": "+="+after}); //after is a total of the width of the element i want to view

그래서

var zenleft = $("#leftPanel").width();  //calculate left side
var zenright = $(".dataPanel").width();  //calculate right side
var after = zenright + zenleft + 250;  // add all
$("body").css({"width": "+="+after});  //add the body

//add the css
$("#timelineTarget").css({"background-color":"white","width":after});   

 html2canvas(canvTimeline, {
    onrendered: function (canvas) {
            $("#previewImage").html(canvas);
            $("#timelineTarget").css({"background-color":"white","width":old});   //turn it back
            $("body").css({"width": "-="+after});   //turn it back
            getCanvas = canvas;
   }
});

자신의 문제를 해결하기를 바랍니다.

onclone 이 올바른 방법일 수 있습니다. CSS를 변경하여 원하는 것을 얻을 수 있습니다.

안녕하세요, 스크롤 가능한 div가 있습니다. div 입력을 캔버스 매개변수로 보내면 뷰포트에서 사용할 수 있는 것만 렌더링됩니다. 나는 모든 해결책을 거쳤습니다. 나는 이해하지 못했다. 누구든지 div의 전체 콘텐츠를 스크린샷으로 가져오는 방법을 말할 수 있습니까?

@ruthraprakash , 비슷한 문제가 있었습니다. 이것은 최신 버전에서 간단한 목적으로 작동합니다.

function fullhtml2canvas(el) {
    return new Promise(resolve => {
        html2canvas(el, {
            width: el.scrollWidth,
            height: el.scrollHeight,
        }).then(canvas => {
            resolve(canvas);
        });
    });
}

타임라인 차트의 스크린샷을 찍는 데 문제가 있습니다. x 축 값을 얻지 못했습니다. 타임라인 차트의 이미지를 생성하는 것입니다.
` demoFromHTML(e) {
e.preventDefault();

  let input = window.document.getElementById('divToPDF');


  html2canvas(input)
  .then((canvas) => {

    const imgData = canvas.toDataURL('image/jpeg');

    const pdf = new pdfConverter("l", "pt");
    pdf.addImage(imgData, 'JPEG', 15, 110, 800, 250);
    pdf.save('test.pdf');
  });


}

`

• [ https://ibb.co/g9VwZYL ] #1. URL

나는 오랫동안 노력했지만... 그것은 많은 문제를 만든다. 나는 당신이 말한 것을 달성하지 못했습니다. 스크롤이 있어도 '본문'일 때 잘 작동한다는 것을 알았습니다 ... 스크롤이있는 요소가있는 div에 대해서도 동일한 결과를 얻고 싶습니다 ...이 문제를 도와 줄 수 있다면 저에게 큰 도움이 됩니다... 여러분의 의견을 기다립니다...

어떻게 몸이 작동하는지 보여줄 수 있습니까?