html2canvas offscreen

Question

html2canvas를 사용할 때 DOM 객체 (상대 위치 지정된 div에 여러 가지가 포함됨)가 stack 있습니다. 개별 축소판을 만들려고합니다. 10 개의 div가 있다면 10 개의 미리보기 이미지를 만듭니다.

이러한 개체 중 일부는 화면에 표시되지 않습니다. 이러한 div는 모두 "mainDiv"라는 하나의 포괄적 인 div에 있습니다. mainDiv 내의 div를 반복하고 각각에 개별적으로 html2canvas를 실행합니다.

화면 상 나타나는 경우에는 정상적으로 작동합니다. 화면이 꺼진 사람들은 공백으로 돌아옵니다. 나는 객체를 mainDiv의 맨 위로 스크롤하는 해결 방법을 만들었지 만, 이것은 멍청하고 시각적으로 매력적이지 않습니다.

보이지 않는 DOM 개체를 지정할 수 있습니까? 이상 적으로는 포함 div를 지정하고 html2canvas이 부모 가시성을 무시하도록 숨겨진 개체를 캡쳐 할 수는 있지만 차단하지 않으면 캡쳐 된 개체를 단순히 화면에 표시 할 수 있기를 원합니다. 화면.

모든 의견, 아이디어? 감사!

---- 다음은 몇 가지 예제 코드입니다. 기본적으로 div 내에서 div가 여러 개있는 경우 div를 반복합니다. 재귀 호출이 완료되면 콜백 함수를 실행

function recurser(anIndex, callback) { 
    if (anIndex == -1) { 
     callback(); 
     return; 
    } 
    $(myDivs[anIndex]).html2canvas({ 
     onrendered : function(canvas) { 
      var img = canvas.toDataURL(); 
      // store the image in an array, do stuff with it, etc. 
      recurser(--anIndex, callback); 

     } 
    }) 

} 

: 나는 실제로 재귀 함수를 호출하는 콜백, 그래서 한 번에 하나만 처리됩니다이 recursively 할, 그래서 다음과 같이 보입니다 그것은 이미지로 물건을 할 함수입니다.

#mainDiv의 모든 div가 포함 된 스크롤 div에서 개체가 표시되는 경우에도 마찬가지입니다. 그러나 div의 일부가 스크롤되면 검은 색으로 렌더링됩니다. 실제로 두 div의 절반이 스크롤되면 (둘 중 하나의 위쪽 절반, 다음 절반의 아래쪽 절반), 둘 다 완전히 검은 색으로 렌더링됩니다.

Answer 1

이 질문은 오래된 질문이지만 재미있을 것 같습니다. 테스트 결과에 따르면 뷰포트 외부에있는 position: absolute 및 position:fixed 요소 만이 문제를 일으킨 것으로 보입니다. 나는 그 문제에 대한 해결책을 찾아 냈다.

내가하고있는 일은 요소의 복제본을 만드는 것입니다. 클론 스타일을 left = 0, top = window.innerHeight (창 안쪽에 없도록)으로 설정하면 position = 'relative'입니다. 그런 다음 복제본을 본문에 추가하고 복제본에 html2canvas을 사용한 다음 복제본을 본문에서 제거합니다. 이 솔루션은 IE, Firefox 및 Chrome에서 유용합니다.

나는 JSBin example here을 만들었습니다. 다음은 주요 자바 스크립트 코드입니다.

function hiddenClone(element){ 
    // Create clone of element 
    var clone = element.cloneNode(true); 

    // Position element relatively within the 
    // body but still out of the viewport 
    var style = clone.style; 
    style.position = 'relative'; 
    style.top = window.innerHeight + 'px'; 
    style.left = 0; 

    // Append clone to body and return the clone 
    document.body.appendChild(clone); 
    return clone; 
} 

var offScreen = document.querySelector('.off-screen'); 

// Clone off-screen element 
var clone = hiddenClone(offScreen); 

// Use clone with htm2canvas and delete clone 
html2canvas(clone, { 
    onrendered: function(canvas) { 
     document.body.appendChild(canvas); 
     document.body.removeChild(clone); 
    } 
}); 

Answer 2

아 이제 시도해 보셨습니까? Div 디스플레이 : 없음; Div 디스플레이 : 절대; (또는 당신이 원하는 방법 사업부가 표시하는 - 어쩌면 Z- 인덱스)

arrow1.onclick = (event){ 
arrow1.style.display = none; 
arrow2.style.display = absolute; 
} 

    arrow2.onclick = (event){ 
arrow2.style.display = none; 
arrow1.style.display = absolute; 
} 

Answer 3

세트 '오버 플로우'부모의 모든 요소를 ​​볼 수있다.후는

CSS

.overflowVisible{ 
    overflow:visible !important; 
} 

JS

$("#container").parents().each(function(ind,elem){ 
    $(elem).addClass("overflowVisible"); 
}); 

html2canvas($("#container"), { 
    onrendered: function(canvas) { 
     var img =canvas.toDataURL("image/png"); 
     $('body').append(img); 
     $("#container").parents().each(function(ind,elem){ 
      $(elem).removeClass("overflowVisible"); 
     }); 
    } 
});