Html2canvas: Rendert nur, was sichtbar ist

Irgendwie zeigt es auf deinen Beispielen auf der Homepage alles im Körper, auch was nicht zu sehen ist... wie hast du das gemacht?

Mögliches Duplikat von: https://github.com/niklasvh/html2canvas/issues/117

Also Ich möchte wissen, wie man ein bestimmtes Element erfassen kann? hat jemand eine lösung？

@justein Probier das aus

<div id="test-case">Test-me</div>

html2canvas(document.getElementById("test-case")).then(function(canvas) {
    document.body.appendChild(canvas);
});

Dieses Verhalten kann ich mit der neusten Version bestätigen. Es wird die richtige Größe des angeforderten Objekts gerendert, aber nichts, was sich außerhalb des aktuellen Ansichtsfensters befindet, auf der Leinwand gerendert. Also wenn die

<div id="test-case">Test-me</div>

derzeit im Browser sichtbar ist, wird es gerendert. Wenn es außerhalb des Bildschirms ist, ist die Leinwand leer (aber die richtige Größe). Teilweise sichtbar: Teilweise gerendert. Meins verhält sich nicht wie scrollHeight = 0, es rendert alles, was sichtbar ist, wenn der Code ausgeführt wird. (Mein Button ist unten).

Wie der Kommentar von btm würde ich gerne wissen, wie es auf der Beispielseite gemacht wird. Könnte es sich auf etwas in Angular oder Bootstrap verlassen, um die Off-Screen-Ressourcen zu erhalten?

@cchubb Ich verstehe nicht, was Angle und Bootstrap damit zu tun haben. Das Problem von John scheint mir eine Frage der Wiedergabe eines bestimmten Elements zu sein.

Wenn Sie außerhalb des Ansichtsfensters rendern möchten, verwenden Sie einfach

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

Wenn Sie Elemente "overflow" rendern möchten, entfernen Sie den "overflow" zur Laufzeit und fügen Sie ihn nach dem Vorgang mit Javascript für add className wie folgt hinzu:

.no-scroll {
     overflow: visible !important;
}

#main {
     overflow: auto;
     height: 200px;
}

<div id="main">
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
</div>

document.getElementById("main").className = "no-scroll";
html2canvas(document.body).then(function (canvas) {
      document.getElementById("main").className = "";
});

Oder zeigen Sie einfach auf html2canvas, um das Element innerhalb des Elements mit "overflow" wie folgt zu rendern:

#parent {
     overflow: auto;
     height: 200px;
}

#child {
background-color: #fc0;
height: 600px;
}
<div id="parent">
<div id="main">
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
</div>
</div>

html2canvas(document.getElementById("main")).then(function (canvas) {});

Hat wirklich viele Vorschläge für Features, die aus meiner Sicht unnötig sind, zielen Sie einfach auf die richtigen DOM-Elemente und verwenden Sie das "CSS" zu ihren Gunsten.

Ich habe es herausgefunden. Sie haben es in 0.5.0-alpha2 behoben. Wenn ich die 0.5.0-alpha1-Version verwende, schneidet es, aber die alpha2-Version nicht. Ich habe nicht einmal bemerkt, dass alpha2 verfügbar war, weil sich die Veröffentlichungsseite auf alpha1 konzentrierte.

Hier ist eine Geige, die demonstriert, dass es jetzt mit alpha2 funktioniert. https://jsfiddle.net/cchubb/fy7tw7ek/1/ Wenn Sie die externe Ressource wieder auf alpha1 ändern, wird sie beim Klicken auf den unteren Link abgeschnitten. (Sie müssen die Download-Datei als .png speichern, um sie anzuzeigen. Geigen lassen mich das Ausgabefenster href nicht in Daten ändern.)

@btm1 , versuchen Sie, auf Alpha2 zu aktualisieren.

@cchubb Ich

@cchubb das zugrunde liegende Problem ist in Alpha 2 behoben und du hast Recht, es ist gut versteckt, ich habe nicht einmal bemerkt, dass es ein Alpha 2 gab.

Hmm, bei mir wird auch in alpha2 immer noch nur der Teil des Elements gerendert, der im Viewport "sichtbar" ist. Eine Demonstration finden Sie unter http://jsfiddle.net/NPC42/ykvL6a17/ – html2canvas exportiert nur die Zeilen, die in das Ansichtsfenster gescrollt werden (unabhängig davon, ob sie in einem gescrollten Container-Div sichtbar sind oder nicht).

Nenne ich html2canvas irgendwie falsch? Wenn ich es mit meinem tatsächlichen Code teste (nicht dem JSFiddle-Code, den ich nur für die Demo erstellt habe), hilft dieser Vorschlag beim Rendern des gesamten Elements: https://github.com/niklasvh/html2canvas/issues/650 , aber ich hoffe um ein Hacken der Bibliothek zu vermeiden.

@NPC Es wird nicht nur

@btm1 , ja, ich

Im Moment habe ich in meiner App festgestellt, dass ich mein gesamtes Element wieder an den Körper anbringen muss, indem ich eine bestimmte Breite / Höhe erzwinge (da es absolut positionierte Elemente enthält), währenddessen die gesamte Küche mit einem Vollbild "Export wird vorbereitet, bitte warten", da html2canvas mehr als 10 Sekunden braucht, um alles zu rendern. Nachdem das Rendern abgeschlossen ist, hänge ich es wieder an den ursprünglichen Ort (in einem gescrollten Container) an und hebe die Breite/Höhe auf.

Umständlich, aber es funktioniert.

Seltsamerweise wird nur von der aktuell sichtbaren oberen Begrenzung des angegebenen Elements gerendert.

Versuchen Sie es mit https://jsfiddle.net/bianjp/bpc3nq69/1/. Scrollen Sie zu "Bildschirm drucken" und klicken Sie darauf. Das generierte Bild enthält keine oberen Zeilen, die beim Anklicken nicht sichtbar sind.
Verwenden der Version 0.5.0.beta4.

Die Lösung besteht darin, $('html, body').scrollTop(0) aufzurufen (oder eine andere Methode, um die Oberseite des zu rendernden Elements sichtbar zu machen), bevor Sie html2canvas aufrufen.

danke @bianjp für die vorgeschlagene Korrektur.

Seltsamerweise wird nur von der aktuell sichtbaren oberen Begrenzung des angegebenen Elements gerendert.

Ist das ein normales Verhalten... Es kommt mir sehr seltsam vor!

+1

Diese SO-Antwort hat für mich funktioniert.

Scrollen Sie vor dem Aufrufen von html2canvas mit dem Element, das Sie rendern möchten, in das Ansichtsfenster.

const el = document.querySelector('#test')
el.scrollIntoView()
setTimeout(function () {
  html2canvas(el, {
    onrendered: function (canvas) {
      document.body.appendChild(canvas)
    },
    useCORS: true
  })
}, 10)

Für mich geht das.
Die Version ist 0.5.0-beta4.

Ist das immer noch ein Problem mit v1.0.0 ? Wenn ja, könnten Sie bitte ein Beispiel für jsfiddle teilen .

Dieses Problem wurde automatisch geschlossen, da unsere Anfrage nach weiteren Informationen vom ursprünglichen Autor nicht beantwortet wurde. Wir haben nur die Informationen, die derzeit in der Ausgabe enthalten sind, und wir haben nicht genügend Informationen, um Maßnahmen zu ergreifen. Bitte wenden Sie sich an uns, wenn Sie die benötigten Antworten haben oder finden, damit wir weitere Nachforschungen anstellen können.

Hey @niklashvh

Ich hatte auch das Problem, einen Snapshot zu machen, der nur für das DOM sichtbar ist. Ich habe Version 0.5.0-beta4
Also stimme ich der @ziyoung- Lösung zu. Ich habe das gleiche gemacht, wie er es vorgeschlagen hat.

           `$('html,body').scrollTop(0);

     html2canvas( $("#rectangular_div"), {
         useCORS: true,
         dpi: 200,

          onrendered:function(canvas) {

              var str = canvas.toDataURL("image/png");
              var contentType = 'image/png';
              console.log(str);
              b64Data =str;
              imgFrameSave();
          }
        })`

Also setze ich die div-Position oben auf 0 auf den Körper und rufe dann html2canvas auf. Meiner Erfahrung nach habe ich daher empfohlen, die Version 0.5.0-beta4 von @eKoopmans zu verwenden, damit Sie das Problem der

Das funktioniert auf dem Desktop, aber es funktioniert nicht auf dem Handy

Was ich getan habe, ist window.scrolTo(0,0) vor dem Aufruf von htmltocanvas(), wenn Sie oben auf dem Bildschirm sind, wird das Div vollständig gedruckt