重叠发生而不是在蒙版上上传图像

Question

背景

我允许用户上传蒙版图片中的图片....

蒙版图片 :

用户上传图片 :

要求：我需要如下：

问题：我现在得到的结果如下：上传的图像显示[覆盖]在掩码图像之外而不是内部，如下所示。

JS Fiddle: http://jsfiddle.net/uLfeaxck/

这里是website url

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/*" />

Answer 1

您的屏蔽元素有

z-index:10

所以你需要在下面进行更改css

.slot_photo.overlay_design{
    z-index:11
}

Answer 2

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

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

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

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>

Answer 3

正如我在你的上所说的，实际上是一样的，你想要的是 "Clipping Mask"

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

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

Answer 4

图像遮罩是我们使用的方法，而裁剪路线不是一种选择。当想要决定的场景有很多细节，包括皮毛或头发时，剪裁路线会变得很难用。在这些情况下，一种称为 [Image Masking][1] carrier 的方法被添加到游戏中。剪贴蒙版、Photoshop 蒙版、照片保护、通道保护、alpha 保护、层保护和透明度保护是此照片蒙版载体的多个版本或特性。

重叠发生而不是在蒙版上上传图像

Overlapping happening instead of uploading image on mask

image-masking