1

2 つの画像があり、そのうちの 1 つにマスク領域があります。そして、他の画像は上の画像のマスクされた領域を通して見ることができます. 最初の画像のマスク領域内で 2 番目の画像を中央に配置したいと考えています。

現在、以下の関数を使用してマスク領域と一致するように画像をスケーリングしています（配置を試みた3行のコードがありますが、機能しませんでした）、

function scaleimage(img){

    img.style.height = 'auto';
    img.style.width = 'auto';

   //Getting the image hight and width
    var imgW = img.clientWidth;
    var imgH = img.clientHeight;

   //Getting the mask hight and width
    var maskH = data.result.mask.maskhight;
    var maskW = data.result.mask.maskwidth;

    var scaleH = maskH / imgH;
    var scaleW = maskW / imgW;

   // Scaling
    if (scaleH < scaleW) {
        img.style.height = maskH + "px";
        img.style.width = Math.round(imgW * scaleH) + "px";
    } else {
        img.style.width = maskW + "px";
        img.style.height = Math.round(imgH * scaleW) + "px";
    }

      //Align image - commented below code since it didnt work

  /*img.style.top = Math.round((mask1H - imgH) / 2) + 'px';
    img.style.left = '50%';
    img.style.marginLeft = Math.round(imgW/2) + 'px'; */

}

実例としての現在および予想される結果。IMAGE 1 には透けて見えるマスク領域があり、IMAGE 2 は IMAGE 1 の後ろにありますが、その左上をマスク領域の左上に合わせます。私が欲しいのは、 IMAGE 2 センター = マスクエリアセンター

ここに画像の説明を入力

私はいくつかのことを試しましたが、どれもうまくいきませんでした。フィードバックは本当に役に立ちます

4

3 に答える 3

1

試してみたい場合は、これに対する css ソリューションがあります。

HTML:

<div>
    <img class="image" src="http://dummyimage.com/300x200/0000ff/ffffff&text=image" alt="image">
</div>

CSS:

div {
    width: 150px;
    height: 100px;
    margin: 50px auto 0;
    position: relative;
    background: url(http://dummyimage.com/150x100/000/fff&text=mask) no-repeat center center;
}
.image {
    width: 80%;
    top: 50%;
    left: 50%;
    position: absolute;
    margin: -27% 0 0 -40%;
}

フィドル

于 2013-07-30T07:39:15.887 に答える