Take screenshot <body> z html2canvas oraz przechowują img jak JS var

Jestem próbujących pozwolić użytkownikom na moim miejscu wcisnąć przycisk, aby zrobić zrzut ekranu bieżących (wszystko w organizmie).Take screenshot <body> z html2canvas oraz przechowują img jak JS var

Z moich badań wynika, że html2canvas wydaje się być zasobem, który to umożliwia.

Mój problem jest dokumentacja nie dostarcza przykładowy kod i walczę, aby uzyskać przyczepność na etapów.

http://html2canvas.hertzen.com/documentation.html

Poniższy SO pytanie (How to upload a screenshot using html2canvas?) pozostawia mi nieco zdezorientowany. Chcę tylko wiedzieć, jak uzyskać obraz w tym momencie.

Z jego kodu.

$(window).ready(function(){ 
    ('body').html2canvas(); 
    var canvasRecord = new html2canvas(document.body).canvas; 

    //At this point does the .toDataURL method return a png? 
});

W tym momencie jestem zagubiony w miejscu, w którym znajduje się obraz, a nawet w jaki sposób/kiedy go utworzyć. Obawiam się, że później wyślę to na serwer.

Wszelkie informacje doceniane. Dzięki! (Html2canvas jeszcze potrzebne?)

Źródło

2012-05-01 mattyd

Czasami warto spojrzeć na odcinku korzystania z [readme] (https://github.com/niklasvh/html2canvas/blob/master/readme.md#usage). – 0sh

Możesz także rozważyć niektóre rozwiązania oparte na phantomjs. Zobacz [na wiki PhantomJS] (http://code.google.com/p/phantomjs/wiki/WhoUsesPhantomJS) (wyszukaj "zrzut ekranu") lub rozważ [ten projekt node.js/phantom] (https: // github .com/fzaninotto/screenshot-as-a-service). –

Jak używasz jQuery plugin html2canvas, oto fragment próbki

var screenshot; 

$('body').html2canvas({ 
    onrendered: function(canvas) { 
    screenshot = canvas.toDataURL(); 

    //code to process/send the image to server 
    } 
});

W powyższym fragmencie kodu html2canvas tworzy zrzut ekranu strony.

Możesz również użyć PhantomJS do tworzenia zrzutów ekranu stron internetowych - pod warunkiem, że są to strony publiczne, ponieważ możesz nie mieć dostępu do stron chronionych przez logowanie na serwerze; w takich sytuacjach działa tylko rozwiązanie po stronie klienta, takie jak html2canvas.

Źródło

2012-12-25 18:20:30

czy możesz uruchomić phantomjs po stronie klienta? – cantdutchthis

'phantomjs' nie jest biblioteką javascript, jest to przeglądarka internetowa bez interfejsu użytkownika. Więc nie możesz go uruchomić na kliencie. Możesz skorzystać z usług takich jak http://usersnap.com, aby uzyskać zrzuty ekranu Twojej witryny/aplikacji. –

$("#screenshot").click(function() { 
    $("body").html2canvas({ 
    onrendered: function(canvas) { 
     $(".filt_opt_n").html(canvas); 
     //window.open(img); 
    } 
    }); 
}); 
<div id="screenshot"></div>

.filt_opt_n to div który u chcą pokazać wyjście to pracuje dla mnie

Źródło

2013-02-08 07:34:35

Może być stary pytanie. Możesz spróbować tego!

var htmlCanvas = new html2canvas(document.body); 
var queue = htmlCanvas.parse(); 
var canvas = htmlCanvas.render(queue, { elements: { length: 1} }); 
var img = canvas.toDataURL();

Źródło

2014-12-03 10:31:38

Take screenshot <body> z html2canvas oraz przechowują img jak JS var

Odpowiedz

Powiązane problemy