JSFiddle - React, Tailwind, and code Playground

by kidsdial1

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="fileup" name="fileup" type="file" style="display:none" >

<div class="container">
</div>

CSS

.container 
{
 background: gold;
 position: relative;
 width:612px;
 height:612px;
}

.container img {
   position:absolute;
   top:0;
   bottom:250px;
   left:0;
   right:0;
   margin:auto;
   z-index:999;
}

.masked-img {
	overflow: hidden;	
	position: relative;
}

.pip {
  display: inline-block;
  margin: 10px 10px 0 0;
}
.remove {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}
.remove:hover {
  background: white;
  color: black;
}

JavaScript

var target;
var imageUrl = "https://i.imgur.com/RzEm1WK.png";

// Json - it includes mask image 
let jsonData = {  
  "layers" : [
    {
      "x" : 0,
      "height" : 612,	  
      "layers" : [
        {
          "x" : 0,          
          "y" : 0,         
          "name" : "L2a"
        },
        {
          "x" : 160,         
          "layers" : [
            {
              "x" : 0,            
              "src" : "ax0HVTs.png",
              "y" : 0,              
              "name" : "L2b-1"
            },
            {
              
              "x" : 0,
              "y" : 0,             
              "name" : "L2b-2"
            }
          ],
          "y" : 291,         
          "name" : "user_image_1"
        },
        {
          "x" : 25,         
          "layers" : [
            {
              "x" : 0,             
              "src" : "hEM2kEP.png",
              "y" : 0,             
              "name" : "L2C-1"
            },
            {            
              "x" : 0,
              "y" : 0,            
              "name" : "L2C-2"
            }
          ],
          "y" :22,         
          "name" : "L2"
        }
      ],
      "y" : 0, 
      "width" : 612,	  
      "name" : "L1"
    }
  ]
};

$(document).ready(function() {

    // upload image onclick mask image

    $('.container').click(function(e) {

        var res = e.target;
        target = res.id;
        console.log(target);
        if (e.target.getContext) {
            // click only inside Non Transparent part
           // $('.container').css('pointer-events','none');
            var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
            
            if (pixel[3] === 255) {
                setTimeout(() => {                
                    $('#fileup').click();                    		
                }, 20);
            }
        }
    });

    // Below code will fetch mask image from json file

   ...