Html2canvas: Wie kann ich das Bild drehen speichern?

Erstellt am 10. Mai 2013  ·  14Kommentare  ·  Quelle: niklasvh/html2canvas

Hallo allerseits!
Ich habe eine Frage, kann ich das Bild speichern, das transformiert wurde: Rotate (23deg); ?
Vielen Dank

Feature

Hilfreichster Kommentar

Wie kann ich div mit CSS transform: perspective speichern?

Alle 14 Kommentare

CSS-Transformationen werden noch nicht unterstützt.

Kann ich das Bild in Base64 drehen lassen?

Das Transformations-CSS funktioniert nicht. Irgendeine Lösung???

@arindamm Die einzige schnelle Lösung dafür wäre, wenn Sie "CSS" durch "Canvas" ersetzen.
Nehmen Sie das Bild oder den Text auf die Leinwand und führen Sie die Drehung durch (dies sollte außerhalb der Bibliothek "html2canvas" erfolgen und muss vor dem Aufruf der Funktion erfolgen).

Durch meine Bewerbung ist das nicht möglich. Ich werde ein Online-Geschichtenbuch erstellen. Dort kann der Benutzer so viele Bilder und Texte platzieren, wie er möchte. Sie können diese Objekte auch skalieren und drehen. Ich verwende dafür das DIV-Tag. Wie kann ich eine Leinwand mit den Daten des div-Elements erstellen? Können Sie bitte vorschlagen?

@arindamm Es war wie ich damals sagte um das Bild zu retten,
Sie können alle Elemente und "window.getComputedStyle" (oder jquery) nehmen, um zu erkennen, ob es eine "Rotation" gab.
Wenn Sie im Stil des Objekts "rotieren", nehmen Sie den Wert von "rotation" und den Text (oder das Bild), der sich innerhalb des Objekts befindet, und simuliert den Effekt auf der "Leinwand".

 var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 var rectWidth = 150;
 var rectHeight = 75;
 // Kontext in die Leinwandmitte übersetzen
 context.translate (canvas.width / 2, canvas.height / 2);
 // um 45 Grad im Uhrzeigersinn drehen
 context.rotate (Math.PI / 4);
 context.fillStyle = 'blau';
 context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

Verbindungen:
https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle
http://api.jquery.com/css/ (CSS mit Jquery abrufen)
http://www.html5canvatutorials.com/advanced/html5-canvas-transform-rotate-tutorial/ (Drehen mit Leinwand+Javascript)

Notiz:
Es gibt keine fertige Lösung, aber vielleicht können Sie mit diesen Links und dem Code eine Alternative für Ihren Fall erstellen.
Eine andere Idee ist, dass Sie für jeden Browser ein Plugin erstellen, das die Arbeit erledigt:

Chrom:
chrome.tabs.captureVisibleTab(integer windowId, object options, function callback)
Link: http://developer.chrome.com/extensions/tabs.html

Firefox: void drawWindow( in nsIDOMWindow window, in float x, in float y, in float w, in float h, in DOMString bgColor, in unsigned long flags [optional]);
Link: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D?redirectlocale=en-US&redirectslug=DOM%2FCanvasRenderingContext2D#drawWindow ()

Hoffentlich hilft das.

Schließe dies, da es mehrere andere Probleme zum selben Thema gibt.

Vielleicht ist es interessant zu bemerken, dass das Drehen tatsächlich funktioniert, wenn Sie ein Bild als Blob einbetten ...

Noch seltsamer: Es funktioniert auch ohne Blob. Meine Datei, die ich vor ein paar Wochen bekommen habe, gibt an, dass es 0.4.1 ist. Beim Selberbauen oder Installieren über Bower hat es nicht funktioniert. Leider kann ich mich nicht erinnern, wo ich es genommen habe, da ich nur herumgespielt habe ...

Content div kommt herunter, wenn ich das Kontrollkästchen mit 0.4.1 aktiviere
Kann mir bitte jemand helfen.

Sie können eine Problemumgehung durchführen, die hier beschrieben wird:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

Danke per Link @jjoe64 , macht aber für html2canvas keinen Sinn.

html2canvas ist eine Bibliothek zum Rendern (Neuzeichnen) von DOM-Elementen (oder Vollseiten) in Canvas und ohne Render-Canvas-Tag.

Ihre Lösung funktioniert nur für ein Element mit Rotation.

Ja, es ist keine Lösung, die perfekt funktioniert, aber es ist ein _Workaround_ für das Problem, wenn Sie gedrehten Text oder Bilder rendern müssen. Und für diesen Anwendungsfall funktioniert es perfekt in unserem Projekt, in dem wir es verwendet haben.

Wie kann ich div mit CSS transform: perspective speichern?

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen