Ttykuu

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

let jsonData = 
 "path" : " newyear collage/",
 "info" : 
 "author" : "",
 "keywords" : "",
 "file" : "newyear collage",
 "date" : "sRGB",
 "title" : "",
 "description" : "Normal",
 "generator" : "Export Kit v1.2.8"
 ,
 "name" : "newyear collage",
 "layers" : [
 
 "x" : 0,
 "height" : 612,
 "layers" : [
 
 "x" : 0,
 "color" : "0xFFFFFF",
 "height" : 612,
 "y" : 0,
 "width" : 612,
 "shapeType" : "rectangle",
 "type" : "shape",
 "name" : "bg_rectangle"
 ,
 
 "x" : 160,
 "height" : 296,
 "layers" : [
 
 "x" : 0,
 "height" : 296,
 "src" : "ax0HVTs.png",
 "y" : 0,
 "width" : 429,
 "type" : "image",
 "name" : "mask_image_1"
 ,
 
 "radius" : "26 / 27",
 "color" : "0xACACAC",
 "x" : 188,
 "y" : 122,
 "height" : 53,
 "width" : 53,
 "shapeType" : "ellipse",
 "type" : "shape",
 "name" : "useradd_ellipse1"
 
 ],
 "y" : 291,
 "width" : 429,
 "type" : "group",
 "name" : "user_image_1"
 ,
 
 "x" : 25,
 "height" : 324,
 "layers" : [
 
 "x" : 0,
 "height" : 324,
 "src" : "hEM2kEP.png",
 "y" : 0,
 "width" : 471,
 "type" : "image",
 "name" : "mask_image_2"
 ,
 
 "radius" : "26 / 27",
 "color" : "0xACACAC",
 "x" : 209,
 "y" : 136,
 "height" : 53,
 "width" : 53,
 "shapeType" : "ellipse",
 "type" : "shape",
 "name" : "useradd_ellipse_2"
 
 ],
 "y" : 22,
 "width" : 471,
 "type" : "group",
 "name" : "user_image_2"
 
 ],
 "y" : 0,
 "width" : 612,
 "type" : "group",
 "name" : "newyearcollage08"
 
 ]
;

$(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 >= bbox.left && absX <= bbox.left + bbox.width &&
 absY >= bbox.top && absY <= 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(() => 
 $('#fileup').click();
 , 20);
 
 )
);
	
	
 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) 
 $(".container").css('width', width + "px").css('height', height + "px").addClass('temp');
 if(name.indexOf('mask_') !== -1)
 var imageUrl1 = imageUrl;
 else
 var imageUrl1 = '';
 				
 var mask = $(".container").mask( 		
				 imageUrl: imageUrl1,					
 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 = "";
					
					// Below code to Remove image

 $("<span class="pip">" + 
					"<br/><span id="myBtn" class="edit">Edit </span>" +
 "<br/><span class="remove">Remove </span>" +
 "</span>").insertAfter("#fileup");

 $(".remove").click(function() 
 $(this).parent(".pip").remove();
 );

 // Remove image	code ended here....	
													
 ;
 counter++;
				// get the text
				
 
drawText(data);
 

json(jsonData);
); // end of document ready


// extempl code - get the text

const fonts = []; // caching duplicate fonts

function drawText(layer) 
// extempl code end	

// 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 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] > 0
 );

 JQmasks.forEach(function(el) 
 var id = item.length > 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.onDragStart = function(evt) 
 if (evt.target.getContext) 
 var pixel = evt.target.getContext('2d').getImageData(evt.offsetX, evt.offsetY, 1, 1).data;

 $(canvas).attr("active", "true");
 container.selected(evt);
 prevX = evt.clientX;
 prevY = evt.clientY;
 var img = new Image();
 evt.originalEvent.dataTransfer.setDragImage(img, 10, 10);
 evt.originalEvent.dataTransfer.setData('text/plain', 'anything');

 
 ;

 container.getImagePosition = function() 
 return 
 x: settings.x,
 y: settings.y,
 scale: settings.scale
 ;
 ;

 container.onDragOver = function(evt) 

 if (evt.target.getContext) 
 var pixel = evt.target.getContext('2d').getImageData(evt.offsetX, evt.offsetY, 1, 1).data;
 if (pixel[3] === 255) 
 if (draggable && $(canvas).attr("active") === "true") 
 var x = settings.x + evt.clientX - prevX;
 var y = settings.y + evt.clientY - prevY;
 if (x == settings.x && y == settings.y)
 return; // position has not changed
 settings.x += evt.clientX - prevX;
 settings.y += evt.clientY - prevY;
 prevX = evt.clientX;
 prevY = evt.clientY;
 clearTimeout(timeout);
 timeout = setTimeout(function() 
 container.updateStyle();
 renderInnerImage();
 , 20);
 
 else 
 evt.stopPropagation();
 return false;
 
 
 ;

 container.updateStyle = function() 
 return new Promise((resolve, reject) => 
 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
 );
 resolve();
 ;
 );
 ;

 function renderInnerImage() 
 img = new Image();
 img.setAttribute('crossOrigin', 'anonymous');
 img.src = settings.imageUrl;
 img.onload = function() 
 settings.x = settings.x == 0 && initImage ? (canvas.width - (img.width * settings.scale)) / 2 : settings.x;
 settings.y = settings.y == 0 && 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;
 ;
 

 // 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().then(renderInnerImage);
 ;

 // change the masked Image
 container.loadMaskImage = function(imageUrl, from) 
 canvas = document.createElement("canvas");
 context = canvas.getContext('2d');
 canvas.setAttribute("draggable", "true");
 canvas.setAttribute("id", settings.id);
 settings.maskImageUrl = imageUrl;
 div = $("<div/>", 
 "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));

.temp 

.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

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

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

.edit:hover 
 background: white;
 color: black;

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

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

<div class="container">

</div>