html2canvas offscreen

Question

Khi sử dụng html2canvas, tôi có stack đối tượng DOM (vị trí tương đối của div chứa nhiều thứ khác nhau), mà tôi muốn tạo hình thu nhỏ riêng lẻ cho. Vì vậy, nếu có mười div, tôi sẽ tạo mười hình thu nhỏ.

Một số đối tượng này sẽ không có màn hình - trong số các div này nằm trong một div, bao gồm div được gọi là "mainDiv". Tôi lặp qua các div trong mainDiv và thực hiện các html2canvas trên mỗi cá nhân.

Đối với những người ở chế độ trên màn hình, tính năng này hoạt động tốt. Những người không có màn hình không - họ trở lại trống. Tôi tạo ra một workaround mà di chuyển các đối tượng lên trên cùng của mainDiv, tuy nhiên đây là một kludge và trực quan không hấp dẫn.

Có thể chỉ định đối tượng DOM không hiển thị? Lý tưởng nhất, tôi muốn có thể chỉ định div chứa và có html2canvas bỏ qua khả năng hiển thị của bố mẹ, vì vậy tôi có thể chụp màn hình các đối tượng ẩn, nhưng chặn nó, tôi muốn có thể chụp các đối tượng trên màn hình. màn.

Bất kỳ ý tưởng, ý tưởng nào? Cảm ơn!

---- Dưới đây là một số mã ví dụ. Về cơ bản, nếu bạn có một loạt các div trong div, hãy lặp lại chúng. Tôi thực sự làm recursively này để chỉ có một được xử lý cùng một lúc, với callback gọi hàm đệ quy, vì vậy nó trông giống như sau:

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

     } 
    }) 

} 

Khi các cuộc gọi đệ quy đã hoàn thành, nó thực hiện chức năng gọi lại, đó là một chức năng sẽ làm việc với các hình ảnh.

Một lần nữa, tất cả điều này hoạt động tốt miễn là các đối tượng hiển thị trong div cuộn có chứa tất cả các div trong #mainDiv. Một khi bất kỳ phần nào của các div được cuộn ra, tuy nhiên, chúng làm cho màu đen. Trong thực tế, nếu một nửa của hai div được cuộn ra (nửa trên của một, nửa dưới của tiếp theo), cả hai đều hoàn toàn đen.

Answer 1

Tôi biết đây là câu hỏi cũ nhưng có vẻ thú vị. Dựa trên thử nghiệm của tôi, dường như chỉ có các phần tử position: absolute và position:fixed nằm ngoài tầm nhìn mới gây ra sự cố này. Tôi đã tìm ra giải pháp cho vấn đề.

Điều tôi đang làm là tạo bản sao của phần tử. Đặt kiểu dáng của bản sao thành left = 0, top = window.innerHeight (để nó không nằm trong cửa sổ) và position = 'relative'. Sau đó, tôi gắn bản sao vào cơ thể, sử dụng html2canvas trên bản sao, và sau đó loại bỏ bản sao khỏi cơ thể. Giải pháp này làm việc cho tôi trong IE, Firefox và Chrome.

Tôi đã tạo một JSBin example here. Đây là mã javascript chính:

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

Bây giờ bạn đã thử hiển thị Div: none; và hiển thị Div: tuyệt đối; (Hoặc cách bạn muốn div của bạn xuất hiện - có lẽ z-index)

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

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

Answer 3

bộ 'tràn' như rõ ràng cho tất cả các yếu tố mẹ của nó.Sau khi trả lại loại bỏ nó

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