如何在SVG文档中获得嵌入图像的真实(未缩放)大小?

how to get the real (unscaled) size of an embedded image in the svg document?!

本文关键字：真实 缩放 大小 图像 SVG 文档      更新时间：2023-09-26

我有一个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;

给我带来了Javascript中的[object SVGImageElement]。

通过迭代对象，我得到了函数和属性的完整子集。height和width的函数"getBBox()"只给我定义为width(30)和height(45)的属性值。

我正在寻找真实的参数，就像我单独打开图片一样，这在现实中是宽度="300"和高度="430"像素。

对于任何支持我都将非常感谢

降服者

我想出了如何完全在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)

就是这样!

我做了一些研究，无法找到一个可以枚举的属性来获得图像的实际宽度和高度。然而，还有另一种方法似乎很有趣，它包括一个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);

如果这不能解决你的问题，我希望它至少能产生一些新的想法来解决它。

相关文章：