Перекрытие происходит вместо загрузки изображения на маску

Фон

Я разрешаю пользователю загружать изображение внутри маски маски....

Маска изображения:

Пользователь загрузил изображение:

Требование: что мне нужно, как показано ниже:

Проблема: что я получаю сейчас, как показано ниже: Загруженное изображение отображает [наложение] вне изображения маски, а не внутри, как показано ниже.

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

Вот сайт 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/*" />
Источник

4 ответа

Решение

Как я уже сказал по вашему другому вопросу, который был практически таким же, то, что вы хотите, называется "Обтравочная маска"

Вот немного магии. Пожалуйста!

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

Источник

Я надеюсь, что пример ниже, это то, что вам нужно.

Изображение внутри маски будет растягиваться, если оно будет меньше или больше высоты маски.

Перед проверкой следующего фрагмента загрузите это изображение на свой компьютер, а затем выберите его в диалоговом окне файла фрагмента.

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://stackru.com/images/276e2b2b1903901c96cd7e18103ead76f2839c7d.png" width="324" height="395"></image>
    </mask>

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

Источник

Ваш замаскированный элемент есть

г-индекс:10

так что вам нужно изменить ниже в вас CSS

.slot_photo.overlay_design{
    z-index:11
}
Источник

Маскирование изображения — это подход, который мы используем, в то время как отсечение маршрута не вариант. Когда ситуация, которую необходимо решить, имеет много деталей, включая мех или волосы, маршрут отсечения становится очень трудным для использования. В этих случаях в игру добавляется способ, называемый несущей [Image Masking][1]. Обтравочная маска, маска Photoshop, защита фотографий, защита канала, альфа-защита, защита слоя и защита прозрачности - это несколько версий или особенностей этого носителя маскирования фотографий.

Источник
Другие вопросы по тегам