Как получить реальный (немасштабированный) размер встроенного изображения в документе SVG ?!

Question

У меня есть документ SVG с записью изображения:

<image id="image12975" x="30" y="40" width="30" height="45"
xlink:href="img/Akira1.jpg">    
</image>

Я получил изображение SVG в Javascript, выполнив:

var imgE = document.getElementsByTagName('rect');
document.getElementById('test').innerHTML = imgE;

приносит мне [объект SVGImageElement] в Javascript.

Итерируя объект, я получаю полный набор функций и атрибутов. высота и ширина функции "getBBox ()" дают мне только значения атрибутов, определенные как width (30) и height (45).

Я ищу реальные параметры, как если бы я открывал только изображение, которые в действительности имеют ширину = "300" и высоту = "430" пикселей.

за любую поддержку, я хотел бы поблагодарить вас

Укротитель

Answer 1

Я выяснил, как полностью решить эту проблему на стороне Javascript, без каких-либо вызовов XHR или чего-либо еще!

Тем не менее, SVG не имеет функций dom для определения немасштабированного размера изображения.

гуманный!

Возьмите объект SVGImageElement и его URL из атрибута:

var myPicXE = document.getElementsByTagName('image')[0];
var address = myPicXE.getAttribute('xlink:href');

создать объект Image и назначить его адрес src:

var myPicXO = new Image();
myPicXO.src = address;

и осторожно спросите его высоту и ширину:

myPicXO.width;
myPicXO.height;

должно работать и работать со встроенными изображениями base65jpeg (http://en.wikipedia.org/wiki/Data_URI_scheme)

Вот и все!

Answer 2

Я провел небольшое исследование и не смог найти свойство, которое вы могли бы перечислить, чтобы получить фактическую ширину и высоту изображений.Однако был и другой подход, который показался мне интересным, который включал xmlHttpRequest для получения изображения и перечисления его размеров.

Это заставило меня задуматься о несколько более быстром способе.Решение состоит в том, чтобы использовать скрытый <div> в качестве рабочего контейнера и вытягивать необходимые изображения (используя <img>), где вы можете перечислить ширину и высоту там.Этот псевдокод Например:

• Итерация по коллекции изображений
• Создание узла изображения с соответствующим путем src
• Добавление нового узла в div # ImageEnumeration
• Перечисление полученного изображения

Просто для ухмылок (если это помогает), вот черновик кода для xmlHttpRequest:

var imgRequest = 
  function(sImgUrl, oRequestCallback){
    var xhr = new XMLHttpRequest();  
    xhr.open('GET', sImgUrl, true);  
    xhr.onreadystatechange = oRequestCallback;
    xhr.send(null);  
    };

var xhrImageRequest =
  function(result){
    var oImageDimensions;
    //Create and append <img> to <div #ImageEnumeration>
    //Get image width and height
    //return image width and height
    };

var myImage = imgRequest("http://example.com/myImage.png", xhrImageRequest);

Если это не решаетВаша проблема, я надеюсь, что она хотя бы создаст новые идеи для ее решения.