在HTML中,可以通过使用naturalHeight
和naturalWidth
属性来知道图像的原始尺寸。例如:
<img
src="img.png"
onload="console.log({width:this.naturalWidth, height:this.naturalHeight});"
/>
但是SVG中的image
元素没有这些属性。例如,以下代码为两个属性返回undefined
:
<svg xmlns="http://www.w3.org/2000/svg">
<image
xlink:href="img.png"
onload="console.log({width:this.naturalWidth, height:this.naturalHeight});"
/>
</svg>
现在,我通过使用通过使用img
构造函数将图像加载到Image()
HTML元素中的函数来解决此问题:
getRasterSize("img.png", function(size) {
console.log(size);
});
function getRasterSize(rasterURL, callback) {
var newImg = new Image();
newImg.src = rasterURL;
newImg.onload = function() {
var rasterSize = {
width: newImg.naturalWidth,
height: newImg.naturalHeight
};
if (typeof callback !== "undefined") callback(rasterSize);
};
}
但是我想知道是否可以直接从SVG image
元素获取图像的原始尺寸,而无需先将图像加载到img
HTML元素中。