Overlapping happening instead of uploading image on mask - image-masking

Question

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

Answer 1

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>

Answer 2

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

Answer 3

Your masked-element have
z-index:10
so you need to change below in you css
.slot_photo.overlay_design{
z-index:11
}

Answer 4

Image Masking, is the approach we use, whilst clipping route is not an option. When the situation that desires to be decided on has a lot detail, inclusive of fur or hair, clipping route will become very difficult to use. In those cases, a way referred to as [Image Masking][1] carrier is added into play. Clipping mask, Photoshop mask, photo protecting, channel protecting, alpha protecting, layer protecting and transparency protecting are a number of the versions or specialties of this photo masking carrier.