Html2canvas: speicherndes Element, das über das Ansichtsfenster hinausragt

Erstellt am 3. Nov. 2017 · 4Kommentare · Quelle: niklasvh/html2canvas

Ich versuche, dies zu verwenden, um eine Seite zu speichern, die sich über das Ansichtsfenster hinaus erstreckt, aber immer wieder abgeschnitten wird. Gibt es eine Möglichkeit zu speichern. Unten ist der Code, den ich verwende. Wenn ich das Element klein genug mache, um in das Ansichtsfenster zu passen, funktioniert es gut, aber das Bild, das ich bekomme, ist einfach viel zu klein für das, wofür ich es brauche, und das Erhöhen der Größe macht es nur verschwommen. Einige dieser Bilder in der Größe, in der ich sie benötige, sind über 1300 Pixel hoch

`html2canvas(Vorschau, {
Hintergrund: '#ffffff',
ongerendert: (Leinwand)=>{

            canvas.toBlob((blob)=>{
                FileSaver.saveAs(blob, 'mysave.png');
            })

        }
    })`

Quelle

dking3876

Hilfreichster Kommentar

Sie könnten versuchen, den Inhalt des Elements zu klonen und an den Körper anzuhängen, während die Erfassung stattfindet, und es dann entfernen. Etwas wie

var clone = document.getElementById('my_element').cloneNode(true);
//... style the clone so it doesn't have scroll...

return html2canvas(clone, {
        useCORS: true,
        allowTaint: false,
        logging: false
    }).then(function (canvas) {
        document.body.removeChild(clone);
        return canvas;
    });

ffflabs am 8. Nov. 2017

👍3

Alle 4 Kommentare

Ist das Element in einem Container, div, modal usw. enthalten, der inneres Scrollen hat?

ffflabs am 4. Nov. 2017

Der direkte Container, den ich erfassen möchte, hat kein Scrollen, der übergeordnete Container jedoch. Ich werde versuchen, das Scrollen auf den direkten Container zu setzen und zu sehen, ob das funktioniert

dking3876 am 6. Nov. 2017

Nicht gut. Ich habe es so angepasst, dass der Container, den ich aufnehme, gescrollt wird, um den gesamten Dom anzuzeigen, und er wird immer noch im sichtbaren Bereich des Bildschirms abgeschnitten.

irgendwelche anderen gedanken??

dking3876 am 7. Nov. 2017

Sie könnten versuchen, den Inhalt des Elements zu klonen und an den Körper anzuhängen, während die Erfassung stattfindet, und es dann entfernen. Etwas wie

var clone = document.getElementById('my_element').cloneNode(true);
//... style the clone so it doesn't have scroll...

return html2canvas(clone, {
        useCORS: true,
        allowTaint: false,
        logging: false
    }).then(function (canvas) {
        document.body.removeChild(clone);
        return canvas;
    });

ffflabs am 8. Nov. 2017

👍3

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Html2canvas: speicherndes Element, das über das Ansichtsfenster hinausragt

Hilfreichster Kommentar

Alle 4 Kommentare

Verwandte Themen