Styjun

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

let jsonData = 
 "layers" : [
 
 "x" : 0,
 "height" : 788,
 "layers" : [
 
 "x" : 0,
 "height" : 788,
 "src" : "lRtZPoj.jpg",
 "y" : 0,
 "width" : 940,
 "type" : "image",
 "name" : "bg_image"
 
 ],
 "y" : 0,
 "width" : 940,
 "type" : "group",
 "name" : "fb_post_5"
 
 ]
;

$(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
 );
 else if (layer.layers) 
 let newArr = getAllSrc(layer.layers);
 if (newArr.length > 0) 
 newArr.forEach((
 src,
 x,
 y
 ) => 
 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(
 		imageUrl: imageUrl,
 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++;
				// get the text
				
 
drawText(data);
 

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


// extempl code - get the text

const fonts = []; // caching duplicate fonts

function drawText(layer) 

 if (layer.type === 'image') return;

 if (!layer.type 
// 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;
 updateStyle();
 
 else 
 evt.stopPropagation();
 return false;
 
 
 ;

 function updateStyle() 
				 
 //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.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;
 updateStyle();
 ;

 // change the masked Image
 function loadMaskImage(imageUrl) 
 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);
 ;
 loadMaskImage(settings.maskImageUrl);
 JQmasks.push(
 item: container,
 id: settings.id
 )
 return container;
 ;
(jQuery));

.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

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

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

 let jsonData = 
 "layers" : [
 
 "x" : 0,
 "height" : 788,
 "layers" : [
 
 "x" : 0,
 "height" : 788,
 "src" : "lRtZPoj.jpg",
 "y" : 0,
 "width" : 940,
 "type" : "image",
 "name" : "bg_image"
 
 ],
 "y" : 0,
 "width" : 940,
 "type" : "group",
 "name" : "fb_post_5"
 
 ]
 ;

 $(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('bg_image') == -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 = "";
 ;
 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) 

 if (layer.type === 'image') return;

 if (!layer.type 
 // 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 ;
 

 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;
 updateStyle();
 
 else 
 evt.stopPropagation();
 return false;
 
 
 ;

 function updateStyle()
 
 //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.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;
 updateStyle();
 ;

 // change the masked Image
 function loadMaskImage(imageUrl) 
 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);
 ;
 loadMaskImage(settings.maskImageUrl);
 JQmasks.push(
 item: container,
 id: settings.id
 )
 return container;
 ;
 (jQuery));

.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

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