Below Mask image has 3 parts:
- Outside Non-Transparent Part
- Border
- Inside Transparent part
https://i.sstatic.net/Uxc5n.png
Currently, when a user clicks on the Transparent or Non-Transparent part, they are allowed to upload an image.
Requirement:
When a user clicks on the Non-Transparent part, the dialogue box should not display for uploading an image.
Link: https://codepen.io/kidsdial/pen/jJBVON
var mask;
let jsonData = {
"path": " love shape\/",
"info": {
"author": "",
"keywords": "",
"file": "love shape",
"date": "sRGB",
"title": "",
"description": "Normal",
"generator": "Export Kit v1.2.8"
},
"name": "love shape",
"layers": [{
"x": 1,
"height": 613,
"layers": [{
"x": 1,
"color": "0xFFFFFF",
"height": 612,
"y": 30,
"width": 612,
"shapeType": "rectangle",
"type": "shape",
"name": "bg_rectangle_1"
},
{
"x": 40,
"height": 480,
"layers": [{
"x": 10,
"height": 480,
"src": "ncdHNan.png",
"y": 10,
"width": 514,
"type": "image",
"name": "mask_image_1"
},
{
"radius": "27 \/ 27",
"color": "0xACACAC",
"x": 233,
"y": 205,
"height": 53,
"width": 53,
"shapeType": "ellipse",
"type": "shape",
"name": "useradd_ellipse1"
}
],
"y": 1,
"width": 514,
"type": "group",
"name": "user_image_1"
}
],
"y": 1,
"width": 614,
"type": "group",
"name": "loveshape_18"
}]
};
$(document).ready(function() {
$('.container').click(function(e) {
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;
for (let { src, x, y } of arr) {
$(".container").css('width', width + "px").css('height', height + "px").addClass('temp');
var mask = $(".container").mask({
maskImageUrl: 'https://i.imgur.com/' + src,
onMaskImageCreate: function(img) {
img.css({
"position": "absolute",
"left": x + "px",
"top": y + "px"
});
}
});
fileup.onchange = function() {
mask.loadImage(URL.createObjectURL(fileup.files[0]));
};
}
}
json(jsonData);
});