Overlapping happening instead of uploading image on mask

问题

Background

I am allowing user to upload an image inside mask image....

Mask image :

User uploaded image :

Requirement: What I need as below :

Issue : What I am getting now as below : The uploaded image is displaying [ overlay ] outside the mask image instead of inside as below.

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

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

回答1:

As I said on your other question, which was practically the same, what you want is called a "Clipping Mask"

Here's some magic. You're welcome!

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

回答2:

I hope the example below is it what you need.

The image inside the mask will be stretched if it is smaller or bigger to the height of the mask.

Before the test of following snippet uploade this image to your computer and then choose it in snippet file dialogue.

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>

回答3:

Your masked-element have

z-index:10

so you need to change below in you css

.slot_photo.overlay_design{
    z-index:11
}

来源：https://stackoverflow.com/questions/54345599/overlapping-happening-instead-of-uploading-image-on-mask

标签

image-masking