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 id="container"class="container"></div>

CSS

.container {
	background: silver;
	position: relative;
}

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

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

JavaScript

var target;

let jsonData = {
    "layers": [{
        "x": 0,
        "height": 612,
        "layers": [{
                "x": 160,
                "layers": [{
                    "x": 0,
                    "src": "ax0HVTs.png",
                    "y": 0,
                    "height": 296,
                    "width": 429,
                    "name": "L2b-1"
                }],
                "y": 291,
                "name": "user_image_1"
            },
            {
                "x": 25,
                "layers": [{
                    "x": 0,
                    "src": "hEM2kEP.png",
                    "height": 324,
                    "width": 471,
                    "y": 0,
                    "name": "L2C-1"
                }],
                "y": 22,
                "name": "L2"
            }
        ],
        "y": 0,
        "width": 612,
        "name": "L1"
    }]
};

const containerElement = $('#container');
const fileUp = $('#fileup');

$(function() {

    // below code will upload image onclick mask 

    containerElement.click(function(e) {

        var res = e.target;
        target = res.id;
        console.log(target);
        if (e.target.getContext) {
            // click only inside Non Transparent part
            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 images from json file

    function getAllSrc(layers) {
        let arr = [];
        layers.forEach(layer => {
            if (layer.src) {
                arr.push({
                    src: layer.src,
                    x: layer.x,
                    y: layer.y,
                    height: layer.height,
                    width: layer.width,
                    name: layer.name
                });
            } else if...