-5

背景

我允许用户在掩码图像中上传图像....

蒙版图片：

在此处输入图像描述

用户上传图片：

在此处输入图像描述

要求：我需要如下：

在此处输入图像描述

问题：我现在得到的内容如下：上传的图像在蒙版图像之外显示[覆盖]，而不是如下所示。

在此处输入图像描述

JS 小提琴：http: //jsfiddle.net/uLfeaxck/

这是网站网址

html

<h3>Upload Photo</h3>
<label id="btn_upload_from_computer" for="fileupload_image" class="button -primary -size-md -full-width">
<svg class="icon-computer" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="23px" height="20.031px" viewBox="0 0 23 20.031" enable-background="new 0 0 23 20.031" xml:space="preserve">
<path id="computer" fill="#FFFFFF" d="M21.793,0H1.207C0.539,0.002-0.002,0.545,0,1.213v14.42c-0.001,0.667,0.539,1.209,1.207,1.211
                h6.47v1.442c0,1-2.433,1-2.433,1v0.722l6.127,0.023h0.068l6.126-0.023v-0.722c0,0-2.434,0-2.434-1v-1.442h6.662
                c0.668-0.002,1.208-0.543,1.207-1.211V1.213C23.002,0.545,22.461,0.002,21.793,0z M21.235,15.11H1.765V1.735h19.47v13.378V15.11z" />
</svg>
From your computer
</label>
<input type="file" id="fileupload_image" style="position: absolute; left: -2000px;" accept="image/*" />
4

4 回答 4

2

我希望下面的示例是您所需要的。

如果遮罩内的图像小于或大于遮罩的高度，则遮罩内的图像将被拉伸。

在测试以下片段之前将此图像上传到您的计算机，然后在片段文件对话框中选择它。

function load(file)
{
    var img = new Image(),
        imgURL = URL.createObjectURL(file);

    //this onload function we need to get width + height of image.
    img.onload = function()
    {
        var width = img.naturalWidth,
            height = img.naturalHeight,
            maskedImage = document.getElementById('masked-image');
        
        maskedImage.setAttribute('xlink:href', imgURL);
        //you can also change this width + height of image before setting of following attribute
        //For ex. the height of #mask1 is 395 and we stretch it for this height like:
        maskedImage.setAttribute('height', 395);
        //in this case DO NOT set width attribute!
        //maskedImage.setAttribute('width', width);
        //maskedImage.setAttribute('height', height);
        //in this case you do not need this onload function.

        URL.revokeObjectURL(imgURL);
    };
    img.src = imgURL;
}
<input type="file" onchange="load(this.files[0])"/><br>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="324" height="395">
    <mask id="mask1">
        <image xlink:href="https://i.stack.imgur.com/L5daY.png" width="324" height="395"></image>
    </mask>

    <image id="masked-image" xlink:href="" mask="url(#mask1)"></image>
</svg>

于 2019-01-30T07:53:22.593 回答
0

Image Masking 是我们使用的方法，而裁剪路径不是一种选择。当需要决定的情况有很多细节时，包括皮毛或头发，剪裁路线将变得非常难以使用。在这些情况下，添加了一种称为 [Image Masking][1] 载体的方法。剪贴蒙版、Photoshop 蒙版、照片保护、通道保护、Alpha 保护、图层保护和透明度保护是此照片遮罩载体的许多版本或特色。

于 2022-01-28T04:29:45.413 回答
0

你的蒙面元素有

z-索引：10

所以你需要在你的CSS中改变下面

.slot_photo.overlay_design{
    z-index:11
}
于 2019-01-24T11:43:14.253 回答
0

正如我在您的另一个问题上所说的，实际上是相同的，您想要的就是所谓的“剪贴蒙版”

这里有一些魔法。别客气！

codepen:https://codepen.io/anon/pen/zeZMLz

于 2019-02-06T08:33:13.963 回答