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

@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 : https://codepen.io/kidsdial2/pen/OdyemQ — , Jan 30 '19 at 12:05
My solution is with **dynamically** uploaded images which will be masked after upload. Each user can see it on my answer below. — Bharata, Jan 30 '19 at 12:11
@Bharata 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.... — , Jan 30 '19 at 12:14
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. — Bharata, Jan 30 '19 at 12:30
@Bharata I am not a expert like you , Thanks for your suggestion..... — , Jan 30 '19 at 12:32

Bharata · Answer 1 · 2019-01-30T11:31:18.580

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>

edited Jan 30 '19 at 11:31

answered Jan 30 '19 at 07:53

Bharata

13,509
6
36
50

@vickeycolors, but what is wrong? You have correct example and you can after upload replace the image in SVG. – Bharata Jan 30 '19 at 09:13
I tried your code in [website](http://139.59.24.243/ecom1/site/15/www.greetingsisland.com/design/invitations/floral-unicorn-photo/201-17095.html) , but its not reflecting, can you please check once..... – Jan 30 '19 at 09:17
in website, i am using this code to display mask image : `var cardConfig = { "pages": [{ "name": "/images/invitations/birthday/ice1.png", }], }` – Jan 30 '19 at 09:23
@vickeycolors, what did you try? Can you show me a screenshot. You can upload the image **[here](https://stackoverflow.com/questions/ask)** and send me link to this image here (in comment). Or upload your code on https://codepen.io/pen/ – Bharata Jan 30 '19 at 09:25
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", }], }` – Jan 30 '19 at 09:31
Actualy i allowed user to upload image dynamically and than i filled the uploaded image inside the mask image using https://codepen.io/kidsdial2/pen/OdyemQ and in in [website](http://139.59.24.243/ecom1/site/four/www.greetingsisland.com/design/invitations/floral-unicorn-photo/201-17095.html) , but i cant able to move the uploaded image inside mask image clearly in [website](http://139.59.24.243/ecom1/site/six/www.greetingsisland.com/design/invitations/floral-unicorn-photo/201-17095.html) , but i can move uploaded image in mask image clearly in codepen : https://codepen.io/AlenToma/pen/PVNvdq – Jan 30 '19 at 09:35
@vickeycolors, it is like **[XY question](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem)**. 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. – Bharata Jan 30 '19 at 10:13
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187559/discussion-between-vickey-colors-and-bharata). – Jan 30 '19 at 10:13

score 0 · Answer 2 · answered Jan 24 '19 at 11:43

0

Your masked-element have

z-index:10

so you need to change below in you css

.slot_photo.overlay_design{
    z-index:11
}

answered Jan 24 '19 at 11:43

Prashant Patil

2,463
1
15
33

No, That is not i required, after changing to `z-index:11` now it covering entire portion, but it should cover only mask image...... – Jan 24 '19 at 12:24
you can see example as in this fiddle : http://jsfiddle.net/aLcb4sb5/ or here : https://www.sitepoint.com/masking-in-the-browser-with-css-and-svg/ – Jan 24 '19 at 12:25
How about z-index:9? – Jan 25 '19 at 05:34
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..... – Jan 25 '19 at 07:13
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. – Jan 29 '19 at 15:45
@Chipster thanks for your suggestion , sorry... we can't change the mask image as we are using same images for website & mobile app..... – Jan 30 '19 at 05:38
@vickeycolors shoot. Well, I think this is over my head then. Sorry :( – Jan 30 '19 at 07:21
@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 ? – Jan 30 '19 at 07:29
@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 :( – Jan 30 '19 at 19:47
@prashant do you have any idea on this ? – Feb 01 '19 at 05:13
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. :) – Prashant Patil Feb 01 '19 at 07:06

score 0 · Accepted Answer · answered Feb 06 '19 at 08:33

0

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

answered Feb 06 '19 at 08:33

Chris

165
3
12

score 0 · Answer 4 · answered Jan 28 '22 at 04:29

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.

Overlapping happening instead of uploading image on mask

4 Answers4

Linked