在SVG中检索缩放图像的尺寸

Retrieve dimensions of scaled image within SVG

本文关键字：图像 缩放 SVG 检索      更新时间：2023-09-26

我正在将不同大小的图像加载到内容区域中，由于它们的大小是按比例调整的，因此图像的任意两侧与内容区域的边界之间通常存在间隙。

我在这个图像的顶部铺了一层矩形，调整了不透明度，以改变下面背景图像的可见程度。我希望这个过滤器与图像的大小相匹配。

元素是这样定义的：

 <td id="svgContentCell">
           <svg id="svg" width="1000" height="750" version="1.1" onload="Init()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"
            onmousedown="onMouseDown(evt)" onmousemove="onMouseMove(evt)" onmouseup="onMouseUp(evt)" >
            <image id="background" x="0" y="0" width="100%" height="100%" xlink:href=""></image>
            <rect id="filter" x="0" y="0" width="100%" height="100%" fill="rgb(255, 255, 255)" fill-opacity="0"></rect>
        </svg>
    </td>

我认为使用Javascript这将相对简单，但我无法检索到任何关于background图像大小的有用数据。客户端宽度属性返回0。

var bg = document.getElementById('background');
var scrollWidth = bg.scrollWidth; // result: 0
var clientWidth = bg.clientWidth; // result: 0
var offsetWidth = bg.offsetWidth; // result: 0
var width = bg.getAttribute("width"); // result: 100%
// edit: BoundingClientRect() returns size of container not the scaled image.
var bg = document.getElementById("background");
var rect = bg.getBoundingClientRect();
var height = rect.height; // result: 750
var width = rect.width; // result: 1000
// I can retrieve the **unscaled** image dimensions like this
var bg = document.getElementById('background');
var address = bg.getAttribute('xlink:href');
var original = new Image();
original.src = address;
var unscaledWidth = original.width;
var unscaledHeight = original.height;

有人知道如何获得缩放后的background图像的实际像素宽度和高度，以便适当调整filter元素的大小吗

getBoundingClientRect应该执行您想要的操作，例如

var rect = bg.getBoundingClientRect();

然后，您可以从该对象中拾取宽度和高度属性。

罗伯特·朗森似乎是一个可靠的消息来源，他表示没有办法检索到这一点，我编写了自己的函数来计算它。

function calculateScaledImage() {
    // Get the container dimensions
    var bg = document.getElementById("background");
    var rect = bg.getBoundingClientRect();
    var cHeight = rect.height; // result: 750
    var cWidth = rect.width; // result: 1000
    // Get the unscaled dimensions
    var address = bg.getAttribute('xlink:href');
    // Create new image with URL to get unscaled dimension (not displayed)
    var original = new Image();
    original.src = address;
    var oWidth = original.width;
    var oHeight = original.height;
    // New dimensions and ratio for scaling
    var nWidth;
    var nHeight;
    var ratio;
    var isWide = false;
    // Is the empty space going to be on sides or top
    if (oWidth > oHeight) {
        isWide = true;
            // I found that if the height exceeded the container it scaled it  differently
        if (oHeight > cHeight)
        {
            isWide = false;
        }
    }
    var filter = document.getElementById('filter');
    if (isWide) {
        ratio = cWidth / oWidth;
        nWidth = oWidth * ratio;
        nHeight = oHeight * ratio;
        var adjustment = (cHeight - nHeight) / 2;
        filter.setAttribute("y", adjustment);
        filter.setAttribute("x", 0);
        filter.setAttribute("width", nWidth);
        filter.setAttribute("height", nHeight);
    }
    else {
        ratio = cHeight / oHeight;
        nHeight = oHeight * ratio;
        nWidth = oWidth * ratio;
        var adjustment = (cWidth - nWidth) / 2;
        filter.setAttribute("x", adjustment);
        filter.setAttribute("y", 0);
        filter.setAttribute("width", nWidth);
        filter.setAttribute("height", nHeight);
    }
}

你可以试试这个

var height = document.getElementById('myimage').offsetHeight;
var width = document.getElementById('myimage').offsetWidth;
相关文章：