Mam problem z pobraniem obrazu witryny. Używam html2canvas z: https://github.com/niklasvh/html2canvas oraz standardowego HTML, CSS i javascript do dodania do witryny. Próbowałem użyć standardowego kodu HTML do pobierania ( tekst linku), ale wydaje się, że nie działa to, co próbowałem zrobić. Wypróbowałem też sugestie tutaj: https://ourcodeworld.com/articles/read/415/how-to-create-a-screenshot-of-your-website-with-javascript-using-html2canvas i dalej kilka innych stron internetowych, ale nie mogłem znaleźć odpowiedniego kodu, aby to działało. Mogę uzyskać obraz strony internetowej, który zostanie dołączony na końcu mojej bieżącej strony z poniższym kodem:

    html2canvas(document.body).then(function (canvas) {
    document.body.appendChild(canvas); });
}

Jak mogę edytować powyższy kod, aby pobrać stronę internetową, zamiast ją dołączać?

0
Jace 13 listopad 2019, 17:34

2 odpowiedzi

Spróbuj tego

html2canvas(document.body).then(function (canvas) {
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    window.location.href=image; 

});
0
JuCheng Jiang 13 listopad 2019, 17:46

Najpierw wstrzyknij bibliotekę html2canvas na stronę internetową:

function injectScript(uri) {
    const document = window.document;
    const script = document.createElement("script");
    script.setAttribute("src", uri);
    document.body.appendChild(script);
}

function injectHtml2canvas() {
    injectScript("//html2canvas.hertzen.com/dist/html2canvas.js");
}

injectHtml2canvas();

Po załadowaniu skryptu wywołaj funkcję biblioteki, aby zapisać zrzut ekranu:

function saveScreenshot(canvas) {
    const fileName = "image";
    const link = document.createElement("a");
    link.download = fileName + ".png";
    console.log(canvas);
    canvas.toBlob(function (blob) {
        console.log(blob);
        link.href = URL.createObjectURL(blob);
        link.click();
    });
}

html2canvas(document.body, {
    allowTaint: true,
    useCORS: true
}).then(saveScreenshot);

Zobacz także najczęściej zadawane pytania dotyczące obrazów:

Dlaczego moje obrazy nie są renderowane?

html2canvas nie omija ograniczeń polityki treści ustawionych przez Twoją przeglądarkę. Rysowanie obrazów, które znajdują się poza początkiem bieżącej strony, zanieczyszczają płótno, na którym są rysowane. Jeśli płótno zostanie zabrudzone, nie będzie można go już czytać. W związku z tym html2canvas implementuje metody sprawdzające, czy obraz nie splamiłby płótna przed jego zastosowaniem. Jeśli ustawisz opcję allowTaint na false, obraz nie zostanie narysowany.

Jeśli chcesz wczytać obrazy, które znajdują się poza źródłem Twojej strony, możesz użyć serwera proxy do załadowania obrazów.

http://html2canvas.hertzen.com/faq/

0
XP1 26 listopad 2019, 05:13
To było bardzo pomocne. Musiałem nieco poprawić kilka linijek i ogólnie wszystko działało. Dziękuję Ci.
 – 
Jace
21 grudzień 2019, 10:45