There are two types of images in our json files....
1.Mask images
- Which have Transparent background as below :
2.Background images :
- Any normal images
Right now I am displaying Icons on all images as in below codepens....
Icons on Mask images : https://codepen.io/kidsdial/pen/aMPvam
Icons on Background images : https://codepen.io/kidsdial/pen/jJXbej
Sample Json for Mask image :
"layers" : [
{
"src" : "image1.png",
"name" : "mask_image_1"
},
Sample Json for Background images :
"layers" : [
{
"src" : "image2.png",
"name" : "bg_image"
},
Requirement :
but i want to display icons only on Mask images but not on Background images....
So I used below code , but that did't helped me :
if (layer.name == mask_image_1)
{
imageUrl: imageUrl,
}
name of mask images will be start with "mask_" in JSON
var target;
var imageUrl = "https://i.imgur.com/As37YCl.png";
let jsonData = {
"path" : " fb post\/",
"info" : {
"author" : "",
"keywords" : "",
"file" : "fb post",
"date" : "sRGB",
"title" : "",
"description" : "Normal",
"generator" : "Export Kit v1.2.8"
},
"name" : "fb post",
"layers" : [
{
"x" : 0,
"height" : 788,
"layers" : [
{
"x" : 0,
"height" : 788,
"src" : "lRtZPoj.jpg",
"y" : 0,
"width" : 940,
"type" : "image",
"name" : "bg_image"
},
{
"x" : 290,
"height" : 788,
"src" : "5716b3471040e0fc79c458c553eeaf78_frame1.png",
"y" : 0,
"width" : 650,
"type" : "image",
"name" : "shape_1"
},
{
"x" : 450,
"height" : 140,
"src" : "8971b592e4b63cbc64166f4e3479e399_frame2.png",
"y" : 304,
"width" : 430,
"type" : "image",
"name" : "shape_2"
},
{
"justification" : "center",
"font" : "MyriadPro-Regular",
"x" : 555,
"y" : 579,
"src" : "70d83a42df6cebb355f5be7ccc0bc4c4_MyriadPro-Regular.otf",
"width" : 220,
"type" : "text",
"color" : "0xAF001D",
"size" : 12,
"text" : "Reservation recommended +00 123 456 789 ",
"height" : 9,
"name" : "edit_reservation"
},
{
"justification" : "center",
"font" : "MyriadPro-Regular",
"x" : 522,
"y" : 513,
"src" : "70d83a42df6cebb355f5be7ccc0bc4c4_MyriadPro-Regular.otf",
"width" : 283,
"type" : "text",
"color" : "0xAF001D",
"size" : 9,
"text" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.",
"height" : 45,
"name" : "edit_body"
},
{
"justification" : "center",
"font" : "Montserrat-Bold",
"x" : 598,
"uppercase" : true,
"y" : 486,
"width" : 134,
"src" : "2ccd95bae3f2a0c8249205ca5dfbed24_Montserrat-Bold.ttf",
"type" : "text",
"color" : "0xAF001D",
"size" : 15,
"text" : "35$ per person",
"height" : 13,
"name" : "edit_price"
},
{
"justification" : "center",
"font" : "MyriadPro-Regular",
"x" : 507,
"uppercase" : true,
"y" : 464,
"width" : 316,
"src" : "70d83a42df6cebb355f5be7ccc0bc4c4_MyriadPro-Regular.otf",
"type" : "text",
"color" : "0xAF001D",
"size" : 19,
"text" : "4 COURSE DINNER & FIRST DRINK FOR 2",
"height" : 13,
"name" : "edit_info"
},
{
"justification" : "center",
"font" : "ArchivoNarrow-Bold",
"x" : 559,
"uppercase" : true,
"y" : 257,
"width" : 211,
"src" : "611aa93612da8fde1b17d87368355d1f_Font83.otf",
"type" : "text",
"color" : "0xAF001D",
"size" : 30,
"text" : "VALENTINES DAY ",
"height" : 22,
"name" : "edit_sale"
}
],
"y" : 0,
"width" : 940,
"type" : "group",
"name" : "fb_post_5"
}
]
};
$(document).ready(function() {
// upload image onclick
$('.container').click(function(e) {
// filtering out non-canvas clicks
if (e.target.tagName !== 'CANVAS') return;
// getting absolute points relative to container
const absX = e.offsetX + e.target.parentNode.offsetLeft + e.currentTarget.offsetLeft;
const absY = e.offsetY + e.target.parentNode.offsetTop + e.currentTarget.offsetTop;
const $canvasList = $(this).find('canvas');
// moving all canvas parents on the same z-index
$canvasList.parent().css({zIndex: 0});
$canvasList.filter(function () { // filtering only applicable canvases
const bbox = this.getBoundingClientRect()
return (
absX >= bbox.left && absX <= bbox.left + bbox.width &&
absY >= bbox.top && absY <= bbox.top + bbox.height)
}).each(function () { // checking white in a click position
const x = absX - this.parentNode.offsetLeft - e.currentTarget.offsetLeft;
const y = absY - this.parentNode.offsetTop - e.currentTarget.offsetTop;
const pixel = this.getContext('2d').getImageData(x, y, 1, 1).data;
if (pixel[3] === 255) {
$(this).parent().css({zIndex: 2})
target = this.id;
console.log(target);
setTimeout(() => {
$('#fileup').click();
}, 20);
}
})
});
function getAllSrc(layers) {
let arr = [];
layers.forEach(layer => {
if (layer.src) {
arr.push({
src: layer.src,
x: layer.x,
y: layer.y
});
} else if (layer.layers) {
let newArr = getAllSrc(layer.layers);
if (newArr.length > 0) {
newArr.forEach(({
src,
x,
y
}) => {
arr.push({
src,
x: (layer.x + x),
y: (layer.y + y)
});
});
}
}
});
return arr;
}
function json(data)
{
var width = 0;
var height = 0;
let arr = getAllSrc(data.layers);
let layer1 = data.layers;
width = layer1[0].width;
height = layer1[0].height;
let counter = 0;
let table = [];
for (let {
src,
x,
y
} of arr) {
$(".container").css('width', width + "px").css('height', height + "px").addClass('temp');
var mask = $(".container").mask({
imageUrl: imageUrl,
maskImageUrl: 'https://i.imgur.com/' + src,
onMaskImageCreate: function(img) {
img.css({
"position": "absolute",
"left": x + "px",
"top": y + "px"
});
},
id: counter
});
table.push(mask);
fileup.onchange = function() {
let mask2 = table[target];
mask2.loadImage(URL.createObjectURL(fileup.files[0]));
document.getElementById('fileup').value = "";
};
counter++;
// get the text
}
drawText(data);
}
json(jsonData);
}); // end of document ready
// extempl code - get the text
const fonts = []; // caching duplicate fonts
function drawText(layer) {
if (layer.type === 'image') return;
if (!layer.type || 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;
updateStyle();
}
} else {
evt.stopPropagation();
return false;
}
}
};
function updateStyle()
{
//context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.globalCompositeOperation = "source-over";
image = new Image();
image.setAttribute('crossOrigin', 'anonymous');
image.src = settings.maskImageUrl;
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0, image.width, image.height);
div.css({
"width": image.width,
"height": image.height
});
img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = settings.imageUrl;
img.onload = function() {
settings.x = settings.x == 0 && initImage ? (canvas.width - (img.width * settings.scale)) / 2 : settings.x;
settings.y = settings.y == 0 && initImage ? (canvas.height - (img.height * settings.scale)) / 2 : settings.y;
context.globalCompositeOperation = 'source-atop';
context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale);
initImage = false;
};
};
};
// change the draggable image
container.loadImage = function(imageUrl) {
console.log("load");
//if (img)
// img.remove();
// reset the code.
settings.y = startY;
settings.x = startX;
prevX = prevY = 0;
settings.imageUrl = imageUrl;
initImage = true;
updateStyle();
};
// change the masked Image
function loadMaskImage(imageUrl) {
canvas = document.createElement("canvas");
context = canvas.getContext('2d');
canvas.setAttribute("draggable", "true");
canvas.setAttribute("id", settings.id);
settings.maskImageUrl = imageUrl;
div = $("<div/>", {
"class": "masked-img"
}).append(canvas);
// div.find("canvas").on('touchstart mousedown', function(event)
div.find("canvas").on('dragstart', function(event) {
if (event.handled === false) return;
event.handled = true;
container.onDragStart(event);
});
div.find("canvas").on('touchend mouseup', function(event) {
if (event.handled === false) return;
event.handled = true;
container.selected(event);
});
div.find("canvas").bind("dragover", container.onDragOver);
container.append(div);
if (settings.onMaskImageCreate)
settings.onMaskImageCreate(div);
container.loadImage(settings.imageUrl);
};
loadMaskImage(settings.maskImageUrl);
JQmasks.push({
item: container,
id: settings.id
})
return container;
};
}(jQuery));
.container {
background: gold;
position: relative;
}
.container img {
position:absolute;
top:0;
bottom:250px;
left:0;
right:0;
margin:auto;
z-index:999;
}
.masked-img {
overflow: hidden;
position: relative;
}
.txtContainer{ position:absolute; text-align:center; color:#FFF}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<input id="fileup" name="fileup" type="file" style="display:none" >
<div class="container">
</div>
from Display icons only on mask images
No comments:
Post a Comment