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 有一个可以透视的 Mask 区域，而 IMAGE 2 在 IMAGE 1 的后面，但它的左上角与 Mask Area 的左上角对齐。我想要的是，IMAGE 2 center = Mask Area Center

在此处输入图像描述

我尝试了一些东西，但没有得到任何完全正确的东西，任何反馈都会非常有帮助

4

3 回答 3

1

如果我从您的代码中正确理解。您想调整图像大小以固定到您的蒙版中。我在这里使用您的功能编写了一个演示。因为我不知道你真正的 HTML，所以我使用我自己的代码和预定义的值maskWand maskH。

还有一点需要注意：如果要手动布局，则应将position图像样式的属性设置为默认值以外的其他值。static在演示中，我将element的position值设置为.imgabsolute

于 2013-07-30T06:05:29.177 回答
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 回答
0

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

  • 使用第二张图片的负左边距

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

  • 将图像显示为两个 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>

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

于 2013-07-30T06:58:18.550 回答