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

创建一个Image Object并指定它的src addres：

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

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

如何在svg文档中获取嵌入图像的真实（未缩放）大小？！

2 个答案: