Edit and delete uploaded images code inside script tag
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) {
if (layer.type === 'image') return;
if (!layer.type || layer.type === 'group') {
return layer.layers.forEach(drawText)
}
if (layer.type === 'text') {
const url = 'http://piccellsapp.com:1337/parse/files/PfAppId/' + layer.src;
if (!fonts.includes(url)) {
fonts.push(url);
$("style").prepend("@font-face {n" +
"tfont-family: "" + layer.font + "";n" +
"tsrc: url(" + url + ") format('truetype');n" +
"}");
}
$('.container').append(
'<div class="txtContainer" ' +
'style="' +
'text-align: ' + layer.justification + '; ' +
'font-family: ' + layer.font + '; ' +
'left: ' + layer.x + 'px; ' +
'top: ' + layer.y + 'px; ' +
'width:' + layer.width + 'px; ' +
'color: ' + layer.color.replace(/^0x/, '#') + '; ' +
'font-size: ' + layer.size + 'px; ' +
'height:' + layer.height + 'px;' +
'">' +
layer.text +
'</div>');
}
}
// 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 {
x: event.pageX || event.offsetX,
y: event.pageY || event.offsetY
};
}
container.selected = function(ev) {
var pos = container.mousePosition(ev);
var item = $(".masked-img canvas").filter(function() {
var offset = $(this).offset()
var x = pos.x - offset.left;
var y = pos.y - offset.top;
var d = this.getContext('2d').getImageData(x, y, 1, 1).data;
return d[0] > 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
asked 15 hours ago
vickey colorsvickey colors
1236
$endgroup$
add a comment |
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) {
if (layer.type === 'image') return;
if (!layer.type || layer.type === 'group') {
return layer.layers.forEach(drawText)
}
if (layer.type === 'text') {
const url = 'http://piccellsapp.com:1337/parse/files/PfAppId/' + layer.src;
if (!fonts.includes(url)) {
fonts.push(url);
$("style").prepend("@font-face {n" +
"tfont-family: "" + layer.font + "";n" +
"tsrc: url(" + url + ") format('truetype');n" +
"}");
}
$('.container').append(
'<div class="txtContainer" ' +
'style="' +
'text-align: ' + layer.justification + '; ' +
'font-family: ' + layer.font + '; ' +
'left: ' + layer.x + 'px; ' +
'top: ' + layer.y + 'px; ' +
'width:' + layer.width + 'px; ' +
'color: ' + layer.color.replace(/^0x/, '#') + '; ' +
'font-size: ' + layer.size + 'px; ' +
'height:' + layer.height + 'px;' +
'">' +
layer.text +
'</div>');
}
}
// 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 {
x: event.pageX || event.offsetX,
y: event.pageY || event.offsetY
};
}
container.selected = function(ev) {
var pos = container.mousePosition(ev);
var item = $(".masked-img canvas").filter(function() {
var offset = $(this).offset()
var x = pos.x - offset.left;
var y = pos.y - offset.top;
var d = this.getContext('2d').getImageData(x, y, 1, 1).data;
return d[0] > 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
asked 15 hours ago
vickey colorsvickey colors
1236
$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
add a comment |
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) {
if (layer.type === 'image') return;
if (!layer.type || layer.type === 'group') {
return layer.layers.forEach(drawText)
}
if (layer.type === 'text') {
const url = 'http://piccellsapp.com:1337/parse/files/PfAppId/' + layer.src;
if (!fonts.includes(url)) {
fonts.push(url);
$("style").prepend("@font-face {n" +
"tfont-family: "" + layer.font + "";n" +
"tsrc: url(" + url + ") format('truetype');n" +
"}");
}
$('.container').append(
'<div class="txtContainer" ' +
'style="' +
'text-align: ' + layer.justification + '; ' +
'font-family: ' + layer.font + '; ' +
'left: ' + layer.x + 'px; ' +
'top: ' + layer.y + 'px; ' +
'width:' + layer.width + 'px; ' +
'color: ' + layer.color.replace(/^0x/, '#') + '; ' +
'font-size: ' + layer.size + 'px; ' +
'height:' + layer.height + 'px;' +
'">' +
layer.text +
'</div>');
}
}
// 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 {
x: event.pageX || event.offsetX,
y: event.pageY || event.offsetY
};
}
container.selected = function(ev) {
var pos = container.mousePosition(ev);
var item = $(".masked-img canvas").filter(function() {
var offset = $(this).offset()
var x = pos.x - offset.left;
var y = pos.y - offset.top;
var d = this.getContext('2d').getImageData(x, y, 1, 1).data;
return d[0] > 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
asked 15 hours ago
vickey colorsvickey colors
1236
$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) {
if (layer.type === 'image') return;
if (!layer.type || layer.type === 'group') {
return layer.layers.forEach(drawText)
}
if (layer.type === 'text') {
const url = 'http://piccellsapp.com:1337/parse/files/PfAppId/' + layer.src;
if (!fonts.includes(url)) {
fonts.push(url);
$("style").prepend("@font-face {n" +
"tfont-family: "" + layer.font + "";n" +
"tsrc: url(" + url + ") format('truetype');n" +
"}");
}
$('.container').append(
'<div class="txtContainer" ' +
'style="' +
'text-align: ' + layer.justification + '; ' +
'font-family: ' + layer.font + '; ' +
'left: ' + layer.x + 'px; ' +
'top: ' + layer.y + 'px; ' +
'width:' + layer.width + 'px; ' +
'color: ' + layer.color.replace(/^0x/, '#') + '; ' +
'font-size: ' + layer.size + 'px; ' +
'height:' + layer.height + 'px;' +
'">' +
layer.text +
'</div>');
}
}
// 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 {
x: event.pageX || event.offsetX,
y: event.pageY || event.offsetY
};
}
container.selected = function(ev) {
var pos = container.mousePosition(ev);
var item = $(".masked-img canvas").filter(function() {
var offset = $(this).offset()
var x = pos.x - offset.left;
var y = pos.y - offset.top;
var d = this.getContext('2d').getImageData(x, y, 1, 1).data;
return d[0] > 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) {
if (layer.type === 'image') return;
if (!layer.type || layer.type === 'group') {
return layer.layers.forEach(drawText)
}
if (layer.type === 'text') {
const url = 'http://piccellsapp.com:1337/parse/files/PfAppId/' + layer.src;
if (!fonts.includes(url)) {
fonts.push(url);
$("style").prepend("@font-face {n" +
"tfont-family: "" + layer.font + "";n" +
"tsrc: url(" + url + ") format('truetype');n" +
"}");
}
$('.container').append(
'<div class="txtContainer" ' +
'style="' +
'text-align: ' + layer.justification + '; ' +
'font-family: ' + layer.font + '; ' +
'left: ' + layer.x + 'px; ' +
'top: ' + layer.y + 'px; ' +
'width:' + layer.width + 'px; ' +
'color: ' + layer.color.replace(/^0x/, '#') + '; ' +
'font-size: ' + layer.size + 'px; ' +
'height:' + layer.height + 'px;' +
'">' +
layer.text +
'</div>');
}
}
// 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 {
x: event.pageX || event.offsetX,
y: event.pageY || event.offsetY
};
}
container.selected = function(ev) {
var pos = container.mousePosition(ev);
var item = $(".masked-img canvas").filter(function() {
var offset = $(this).offset()
var x = pos.x - offset.left;
var y = pos.y - offset.top;
var d = this.getContext('2d').getImageData(x, y, 1, 1).data;
return d[0] > 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) {
if (layer.type === 'image') return;
if (!layer.type || layer.type === 'group') {
return layer.layers.forEach(drawText)
}
if (layer.type === 'text') {
const url = 'http://piccellsapp.com:1337/parse/files/PfAppId/' + layer.src;
if (!fonts.includes(url)) {
fonts.push(url);
$("style").prepend("@font-face {n" +
"tfont-family: "" + layer.font + "";n" +
"tsrc: url(" + url + ") format('truetype');n" +
"}");
}
$('.container').append(
'<div class="txtContainer" ' +
'style="' +
'text-align: ' + layer.justification + '; ' +
'font-family: ' + layer.font + '; ' +
'left: ' + layer.x + 'px; ' +
'top: ' + layer.y + 'px; ' +
'width:' + layer.width + 'px; ' +
'color: ' + layer.color.replace(/^0x/, '#') + '; ' +
'font-size: ' + layer.size + 'px; ' +
'height:' + layer.height + 'px;' +
'">' +
layer.text +
'</div>');
}
}
// 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 {
x: event.pageX || event.offsetX,
y: event.pageY || event.offsetY
};
}
container.selected = function(ev) {
var pos = container.mousePosition(ev);
var item = $(".masked-img canvas").filter(function() {
var offset = $(this).offset()
var x = pos.x - offset.left;
var y = pos.y - offset.top;
var d = this.getContext('2d').getImageData(x, y, 1, 1).data;
return d[0] > 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
javascript jquery html
asked 15 hours ago
vickey colorsvickey colors
1236
asked 15 hours ago
vickey colorsvickey colors
1236
edited 6 mins ago
vickey colors
asked 15 hours ago
vickey colorsvickey colors
1236
asked 15 hours ago
vickey colorsvickey colors
1236
asked 15 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
add a comment |
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
add a comment |
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
answered 15 hours ago
x539x539
1461
$endgroup$
add a comment |
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
answered 15 hours ago
x539x539
1461
$endgroup$
add a comment |
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
answered 15 hours ago
x539x539
1461
$endgroup$
add a comment |
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
answered 15 hours ago
x539x539
1461
$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
answered 15 hours ago
x539x539
1461
answered 15 hours ago
x539x539
1461
answered 15 hours ago
x539x539
1461
answered 15 hours ago
x539x539
1461
1461
add a comment |
add a comment |
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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