Html2canvas: Opazität

Erstellt am 5. Nov. 2015  ·  18Kommentare  ·  Quelle: niklasvh/html2canvas

Hallo,

Ich sollte eine Leinwand aus einer Webseite erstellen und habe Ihr Plugin gefunden. Es funktioniert sehr gut, aber ich möchte sagen, ob es möglich ist, die Deckkraft jedes Elements beizubehalten. In diesem Moment funktioniert es nicht.

Freundliche Grüße

Bug

Hilfreichster Kommentar

Das funktioniert auch bei mir nicht. Die Deckkraft geht verloren.

Alle 18 Kommentare

Dies hängt davon ab, wie Sie die Deckkraft verwenden. Setzen Sie ein Beispiel mit jsfiddle.

Ich habe versucht, Opacity auch zum Laufen zu bringen, und es scheint es nicht aufrechtzuerhalten.

Ich habe ein Bild in einem Div. Das Div hat Inline-CSS opacity: 0.78; aber auf dem Screenshot ist es 100% undurchsichtig.

@ Dayjo Browser? Betriebssystem? x86 oder x64? Geben Sie bitte ein jsfiddle-Beispiel an =)

OSX 10.11.4
Firefox 44.0.2
Chrome 49.0.2623.112

Bearbeiten: OK, also habe ich dieses Problem anscheinend gelöst, indem ich dem img-Tag zusätzliches CSS hinzugefügt habe. Ich habe explizit festgelegt;

display: block;
position: static;

Und jetzt unterstützen Bilder die Deckkraft, obwohl sie nicht sicher sind, warum sie blockiert werden muss, und die Position: relative scheint tatsächlich zu verhindern, dass sie funktioniert. Andere Elemente, die nicht positioniert sind: relative (dh ein Div mit Text) funktionierten einwandfrei.

Hier ist eine jsFiddle, die das Problem veranschaulicht: http://jsfiddle.net/tqqaa16x/. Ich kämpfe auch damit.

Die Deckkraft scheint nicht mit den einfachsten Beispielen zu funktionieren:
https://jsfiddle.net/JoolsCaesar/yLj4qwe2/3/
https://jsfiddle.net/JoolsCaesar/yLj4qwe2/5/
(In Chrome getestet)

@niklasvh Immer noch das gleiche Problem mit Version 1.0.0-alpha.12 Ich habe ein Div mit abgerundeten Ecken, der Website-Hintergrund ist dunkel, aber auf dem gespeicherten Bild hat es weiße Ecken, wenn sie transparent sein sollten.

BEISPIEL:
html2canvas_error

Das funktioniert auch bei mir nicht. Die Deckkraft geht verloren.

@Andy

@niklasvh Immer noch das gleiche Problem mit Version 1.0.0-alpha.12 Ich habe ein Div mit abgerundeten Ecken, der Website-Hintergrund ist dunkel, aber auf dem gespeicherten Bild hat es weiße Ecken, wenn sie transparent sein sollten.

BEISPIEL:
html2canvas_error

Sie sollten die Hintergrundfarbe verwenden: rgba (x, x, x, opacityValue) Ersetzen für Opazität CSS-Stil sollte Ihr Problem lösen.

Behoben in https://github.com/niklasvh/html2canvas/tree/v1.0.0

Dieser Link funktioniert jetzt nicht!

Ich kann bestätigen, dass die Deckkraft in der neuesten Version immer noch nicht funktioniert: 1.0.0-rc.7. Vielleicht können wir dieses Ticket wieder öffnen lassen?

Ich kann bestätigen, dass die Deckkraft in der neuesten Version immer noch nicht funktioniert: 1.0.0-rc.7. Vielleicht können wir dieses Ticket wieder öffnen lassen?

Verwenden Sie diese Version: https://github.com/niklasvh/html2canvas/suites/1187063696/artifacts/17429870 , Deckkraft wird funktionieren.

Ich kann bestätigen, dass die Deckkraft in der neuesten Version immer noch nicht funktioniert: 1.0.0-rc.7. Vielleicht können wir dieses Ticket wieder öffnen lassen?

Verwenden Sie diese Version: https://github.com/niklasvh/html2canvas/suites/1187063696/artifacts/17429870 , Deckkraft wird funktionieren.

Mit was genau hast du mich verbunden? Ich habe es geöffnet und es heißt, es ist v1.0.0-rc.7 ...

Ich kann bestätigen, dass die Deckkraft in der neuesten Version immer noch nicht funktioniert: 1.0.0-rc.7. Vielleicht können wir dieses Ticket wieder öffnen lassen?

Verwenden Sie diese Version: https://github.com/niklasvh/html2canvas/suites/1187063696/artifacts/17429870 , Deckkraft wird funktionieren.

Mit was genau hast du mich verbunden? Ich habe es geöffnet und es heißt, es ist v1.0.0-rc.7 ...

Der Versionsname ist derselbe, aber in dieser JS-Datei wurde der Opazitätsfehler behoben.

Ich kann bestätigen, dass die Deckkraft in der neuesten Version immer noch nicht funktioniert: 1.0.0-rc.7. Vielleicht können wir dieses Ticket wieder öffnen lassen?

Verwenden Sie diese Version: https://github.com/niklasvh/html2canvas/suites/1187063696/artifacts/17429870 , Deckkraft wird funktionieren.

Mit was genau hast du mich verbunden? Ich habe es geöffnet und es heißt, es ist v1.0.0-rc.7 ...

Der Versionsname ist derselbe, aber in dieser JS-Datei wurde der Opazitätsfehler behoben.

Vielleicht könnten Sie eine Pull-Anfrage stellen, damit die gesamte Community von diesem Fix profitieren kann und wir weiterhin Garn (oder npm) für die html2canvas-Abhängigkeit verwenden können?

@niklasvh Ich habe gerade angefangen, html2canvas in meinem Projekt zu verwenden und es ist großartig! Aber ich stoße auch auf diesen Opazitätsfehler - behebt das obige Bundle dieses Problem / gibt es eine Chance, dass Sie es veröffentlichen und das veröffentlichte npm-Paket aktualisieren können?

@davidswinegar das hat bei mir funktioniert. Die letzte Zahl ist die Deckkraft

background-color: rgba(25, 163, 71, .5);

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen