tạo ảnh chụp màn hình của trang web bằng cách sử dụng html2canvas (không thể khởi chạy đúng)

Question

Tôi đang cố gắng sử dụng http://html2canvas.hertzen.com/ để chụp ảnh màn hình của trang web của mình. Tôi không thể khởi tạo một yếu tố canvas sử dụng ...

var canvas = $('body').html2canvas(); 

Nếu tôi đã có thể để có được một tấm vải thích hợp tôi sẽ làm theo với một cái gì đó giống như

var dataUrl = canvas.toDataURL(); //get's image string 
window.open(dataUrl);    // display image 

Thật không may, các tài liệu rất hạn chế IMO. http://html2canvas.hertzen.com/documentation.html. Tôi không tin rằng tôi cần phải tải trước như tôi không sử dụng bất kỳ đồ họa động (nhưng tôi thậm chí không nhận được rằng xa anyways)

Tôi chỉ đơn giản là quá Noob hiểu nếu anh chàng này là có thành công với screen capturing using html2canvas

tôi dường như không nhận được bất kỳ xa hơn so với đồng nghiệp này .. How to upload a screenshot using html2canvas?

Giải pháp lý tưởng của tôi sẽ minh họa cách tạo ảnh chụp màn hình với mã tối thiểu. (. Sao chép html để vải được toDataURL chuỗi chuỗi đầu ra.)

BẤT CỨ cái nhìn sâu sắc được đánh giá rất nhiều =)

Answer 1

Bạn nên sử dụng nó theo cách này:

$('body').html2canvas(); 
var queue = html2canvas.Parse(); 
var canvas = html2canvas.Renderer(queue,{elements:{length:1}}); 
var img = canvas.toDataURL(); 
window.open(img); 

Tôi mất vài giờ để con số nó ra, làm thế nào để sử dụng nó đúng cách. Yêu cầu {elements:{length:1}}, do việc triển khai plugin không hoàn chỉnh, nếu không bạn sẽ gặp lỗi.

Chúc may mắn!

Answer 2

Bạn cũng có thể sử dụng như sau:

var html2obj = html2canvas($('body')); 

var queue = html2obj.parse(); 
var canvas = html2obj.render(queue); 
var img = canvas.toDataURL(); 

window.open(img); 

Answer 3

Để chỉ nhận được một phần của trang, bạn có thể sử dụng nó theo cách này:

$('#map').html2canvas({ 
onrendered: function(canvas) { 
    var img = canvas.toDataURL() 
    window.open(img); 
} 

Answer 4

Đây là những gì làm việc cho tôi.

html2canvas(document.body, { 
    onrendered: function(canvas) { 
    var img = canvas.toDataURL() 
    window.open(img); 
    } 
}); 

Điều này đã tạo cửa sổ mới cho ảnh chụp màn hình.

Tôi chỉ muốn một phần trang của tôi trong ảnh chụp màn hình, cụ thể là div vùng chứa. Vì vậy, tôi đã làm như sau:

html2canvas($('#myDiv'), { 
    onrendered: function(canvas) { 
    var img = canvas.toDataURL() 
    window.open(img); 
    } 
}); 

Đối với những người tìm kiếm cùng một câu hỏi, nếu các tùy chọn trên không giúp được, hy vọng điều này sẽ xảy ra.

Answer 5

Bạn có thể sử dụng mã sau để chụp ảnh chụp màn hình và tải xuống ảnh chụp màn hình.

nút html tạo

<button class="btn btn-default btn-sm" style="margin:0px 0px -10px 970px; padding:2px 4px 1px 4px" onclick="genScreenshot()"><span class="glyphicon glyphicon-envelope"></span></button> 
<a id="test"></a> 
<div id="box1"></div> 

chức năng định nghĩa

<script type="text/javascript">       
function genScreenshot() { 
html2canvas(document.body, { 
    onrendered: function(canvas) { 
    $('#box1').html(""); 

    if (navigator.userAgent.indexOf("MSIE ") > 0 || 
       navigator.userAgent.match(/Trident.*rv\:11\./)) 
     { 
    var blob = canvas.msToBlob(); 
    window.navigator.msSaveBlob(blob,'Test file.png'); 
    } 
    else { 
    $('#test').attr('href', canvas.toDataURL("image/png")); 
    $('#test').attr('download','screenshot.png'); 
    $('#test')[0].click(); 
    } 


    } 
}); 
} 
</script> 

lưu ý: Tôi đã tạo ra một nút html nơi tôi đã gọi hàm. test là một thuộc tính và box1 là lấy các phần tử canvas.