Overlapping happening instead of uploading image on mask

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

Costin

@Bharata I am really sorry to say that you answer really did't helped the question.... my issue is when i upload image dynamically , it is overlapping on mask image, but you gave solution with static images..... but i already have solution with static images here : codepen.io/kidsdial2/pen/OdyemQ – Costin

My solution is with dynamically uploaded images which will be masked after upload. Each user can see it on my answer below. – Inquire

@Inquire again you misunderstood, I posted in question , i am using this code : var cardConfig = { "pages": [{ "name": "/images/invitations/birthday/ice1.png", }], } to display mask image , i need solution related to that code , but you gave some other code that will really not help me in any way..... I hope you understand & thanks for your valuable time.... – Costin

I have nothing misunderstood! After your question was answered from me you have added to your question "Mask image code" part, but at first it is not allowed to change the question after it was answered. And the second is: you do not understand the programming and in this case you are here on wrong place. You have to go to the sites on which you can pay with real money for some users and they will program your site. – Inquire

@Inquire I am not a expert like you , Thanks for your suggestion..... – Costin

Answer 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

Johnson

Answer 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.sstatic.net/L5daY.png" width="324" height="395"></image>
    </mask>

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

Inquire

@vickeycolors, but what is wrong? You have correct example and you can after upload replace the image in SVG. – Inquire

I tried your code in website , but its not reflecting, can you please check once..... – Costin

in website, i am using this code to display mask image : var cardConfig = { "pages": [{ "name": "/images/invitations/birthday/ice1.png", }], } – Costin

@vickeycolors, what did you try? Can you show me a screenshot. You can upload the image here and send me link to this image here (in comment). Or upload your code on codepen.io/pen – Inquire

from your code , i can put static images path in code &get the result , but in my case i am allowing user to upload the image on the original mask image.... i am using this code to display mask image var cardConfig = { "pages": [{ "name": "/images/invitations/birthday/ice1.png", }], } – Costin

Actualy i allowed user to upload image dynamically and than i filled the uploaded image inside the mask image using codepen.io/kidsdial2/pen/OdyemQ and in in website , but i cant able to move the uploaded image inside mask image clearly in website , but i can move uploaded image in mask image clearly in codepen : codepen.io/AlenToma/pen/PVNvdq – Costin

@vickeycolors, it is like XY question. If you want the full support for uploading then you have do write a new question. This question was answered. Please mark it as accepted. – Inquire

Let us continue this discussion in chat. – Costin

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
}

Drumbeat

No, That is not i required, after changing to z-index:11 now it covering entire portion, but it should cover only mask image...... – Costin

you can see example as in this fiddle : jsfiddle.net/aLcb4sb5 or here : sitepoint.com/masking-in-the-browser-with-css-and-svg – Costin

How about z-index:9? – Kola

sorry for delay, i didt got any notifications for your comment as you did't tagged name as @Chipster , those z-indexes will hide the mask image and display uploaded image, but i need to fill the uploaded image inside mask image..... – Costin

Sorry. Not sure if I could be much help, but I will say that you could try making the "on" part of your mask transparent, the "off" part black, or something and put their pic behind it. – Kola

@Chipster thanks for your suggestion , sorry... we can't change the mask image as we are using same images for website & mobile app..... – Costin

@vickeycolors shoot. Well, I think this is over my head then. Sorry :( – Kola

@Chipster what i need now is exactly reverse of what i done now, instead of doing with mask image, how i can do with code ? is it possible from normal frontend code or do i need clip or mask kind of things ? – Costin

@vickeycolors Like I said, it's over my head. I'm sure it can be done with code some how, I just have no clue what it is. Sorry :( – Kola

@prashant do you have any idea on this ? – Costin

Sorry @vickeycolors, Currently I dont have any Idea on this, But I definitely get back to you with solution in some time, In time if you get any thing on this please let me know. :) – Drumbeat

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.

Melliemelliferous