Question

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

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

这是元素的定义方式：

 <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元素的大小？

Answer 1

getBoundingClientRect应该做你想做的事，例如

var rect = bg.getBoundingClientRect();

然后您可以从该对象中选择宽度和高度属性。

Answer 2

正如罗伯特·朗森（Robert Longson）似乎是一个可靠的来源，表示没有办法检索这个，我编写了自己的函数来计算它。

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

Answer 3

你可以试试这个

var height = document.getElementById('myimage').offsetHeight;
var width = document.getElementById('myimage').offsetWidth;

检索SVG中缩放图像的尺寸

3 个答案: