Edit and delete uploaded images code inside script tagCarousel with sections and animated background imagesToggling icon images using jQueryJQuery code to toggle an edit formInterupt redirect to catch potential newsletter signupUploading multiple imagesBasic and simple view, add, edit and delete functionalityOptimization of recursive jQuery images swap functionDetail view, edit field: create input, buttonsClick handlers for edit and save buttonsHandling multiple uploaded images in JavaScript

Is expanding the research of a group into machine learning as a PhD student risky?

What is the oldest known work of fiction?

Using parameter substitution on a Bash array

Is the destination of a commercial flight important for the pilot?

Is this Spell Mimic feat balanced?

How will losing mobility of one hand affect my career as a programmer?

Hostile work environment after whistle-blowing on coworker and our boss. What do I do?

Is there any easy technique written in Bhagavad GITA to control lust?

At which point does a character regain all their Hit Dice?

Go Pregnant or Go Home

Is it okay / does it make sense for another player to join a running game of Munchkin?

Can somebody explain Brexit in a few child-proof sentences?

What are the ramifications of creating a homebrew world without an Astral Plane?

Why "be dealt cards" rather than "be dealing cards"?

Is there any reason not to eat food that's been dropped on the surface of the moon?

Hide Select Output from T-SQL

How was Earth single-handedly capable of creating 3 of the 4 gods of chaos?

Will it be accepted, if there is no ''Main Character" stereotype?

when is out of tune ok?

How to be diplomatic in refusing to write code that breaches the privacy of our users

Why does John Bercow say “unlock” after reading out the results of a vote?

What is the opposite of 'gravitas'?

Where in the Bible does the greeting ("Dominus Vobiscum") used at Mass come from?

How do I keep an essay about "feeling flat" from feeling flat?



Edit and delete uploaded images code inside script tag


Carousel with sections and animated background imagesToggling icon images using jQueryJQuery code to toggle an edit formInterupt redirect to catch potential newsletter signupUploading multiple imagesBasic and simple view, add, edit and delete functionalityOptimization of recursive jQuery images swap functionDetail view, edit field: create input, buttonsClick handlers for edit and save buttonsHandling multiple uploaded images in JavaScript













0












$begingroup$


I am Displaying mask images & allowing user to upload the custome image inside mask image, now i want to give an option for user to Edit & Delete the Uploaded image....



Video link : https://drive.google.com/file/d/158RCO_NaXUg9KWOKSX6_SQ5r0CYF40oK/view



For that I need to create Pop up box once user click on Edit button, Also in the pop up i need to give an option to zoom, rotate the uploaded images....



for these i need to add lot of html code in future inside jquery, so is this is good way ? because i dont want to right more html code inside jquery as it looks bad when reading....



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


Or Is it possible to write Html code outside script ?



Here is full code in pen : https://codepen.io/kidsdial/pen/drLwVO



Here is jsfiddle : https://jsfiddle.net/kidsdial1/86Leb4gw/3/






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>












share|improve this question











$endgroup$







  • 1




    $begingroup$
    What does this code do? Please tell us. See How to Ask.
    $endgroup$
    – 200_success
    13 hours ago










  • $begingroup$
    What is your requirement? and what you are trying to do from business/exercise point of view in this code? Your title is vague and therefore your question becomes harder to answer.
    $endgroup$
    – 422_unprocessable_entity
    12 hours ago















0












$begingroup$


I am Displaying mask images & allowing user to upload the custome image inside mask image, now i want to give an option for user to Edit & Delete the Uploaded image....



Video link : https://drive.google.com/file/d/158RCO_NaXUg9KWOKSX6_SQ5r0CYF40oK/view



For that I need to create Pop up box once user click on Edit button, Also in the pop up i need to give an option to zoom, rotate the uploaded images....



for these i need to add lot of html code in future inside jquery, so is this is good way ? because i dont want to right more html code inside jquery as it looks bad when reading....



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


Or Is it possible to write Html code outside script ?



Here is full code in pen : https://codepen.io/kidsdial/pen/drLwVO



Here is jsfiddle : https://jsfiddle.net/kidsdial1/86Leb4gw/3/






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>












share|improve this question











$endgroup$







  • 1




    $begingroup$
    What does this code do? Please tell us. See How to Ask.
    $endgroup$
    – 200_success
    13 hours ago










  • $begingroup$
    What is your requirement? and what you are trying to do from business/exercise point of view in this code? Your title is vague and therefore your question becomes harder to answer.
    $endgroup$
    – 422_unprocessable_entity
    12 hours ago













0












0








0





$begingroup$


I am Displaying mask images & allowing user to upload the custome image inside mask image, now i want to give an option for user to Edit & Delete the Uploaded image....



Video link : https://drive.google.com/file/d/158RCO_NaXUg9KWOKSX6_SQ5r0CYF40oK/view



For that I need to create Pop up box once user click on Edit button, Also in the pop up i need to give an option to zoom, rotate the uploaded images....



for these i need to add lot of html code in future inside jquery, so is this is good way ? because i dont want to right more html code inside jquery as it looks bad when reading....



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


Or Is it possible to write Html code outside script ?



Here is full code in pen : https://codepen.io/kidsdial/pen/drLwVO



Here is jsfiddle : https://jsfiddle.net/kidsdial1/86Leb4gw/3/






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>












share|improve this question











$endgroup$




I am Displaying mask images & allowing user to upload the custome image inside mask image, now i want to give an option for user to Edit & Delete the Uploaded image....



Video link : https://drive.google.com/file/d/158RCO_NaXUg9KWOKSX6_SQ5r0CYF40oK/view



For that I need to create Pop up box once user click on Edit button, Also in the pop up i need to give an option to zoom, rotate the uploaded images....



for these i need to add lot of html code in future inside jquery, so is this is good way ? because i dont want to right more html code inside jquery as it looks bad when reading....



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


Or Is it possible to write Html code outside script ?



Here is full code in pen : https://codepen.io/kidsdial/pen/drLwVO



Here is jsfiddle : https://jsfiddle.net/kidsdial1/86Leb4gw/3/






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>








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>





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>






javascript jquery html






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited 12 mins ago







vickey colors

















asked 16 hours ago









vickey colorsvickey colors

1236




1236







  • 1




    $begingroup$
    What does this code do? Please tell us. See How to Ask.
    $endgroup$
    – 200_success
    13 hours ago










  • $begingroup$
    What is your requirement? and what you are trying to do from business/exercise point of view in this code? Your title is vague and therefore your question becomes harder to answer.
    $endgroup$
    – 422_unprocessable_entity
    12 hours ago












  • 1




    $begingroup$
    What does this code do? Please tell us. See How to Ask.
    $endgroup$
    – 200_success
    13 hours ago










  • $begingroup$
    What is your requirement? and what you are trying to do from business/exercise point of view in this code? Your title is vague and therefore your question becomes harder to answer.
    $endgroup$
    – 422_unprocessable_entity
    12 hours ago







1




1




$begingroup$
What does this code do? Please tell us. See How to Ask.
$endgroup$
– 200_success
13 hours ago




$begingroup$
What does this code do? Please tell us. See How to Ask.
$endgroup$
– 200_success
13 hours ago












$begingroup$
What is your requirement? and what you are trying to do from business/exercise point of view in this code? Your title is vague and therefore your question becomes harder to answer.
$endgroup$
– 422_unprocessable_entity
12 hours ago




$begingroup$
What is your requirement? and what you are trying to do from business/exercise point of view in this code? Your title is vague and therefore your question becomes harder to answer.
$endgroup$
– 422_unprocessable_entity
12 hours ago










1 Answer
1






active

oldest

votes


















0












$begingroup$

You can write your Templates as plain HTML (invisible) and then clone, adapt and insert them as you want.



HTML5 has even an extra template tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template






share|improve this answer









$endgroup$












    Your Answer





    StackExchange.ifUsing("editor", function ()
    return StackExchange.using("mathjaxEditing", function ()
    StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
    StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
    );
    );
    , "mathjax-editing");

    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "196"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: false,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: null,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













    draft saved

    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f216247%2fedit-and-delete-uploaded-images-code-inside-script-tag%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0












    $begingroup$

    You can write your Templates as plain HTML (invisible) and then clone, adapt and insert them as you want.



    HTML5 has even an extra template tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template






    share|improve this answer









    $endgroup$

















      0












      $begingroup$

      You can write your Templates as plain HTML (invisible) and then clone, adapt and insert them as you want.



      HTML5 has even an extra template tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template






      share|improve this answer









      $endgroup$















        0












        0








        0





        $begingroup$

        You can write your Templates as plain HTML (invisible) and then clone, adapt and insert them as you want.



        HTML5 has even an extra template tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template






        share|improve this answer









        $endgroup$



        You can write your Templates as plain HTML (invisible) and then clone, adapt and insert them as you want.



        HTML5 has even an extra template tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered 15 hours ago









        x539x539

        1461




        1461



























            draft saved

            draft discarded
















































            Thanks for contributing an answer to Code Review Stack Exchange!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            Use MathJax to format equations. MathJax reference.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f216247%2fedit-and-delete-uploaded-images-code-inside-script-tag%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            名間水力發電廠 目录 沿革 設施 鄰近設施 註釋 外部連結 导航菜单23°50′10″N 120°42′41″E / 23.83611°N 120.71139°E / 23.83611; 120.7113923°50′10″N 120°42′41″E / 23.83611°N 120.71139°E / 23.83611; 120.71139計畫概要原始内容臺灣第一座BOT 模式開發的水力發電廠-名間水力電廠名間水力發電廠 水利署首件BOT案原始内容《小檔案》名間電廠 首座BOT水力發電廠原始内容名間電廠BOT - 經濟部水利署中區水資源局

            Prove that NP is closed under karp reduction?Space(n) not closed under Karp reductions - what about NTime(n)?Class P is closed under rotation?Prove or disprove that $NL$ is closed under polynomial many-one reductions$mathbfNC_2$ is closed under log-space reductionOn Karp reductionwhen can I know if a class (complexity) is closed under reduction (cook/karp)Check if class $PSPACE$ is closed under polyonomially space reductionIs NPSPACE also closed under polynomial-time reduction and under log-space reduction?Prove PSPACE is closed under complement?Prove PSPACE is closed under union?

            Is my guitar’s action too high? Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)Strings too stiff on a recently purchased acoustic guitar | Cort AD880CEIs the action of my guitar really high?Μy little finger is too weak to play guitarWith guitar, how long should I give my fingers to strengthen / callous?When playing a fret the guitar sounds mutedPlaying (Barre) chords up the guitar neckI think my guitar strings are wound too tight and I can't play barre chordsF barre chord on an SG guitarHow to find to the right strings of a barre chord by feel?High action on higher fret on my steel acoustic guitar