Question

我有2张图片，其中一张图片有一个Mask区域。并且可以通过上图的Masked区域看到另一个图像。我想将第二个图像置于第一个图像的Mask区域中心。

目前我使用下面的功能将图像缩放到带有遮罩区域的图像（它有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有一个可以透视的Mask区域，IMAGE 2位于IMAGE 1后面，但是它的左上角与Mask Area的左上角对齐。我想要的是，IMAGE 2 center = Mask Area Center

enter image description here

我尝试了很少的东西，没有把它们弄得很对，任何反馈都会非常有用

Answer 1

如果我从您的代码中正确理解。您想要调整图像大小以固定到您的蒙版中。我已经使用您的函数here编写了一个演示。因为我不知道您的真实HTML，所以我使用自己的代码，其预定义值为maskW和maskH。

需要注意的另一点是：如果要手动布局，则应将图像样式的position属性设置为默认值static以外的其他值。在演示中，我将position元素的img值设置为absolute。

Answer 2

如果您想尝试，可以使用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%;
}

<强> Fiddle

Answer 3

我在这里看到至少两种方法：

使用第二张图像的负左边距

<img id="img"/><img id="mask"/>
<script>
mask.style.marginLeft = (imgW + maskW) / -2;
mask.style.marginTop = (imgH - maskH) / 2;
</script>

将图像显示为两个div的背景（一个嵌入另一个div）。设置它们的宽度和高度相同的值（更大的图像）并使用内部背景的中心对齐。但是，如果你是通过AJAX获取图像，你应该检索图像的大小。

<div id="img">
    <div id="mask"></div>
</div>
<style>
#img {
    background-position: top left;
    background-repeat: no-repeat;
}
#mask {
    width: inherit;
    height: inherit;
    background-position: center center;
    background-repeat: no-repeat;
}
</style>
<script>
var imgDiv = document.getElementsById('img'),
    maskDiv = document.getElementById('mask');
imgDiv.style.width = imgW + 'px'; // from AJAX
imgDiv.style.height = imgH + 'px';
imgDiv.style.backgroundImage = "url('img.jpg')"';
maskDiv.style.backgroundImage = "url('mask.jpg')";
</script>

这是一个想法，应该使用修复

如何使用JavaScripts按中心对齐2个图像

3 个答案: