如何在svg文档中获取嵌入图像的真实(未缩放)大小？!

Question

我有一个带有图像条目的SVG文档:

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

我通过以下方式在Javascript中获取了SVG图像:

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

在Javascript中给我带来了[对象SVGImageElement].

通过迭代对象,我有一个完整的函数和属性子集.函数"getBBox()"的高度和宽度仅为我提供了定义为width(30)和height(45)的attribut值.

我正在寻找真实的参数,就像我单独打开图片一样,实际上是width ="300"和height ="430"像素.

对于任何支持,我会非常感谢你

塔梅尔

Answer 1

我想出了如何在Javascript方面完全解决它,而不进行任何XHR调用或其他任何事情!

但是,SVG没有任何dom函数来确定图片的未缩放大小.

Sollution!

从属性中获取SVGImageElement对象及其URL:

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

创建一个图像对象并分配它的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);

如果这不能解决您的问题，我希望它至少能创造一些解决问题的新想法。