title: Images upload with inspect element
body: <p>Once user click on Mask images, we are displaying file upload dialog box....</p>
  
  <p><a href="https://codepen.io/kidsdial/pen/XQmRvP" rel="nofollow noreferrer">https://codepen.io/kidsdial/pen/XQmRvP</a></p>
  
  <p>We are using below code for click :</p>
  
  <pre><code>$('.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(() =&gt; {
                      $('#fileup').click();
                  }, 20);
              }
          }
      });
  </code></pre>
  
  <p><strong>Issue</strong> :</p>
  
  <p>Due to some reasons instead of above code, we used below code for click :</p>
  
  <pre><code>$('.container').click(function(e) {
          // filtering out non-canvas clicks
          if (e.target.tagName !== 'CANVAS') return;
  
          // getting absolute points relative to container
          const absX = e.offsetX + e.target.parentNode.offsetLeft + e.currentTarget.offsetLeft;
          const absY = e.offsetY + e.target.parentNode.offsetTop + e.currentTarget.offsetTop;
  
          const $canvasList = $(this).find('canvas');
          // moving all canvas parents on the same z-index
          $canvasList.parent().css({
              zIndex: 0
          });
  
          $canvasList.filter(function() { // filtering only applicable canvases
              const bbox = this.getBoundingClientRect()
              return (
                  absX &gt;= bbox.left &amp;&amp; absX &lt;= bbox.left + bbox.width &amp;&amp;
                  absY &gt;= bbox.top &amp;&amp; absY &lt;= bbox.top + bbox.height)
          }).each(function() { // checking white in a click position
              const x = absX - this.parentNode.offsetLeft - e.currentTarget.offsetLeft;
              const y = absY - this.parentNode.offsetTop - e.currentTarget.offsetTop;
              const pixel = this.getContext('2d').getImageData(x, y, 1, 1).data;
              if (pixel[3] === 255) {
                  $(this).parent().css({
                      zIndex: 2
                  })
                  target = this.id;
                  console.log(target);
                  setTimeout(() =&gt; {
                      $('#fileup').click();
                  }, 20);
              }
          })
      });
  </code></pre>
  
  <p>But now when user click on <strong>bottom part of 2nd image</strong> , than it's not allowing to upload images as in <a href="https://codepen.io/kidsdial/pen/LvpLYo" rel="nofollow noreferrer">https://codepen.io/kidsdial/pen/LvpLYo</a>....</p>
  
  <p><strong>Cases</strong> : </p>
  
  <p>1.It ll not work in codepen if you click on bottom part of 2nd image....</p>
  
  <p>2.If you copy the same code &amp; try in your local pc , then it will work.... but if you open inspect element, then it don't work.... [ may be due to height will decrease ]</p>
  
  <p><a href="https://i.stack.imgur.com/B9Xc5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B9Xc5.jpg" alt="enter image description here"></a></p>
  
  <p>3.If you "Run code snippet &amp; click on bottom part of 2nd image, then it don't work, but if you open in "<strong>Full Page Mode</strong>", then it will work, if you open inspect element there, then it dont work....</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var target;
  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
  
      $('.container').click(function(e) {
          // filtering out non-canvas clicks
          if (e.target.tagName !== 'CANVAS') return;
  
          // getting absolute points relative to container
          const absX = e.offsetX + e.target.parentNode.offsetLeft + e.currentTarget.offsetLeft;
          const absY = e.offsetY + e.target.parentNode.offsetTop + e.currentTarget.offsetTop;
  
          const $canvasList = $(this).find('canvas');
          // moving all canvas parents on the same z-index
          $canvasList.parent().css({
              zIndex: 0
          });
  
          $canvasList.filter(function() { // filtering only applicable canvases
              const bbox = this.getBoundingClientRect()
              return (
                  absX &gt;= bbox.left &amp;&amp; absX &lt;= bbox.left + bbox.width &amp;&amp;
                  absY &gt;= bbox.top &amp;&amp; absY &lt;= bbox.top + bbox.height)
          }).each(function() { // checking white in a click position
              const x = absX - this.parentNode.offsetLeft - e.currentTarget.offsetLeft;
              const y = absY - this.parentNode.offsetTop - e.currentTarget.offsetTop;
              const pixel = this.getContext('2d').getImageData(x, y, 1, 1).data;
              if (pixel[3] === 255) {
                  $(this).parent().css({
                      zIndex: 2
                  })
                  target = this.id;
                  console.log(target);
                  setTimeout(() =&gt; {
                      $('#fileup').click();
                  }, 20);
              }
          })
      });
      
  
      //Fetch images from json
  
      function getAllSrc(layers) {
          let arr = [];
          layers.forEach(layer =&gt; {
              if (layer.src) {
                  arr.push({
                      src: layer.src,
                      x: layer.x,
                      y: layer.y
                  });
              } else if (layer.layers) {
                  let newArr = getAllSrc(layer.layers);
                  if (newArr.length &gt; 0) {
                      newArr.forEach(({
                          src,
                          x,
                          y
                      }) =&gt; {
                          arr.push({
                              src,
                              x: (layer.x + x),
                              y: (layer.y + y)
                          });
                      });
                  }
              }
          });
          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
              } of arr) {
  
              $(".container").css('width', width + "px").css('height', height + "px").addClass('temp');
  
              var mask = $(".container").mask({
                  maskImageUrl: 'https://i.imgur.com/' + src,
                  onMaskImageCreate: function(img) {
  
                      img.css({
                          "position": "absolute",
                          "left": x + "px",
                          "top": y + "px"
                      });
  
                  },
                  id: counter
              });
              table.push(mask);
              fileup.onchange = function() {
  
                  let mask2 = table[target];
                  mask2.loadImage(URL.createObjectURL(fileup.files[0]));
                  document.getElementById('fileup').value = "";
              };
              counter++;
          }
  
      }
  
      json(jsonData);
  }); // end of document ready
  
  // jq plugin 
  
  (function($) {
      var JQmasks = [];
      $.fn.mask = function(options) {
          // This is the easiest way to have default options.
          var settings = $.extend({
              // These are the defaults.
              maskImageUrl: undefined,
              imageUrl: undefined,
              scale: 1,
              id: new Date().getUTCMilliseconds().toString(),
              x: 0, // image start position
              y: 0, // image start position
              onMaskImageCreate: function(div) {},
          }, options);
  
  
          var container = $(this);
  
          let prevX = 0,
              prevY = 0,
              draggable = false,
              img,
              canvas,
              context,
              image,
              timeout,
              initImage = false,
              startX = settings.x,
              startY = settings.y,
              div;
  
          container.mousePosition = function(event) {
              return {
                  x: event.pageX || event.offsetX,
                  y: event.pageY || event.offsetY
              };
          }
  
          container.selected = function(ev) {
              var pos = container.mousePosition(ev);
              var item = $(".masked-img canvas").filter(function() {
                  var offset = $(this).offset()
                  var x = pos.x - offset.left;
                  var y = pos.y - offset.top;
                  var d = this.getContext('2d').getImageData(x, y, 1, 1).data;
                  return d[0] &gt; 0
              });
  
              JQmasks.forEach(function(el) {
                  var id = item.length &gt; 0 ? $(item).attr("id") : "";
                  if (el.id == id)
                      el.item.enable();
                  else el.item.disable();
              });
          };
  
          container.enable = function() {
              draggable = true;
              $(canvas).attr("active", "true");
              div.css({
                  "z-index": 2
              });
          }
  
          container.disable = function() {
              draggable = false;
              $(canvas).attr("active", "false");
              div.css({
                  "z-index": 1
              });
          }
  
          container.updateStyle = function() {
              clearTimeout(timeout);
              timeout = setTimeout(function() {
                  //context.clearRect(0, 0, canvas.width, canvas.height);
                  context.beginPath();
                  context.globalCompositeOperation = "source-over";
                  image = new Image();
                  image.setAttribute('crossOrigin', 'anonymous');
                  image.src = settings.maskImageUrl;
                  image.onload = function() {
                      canvas.width = image.width;
                      canvas.height = image.height;
                      context.drawImage(image, 0, 0, image.width, image.height);
                      div.css({
                          "width": image.width,
                          "height": image.height
                      });
                  };
  
                  img = new Image();
                  img.src = settings.imageUrl;
                  img.setAttribute('crossOrigin', 'anonymous');
                  img.onload = function() {
                      settings.x = settings.x == 0 &amp;&amp; initImage ? (canvas.width - (img.width * settings.scale)) / 2 : settings.x;
                      settings.y = settings.y == 0 &amp;&amp; initImage ? (canvas.height - (img.height * settings.scale)) / 2 : settings.y;
                      context.globalCompositeOperation = 'source-atop';
                      context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale);
                      initImage = false;
                  };
              }, 20);
          };
  
          // change the draggable image
          container.loadImage = function(imageUrl) {
              console.log("load");
              if (img)
                  img.remove();
              // reset the code.
              settings.y = startY;
              settings.x = startX;
              prevX = prevY = 0;
              settings.imageUrl = imageUrl;
              initImage = true;
              container.updateStyle();
          };
  
          // change the masked Image
          container.loadMaskImage = function(imageUrl, from) {
              if (div)
                  div.remove();
              canvas = document.createElement("canvas");
              context = canvas.getContext('2d');
              canvas.setAttribute("draggable", "true");
              canvas.setAttribute("id", settings.id);
              settings.maskImageUrl = imageUrl;
              div = $("&lt;div/&gt;", {
                  "class": "masked-img"
              }).append(canvas);
  
              // div.find("canvas").on('touchstart mousedown', function(event)
              div.find("canvas").on('dragstart', function(event) {
  
                  if (event.handled === false) return;
                  event.handled = true;
                  container.onDragStart(event);
              });
  
              div.find("canvas").on('touchend mouseup', function(event) {
                  if (event.handled === false) return;
                  event.handled = true;
                  container.selected(event);
              });
  
              div.find("canvas").bind("dragover", container.onDragOver);
              container.append(div);
              if (settings.onMaskImageCreate)
                  settings.onMaskImageCreate(div);
              container.loadImage(settings.imageUrl);
          };
          container.loadMaskImage(settings.maskImageUrl);
          JQmasks.push({
              item: container,
              id: settings.id
          })
          return container;
      };
  }(jQuery));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.temp {
  background: black;
  }
  
  .container {
   background: gold;
    position: relative;
   
  }
  
  .masked-img {
   overflow: hidden;
   
   position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
  
  &lt;input id="fileup" name="fileup" type="file" style="display:none" &gt;
  
  &lt;div class="container"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>