如何获取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中，如何获取[object SVGImageElement]对象。

通过迭代对象，我可以获得完整的一组函数和属性。函数"getBBox()"的height和width只提供了定义为宽度（30）和高度（45）的属性值。

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

如果有任何支持，谢谢。

Tamer

- SmileMZ

---

你能解释一下你在代码片段中想要做什么吗？看起来你正在将一个NodeList分配给“test”元素的innerHTML属性。我的理解是innerHTML应该是一个字符串；我不确定当你将一个对象分配给它时会发生什么（除了我想象它可能会将对象转换为其字符串表示形式，并尝试将其解析为HTML）。无论如何，希望你能澄清这段代码的意图。 - jbeard4

我试图获取SVG文档中嵌入图像的通常尺寸。通常的尺寸是指未经缩放的图片尺寸。但是，问题已经解决。在不久的时间内（超过时间期限后），我会自己回答这个问题。我发现，SVG图像方法不能提供我所需的信息来确定测量数据，即未经缩放的图片本身的大小。 - SmileMZ

Answer 1

我已经想出了如何在纯JavaScript的层面上解决它，而不需要进行任何XHR调用或其他操作！

然而，SVG没有任何dom函数来找出图片的未缩放大小。

解决方法！

从属性中获取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;

也应该适用于base64jpeg内联图片(http://en.wikipedia.org/wiki/Data_URI_scheme)。

就是这样!

- SmileMZ

---

当处理类似xlink:href这样的命名空间属性时，您应该使用getAttributeNS而不是getAttribute。 - jbeard4

我认为你的意思是 myPicXO.src = address。但这在Safari/Chrome中不起作用。那里的尺寸直到加载事件后才可用。例如，请参见https://dev59.com/cnRC5IYBdhLWcg3wXP0C。 - mercator

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);

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

- a data chemist

---

我很想这么做，但是系统不允许我...它说我必须等待6个小时。 - SmileMZ