Feature Erkennung von absoluten URL-Bildern innerhalb von fremorObject

9

Nach ein wenig Recherche habe ich festgestellt, dass Chrome und Opera Bilder innerhalb eines foreignObject rendern, wenn sie einen absoluten Pfad haben. Firefox rendert Bilder nur, wenn sie im Format "uri" vorliegen, da keine externen Ressourcen geladen werden.

Ich habe mehrere Methoden ausprobiert, aber ich kann keine Möglichkeit finden, dieses Verhalten zu erkennen. Ich habe beispielsweise versucht, die Dimensionen des Bildes im foreignObject zu überprüfen, aber sie haben immer Recht, Firefox zeichnet einfach ein transparentes Rechteck mit der gleichen Bildgröße.

Weißt du wie das geht?

CODE Diese Situation ist schwer zu reproduzieren, aber Sie können es auf diese Weise testen:

  • Gehen Sie zur Google-Startseite
  • Öffnen Sie die Firebug-Konsole oder die JavaScript-Konsole in Chrome
  • Führe diesen Code aus:

:

%Vor%

Bei Chrome ist das Logobild sichtbar, bei Firefox nicht. Der SVG-Code ist Base64-codiert, das ist der ursprüngliche Code:

%Vor%     
mck89 25.12.2013, 11:39
quelle

2 Antworten

1

Wenn die Unterstützung des Benutzeragenten (Browsers) für diese Funktion nicht verfügbar ist, können Sie die Fallback-Technik verwenden. Wenn also ein Browser diese Funktion nicht unterstützt, wird 'Kein Fremdobjekt unterstützt' angezeigt:

%Vor%

Oder wenn Sie es in JavaScript erkennen möchten, können Sie es am einfachsten versuchen:

%Vor%

oder Sie können hasFeature

verwenden %Vor%

Parameter

Funktion     Ist ein DOMString, der den Featurenamen darstellt.

Version     Ist ein DOMString, der die Version der Spezifikation darstellt, die das Feature definiert.

    
Zaheer Ahmed 30.12.2013 09:37
quelle
0
  1. Erstellen Sie eine SVG-Datei mit einem <foreignObject> -Tag, das auf ein externes PNG- oder GIF-Bild verweist. Wahrscheinlich einfacher, wenn das Bild eine einzige Farbe hat.
  2. Laden Sie das Bild mit einem HTML <img> -Tag, z. %Code%
  3. Kopieren Sie das Bild in den Arbeitsbereich
  4. Wenn das Bild geladen wurde, lesen Sie die Farbe von der Leinwand an der Stelle ab, an der das externe PNG angezeigt werden soll

Dies funktioniert mit Firefox, da es die Zeichenfläche nicht beschmutzt und sie schreibgeschützt macht, wenn ein SVG-Bild darin geladen wird. Ich bin mir nicht sicher, ob Chrome immer noch die Leinwand verunstaltet. Wenn dies der Fall ist, wird Schritt 4 fehlschlagen.

Hier ist ein Code für Schritt 3.

%Vor%     
Robert Longson 01.01.2014 15:54
quelle