JSFiddle - React, Tailwind, and code Playground

by moshfeu

HTML

<style>
  .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;
  }


</style>


<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>


<script>
  var target;
  const imageUrl = "https://i.imgur.com/RzEm1WK.png";

  let jsonData = {
    "layers": [{
      "x": 0,
      "height": 612,
      "layers": [{
        "x": 160,
        "src": "ax0HVTs.png",
        "y": 291,
        "height": 296,
        "width": 429,
        "name": "mask_1"
      }, {
        "x": 25,
        "src": "iEA642D.jpg",
        "height": 324,
        "width": 471,
        "y": 22,
        "name": "masknot_2"
      }],
      "y": 0,
      "width": 612
    }]
  };

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

  $(function() {

    // Upload image onclick mask image 

    containerElement.click(function(e) {
      var res = e.target;
      target = res.id;
      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);
        }
      }
    });

    // Fetch mask images from json file - IGNORE this code 

    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 (layer.layers) {
          let...