Wie bekomme ich die reale (unskalierte) Größe eines eingebetteten Bildes im svg Dokument ?!

8

Ich habe ein SVG-Dokument mit dem Bildeintrag darin:

%Vor%

Ich habe das SVG-Bild in Javascript geholt, indem ich Folgendes mache:

%Vor%

bringt mir das [Objekt SVGImageElement] in Javascript.

Durch die Iteration des Objekts habe ich eine vollständige Untermenge von Funktionen und Attributen. height und width der Funktion "getBBox ()" bringen nur die Attributwerte, die als width (30) und height (45) definiert sind.

Ich suche nach den realen Parametern, wie ich das Bild allein öffnen würde, die in Wirklichkeit Breite="300" und Höhe="430" Pixel sind.

Für jede Unterstützung möchte ich Ihnen danken

Tamer

    
SmileMZ 30.07.2011, 16:39
quelle

2 Antworten

8

Ich habe herausgefunden, wie ich es vollständig auf Javascript-Ebene lösen kann, ohne irgendwelche XHR-Aufrufe oder was auch immer zu machen!

SVG hat jedoch keine dom-Funktionen, um die unskalierte Größe eines Bildes herauszufinden.

Lösung!

Ergreifen Sie das SVGImageElement-Objekt und die URL des Attributs:

%Vor%

Erstellen Sie ein Image-Objekt und weisen Sie ihm die src-Adresse zu:

%Vor%

und bitte vorsichtig um die Höhe und Breite:

%Vor%

sollte auch funktionieren mit base65jpeg Inline-Bildern ( Ссылка )

Das ist es!

    
SmileMZ 31.07.2011 00:40
quelle
3

Ich habe ein wenig recherchiert und konnte keine Eigenschaft finden, die Sie aufzählen könnten, um die tatsächliche Breite und Höhe der Bilder zu erhalten. Es gab jedoch einen anderen Ansatz, der interessant erschien, der ein xmlHttpRequest beinhaltete, um das Bild zu erhalten und seine Dimensionen aufzulisten.

Das brachte mich auf einen etwas schnelleren Weg. Die Lösung besteht darin, einen versteckten <div> als Arbeitscontainer zu verwenden und die notwendigen Bilder herunterzuziehen (mit <img> ), wo Sie dort Breite und Höhe aufzählen können. Dieser Pseudocode Zum Beispiel:

  • Iterate durch Sammlung von Bildern
  • Erstellen Sie einen Image-Knoten mit dem entsprechenden src-Pfad
  • Fügen Sie den neuen Knoten an div # ImageEnumeration
  • an
  • Aufgezeichnetes Bild auflisten

Nur für grins (wenn es hilft) hier war ein Entwurf von Code für die xmlHttpRequest:

%Vor%

Wenn dies Ihr Problem nicht löst, hoffe ich, dass es zumindest einige neue Ideen zur Lösung des Problems ergeben wird.

    
a data chemist 30.07.2011 17:21
quelle

Tags und Links