JSFiddle - React, Tailwind, and code Playground

by Munim Munna

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

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

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

.txtContainer {
  position: absolute;
  text-align: center;
  color: #FFF;
}

.txtContainer:hover {
  background: red;
  padding: 1px;
  border-style: dotted;
}

.pip {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

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

.remove:hover {
  background: white;
  color: black;
}

.edit {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
  position: relative;
  z-index: 3;
}

.edit:hover {
  background: white;
  color: black;
  position: relative;
  z-index: 3;
}

.white_content {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}

JavaScript

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

// Json file - it includes car image and its positions

let jsonData = {
  "layers": [{
    "x": 10,
    "height": 412,
    "layers": [{
      "x": 20,
      "layers": [{
          "x": 30,
          "src": "iEA642D.jpg",
          "y": 31,
          "name": "L2b-1"
        }

      ],
      "y": 21,
      "name": "user_image_1"
    }],
    "y": 11,
    "width": 412,
    "name": "L1"
  }]
};

$(document).ready(function() {

  // ignore below code - it  will upload image onclick car

  $('.container').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 car image 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,
          name: layer.name
        });
      } else if (layer.layers) {
        let newArr = getAllSrc(layer.layers);
        if (newArr.length > 0) {
          newArr.forEach(({
            src,
            x,
            y,
            name
          }) => {
            arr.push({
              src,
              x: (layer.x + x),
              y: (layer.y + y),
              name: (name)
            });
          });
        }
      }
    });
    return arr;
  }

  function json(data)

  {
    var width = 0;
    var height = 0;

    let arr = getAllSrc(data.layers);

    let layer1 = data.layers;
    width = layer1[0].width;
    height = layer1[0].height;
    let counter = 0;
    let table = [];

    for (let {
        src,
        x,
        y,
        name
      } of arr) {
     ...