1

さまざまなサイズの画像をコンテンツ領域にロードしていますが、それらのサイズが比例して変更されるため、画像の特定の 2 つの側面とコンテンツ領域の境界線の間にギャップが生じることがよくあります。

この画像の上部に長方形を重ね、不透明度を調整して、下の背景画像の可視性を変更します。このフィルターを画像のサイズに合わせたいです。

要素の定義方法は次のとおりです。

 <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適切に変更できるように、スケーリングされた画像の実際のピクセル幅と高さを取得する方法を知っている人はいますか?

4

3 に答える 3

2

getBoundingClientRectは、たとえば、必要なことを行う必要があります

var rect = bg.getBoundingClientRect();

次に、そのオブジェクトから幅と高さのプロパティを選択できます。

于 2013-08-22T10:02:59.060 に答える
0

信頼できるソースのように見える 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);
    }
}
于 2013-08-22T13:47:54.290 に答える
-2

あなたはこれを試すことができます

var height = document.getElementById('myimage').offsetHeight;
var width = document.getElementById('myimage').offsetWidth;
于 2013-08-22T09:49:26.777 に答える