如何在SVG中获取光栅图像的原始尺寸?

时间:2018-12-12 16:24:57

标签: javascript image svg

在HTML中,可以通过使用naturalHeightnaturalWidth属性来知道图像的原始尺寸。例如:

<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元素中。

0 个答案:

没有答案