单击“删除文本"后才允许图像上传 [英] Allow Image Upload Only after click on Remove text
本文介绍了单击“删除文本"后才允许图像上传的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Onclick图片我们为用户提供了从计算机上载图片的选项，在用户上传图片之后，我们将显示"删除"文本....一旦用户单击删除"，我们正在删除上传的图片....
要求:
在用户单击删除文本"之前，他应该无法上传其他图像....
它适用于单张图片....
问题:
但是如果有多张图片，则一旦用户在第一张图片上上传，则不允许在第二张图片上上传图片....但这不应该发生....
codepen: https://codepen.io/kidsdial/pen/PgmzOE
小提琴: https://jsfiddle.net/kidsdial1/5xuLd8yt/
下面是代码段:
var target;
var imageUrl = "https://i.imgur.com/RzEm1WK.png";
// Json - it includes mask image
let jsonData = {
"layers" : [
{
"x" : 0,
"height" : 612,
"layers" : [
{
"x" : 0,
"y" : 0,
"name" : "L2a"
},
{
"x" : 160,
"layers" : [
{
"x" : 0,
"src" : "ax0HVTs.png",
"y" : 0,
"name" : "L2b-1"
},
{
"x" : 0,
"y" : 0,
"name" : "L2b-2"
}
],
"y" : 291,
"name" : "user_image_1"
},
{
"x" : 25,
"layers" : [
{
"x" : 0,
"src" : "hEM2kEP.png",
"y" : 0,
"name" : "L2C-1"
},
{
"x" : 0,
"y" : 0,
"name" : "L2C-2"
}
],
"y" :22,
"name" : "L2"
}
],
"y" : 0,
"width" : 612,
"name" : "L1"
}
]
};
$(document).ready(function() {
// upload image onclick mask image
$('.container').click(function(e) {
var res = e.target;
target = res.id;
console.log(target);
if (e.target.getContext) {
// click only inside Non Transparent part
// $('.container').css('pointer-events','none');
var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
if (pixel[3] === 255) {
setTimeout(() => {
$('#fileup').click();
}, 20);
}
}
});
// Below code will fetch mask image from json file
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;
let counter = 0;
let table = [];
for (let {
src,
x,
y,
name
} of arr) {
var mask = $(".container").mask({
// icon :
imageUrl: imageUrl,
// Mask image :
maskImageUrl: 'https://i.imgur.com/' + src,
onMaskImageCreate: function(img) {
// image positions :
img.css({
"position": "absolute",
"left": x + "px",
"top": y + "px"
});
},
id: counter
});
table.push(mask);
fileup.onchange = function() {
//u day code
$('.container').css('pointer-events','none');
let mask2 = table[target];
const newImageLoadedId = mask2.loadImage(URL.createObjectURL(fileup.files[0]));
document.getElementById('fileup').value = "";
// Remove image
$("<br/><span id=\"" + newImageLoadedId + "\" class=\"remove\">Remove image</span>").insertAfter("#fileup");
$(".remove").click(function(event) {
$('.container').css('pointer-events','');
const canvasId = "canvas#" + event.currentTarget.id;
// Delete the image
const ctx = $("canvas")[event.currentTarget.id].getContext("2d");
ctx.fillStyle = "white"
ctx.fillRect(0, 0, 500, 500)
// Delete the button
$(this).remove();
});
// Remove image code end here....
};
counter++;
}
}
json(jsonData);
}); // end of document ready
// upload image & drag code
(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.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);
return settings.id;
};
// 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));
.container
{
background: gold;
position: relative;
width:612px;
height:612px;
}
.container img {
position:absolute;
top:0;
bottom:250px;
left:0;
right:0;
margin:auto;
z-index:999;
}
.masked-img {
overflow: hidden;
position: relative;
}
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="fileup" name="fileup" type="file" style="display:none" >
<div class="container">
</div>
在点击删除文本之前，我使用了以下代码来限制上传图片:
$('.container').css('pointer-events','none');
$('.container').css('pointer-events','');
在添加上述两行之前，它的工作原理如下: codepen2
解决方案
由于您的标记中两个图像持有者都有一个共同的div，因此以下语句将选择整个div并禁用事件.
$('.container').css('pointer-events','none');
这是引起您的问题的原因，因为它不在第二个Codepen中.要更正它，您可以通过存储单击的图像保持器的位置/名称，然后将其与下一个事件进行比较，以检查哪个图像被单击，并相应地采取行动(如果是另一个图像)，从而区分两个图像保持器.
我能够对您的js代码进行一些更改.现在，选定的遮罩的画布被ID禁用，并且仅在加载图像时才禁用.我还修改了删除按钮功能，以删除删除后的禁用功能
var target;
var imageUrl = "https://i.imgur.com/RzEm1WK.png";
// Json - it includes mask image
let jsonData = {
"layers" : [
{
"x" : 0,
"height" : 612,
"layers" : [
{
"x" : 0,
"y" : 0,
"name" : "L2a"
},
{
"x" : 160,
"layers" : [
{
"x" : 0,
"src" : "ax0HVTs.png",
"y" : 0,
"name" : "L2b-1"
},
{
"x" : 0,
"y" : 0,
"name" : "L2b-2"
}
],
"y" : 291,
"name" : "user_image_1"
},
{
"x" : 25,
"layers" : [
{
"x" : 0,
"src" : "hEM2kEP.png",
"y" : 0,
"name" : "L2C-1"
},
{
"x" : 0,
"y" : 0,
"name" : "L2C-2"
}
],
"y" :22,
"name" : "L2"
}
],
"y" : 0,
"width" : 612,
"name" : "L1"
}
]
};
$(document).ready(function() {
// upload image onclick mask image
$('.container').click(function(e) {
var res = e.target;
target = res.id;
console.log(target);
if (e.target.getContext) {
// click only inside Non Transparent part
var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
if (pixel[3] === 255) {
setTimeout(() => {
$('#fileup').click();
}, 20);
}
}
});
// Below code will fetch mask image from json file
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({
// icon :
imageUrl: imageUrl1,
// Mask image :
maskImageUrl: 'https://i.imgur.com/' + src,
onMaskImageCreate: function(img) {
// image positions :
img.css({
"position": "absolute",
"left": x + "px",
"top": y + "px"
});
},
id: counter
});
table.push(mask);
fileup.onchange = function() {
$("#"+String(target)).css("pointer-events", "none");
let mask2 = table[target];
const newImageLoadedId = mask2.loadImage(URL.createObjectURL(fileup.files[0]));
document.getElementById('fileup').value = "";
// Remove image
$("<br/><span id=\"" + newImageLoadedId + "\" class=\"remove\">Remove image</span>").insertAfter("#fileup");
$(".remove").click(function(event) {
const canvasId = "canvas#" + event.currentTarget.id;
// $(canvasId).css('pointer-events','auto')
// Delete the image
const ctx = $("canvas")[event.currentTarget.id].getContext("2d");
ctx.fillStyle = "white"
ctx.fillRect(0, 0, 500, 500)
// Delete the button
$(this).remove();
$(canvasId).css("pointer-events","");
});
// Remove image code end here....
};
counter++;
}
}
json(jsonData);
}); // end of document ready
// upload image & drag code
(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.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);
return settings.id;
};
// 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));
由于Firestore无法正确加载，因此Codepen中的文件选择存在一些问题.右键单击黄色部分，尝试重新加载框架！
这是codepen https://codepen.io/icy121/pen/oOqZNy ?editors = 0110
Onclick Image We are Providing options for users to upload image from their computer, after user upload image, then we are displaying "Remove" text.... once user click on "Remove", we are deleting the uploaded image....
Requirement :
Before user click on Remove Text , he should't able to upload another image....
it's working for single image....
Issue :
But if there are multiple images , once user upload on 1st image, then its not allowing to upload image on 2nd image.... but this should't happen....
codepen : https://codepen.io/kidsdial/pen/PgmzOE
Fiddle : https://jsfiddle.net/kidsdial1/5xuLd8yt/
Below is code snippet :
var target;
var imageUrl = "https://i.imgur.com/RzEm1WK.png";
// Json - it includes mask image
let jsonData = {
"layers" : [
{
"x" : 0,
"height" : 612,
"layers" : [
{
"x" : 0,
"y" : 0,
"name" : "L2a"
},
{
"x" : 160,
"layers" : [
{
"x" : 0,
"src" : "ax0HVTs.png",
"y" : 0,
"name" : "L2b-1"
},
{
"x" : 0,
"y" : 0,
"name" : "L2b-2"
}
],
"y" : 291,
"name" : "user_image_1"
},
{
"x" : 25,
"layers" : [
{
"x" : 0,
"src" : "hEM2kEP.png",
"y" : 0,
"name" : "L2C-1"
},
{
"x" : 0,
"y" : 0,
"name" : "L2C-2"
}
],
"y" :22,
"name" : "L2"
}
],
"y" : 0,
"width" : 612,
"name" : "L1"
}
]
};
$(document).ready(function() {
// upload image onclick mask image
$('.container').click(function(e) {
var res = e.target;
target = res.id;
console.log(target);
if (e.target.getContext) {
// click only inside Non Transparent part
// $('.container').css('pointer-events','none');
var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
if (pixel[3] === 255) {
setTimeout(() => {
$('#fileup').click();
}, 20);
}
}
});
// Below code will fetch mask image from json file
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;
let counter = 0;
let table = [];
for (let {
src,
x,
y,
name
} of arr) {
var mask = $(".container").mask({
// icon :
imageUrl: imageUrl,
// Mask image :
maskImageUrl: 'https://i.imgur.com/' + src,
onMaskImageCreate: function(img) {
// image positions :
img.css({
"position": "absolute",
"left": x + "px",
"top": y + "px"
});
},
id: counter
});
table.push(mask);
fileup.onchange = function() {
//u day code
$('.container').css('pointer-events','none');
let mask2 = table[target];
const newImageLoadedId = mask2.loadImage(URL.createObjectURL(fileup.files[0]));
document.getElementById('fileup').value = "";
// Remove image
$("<br/><span id=\"" + newImageLoadedId + "\" class=\"remove\">Remove image</span>").insertAfter("#fileup");
$(".remove").click(function(event) {
$('.container').css('pointer-events','');
const canvasId = "canvas#" + event.currentTarget.id;
// Delete the image
const ctx = $("canvas")[event.currentTarget.id].getContext("2d");
ctx.fillStyle = "white"
ctx.fillRect(0, 0, 500, 500)
// Delete the button
$(this).remove();
});
// Remove image code end here....
};
counter++;
}
}
json(jsonData);
}); // end of document ready
// upload image & drag code
(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.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);
return settings.id;
};
// 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));
.container
{
background: gold;
position: relative;
width:612px;
height:612px;
}
.container img {
position:absolute;
top:0;
bottom:250px;
left:0;
right:0;
margin:auto;
z-index:999;
}
.masked-img {
overflow: hidden;
position: relative;
}
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="fileup" name="fileup" type="file" style="display:none" >
<div class="container">
</div>
I used below code to restrict uploading image before click on Remove text :
$('.container').css('pointer-events','none');
$('.container').css('pointer-events','');
Before adding above 2 lines, It was working fine as here : codepen2
解决方案
Since you have a common div for both image holders in your markup, the following statement will select the whole div and disable the events.
$('.container').css('pointer-events','none');
This is what is causing your issue to my understanding since it is not in the second codepen. To correct it you can differentiate between the two image holders by either storing position/name of holder clicked and compare it with the next event to check which one is clicked and act accordingly if it is the other one.
I was able to make some changes to you js code. Now the selected canvas masked is disabled by the ID and only when image is loaded. I also modified the remove button function to reverse the disabling after remove is deleted
var target;
var imageUrl = "https://i.imgur.com/RzEm1WK.png";
// Json - it includes mask image
let jsonData = {
"layers" : [
{
"x" : 0,
"height" : 612,
"layers" : [
{
"x" : 0,
"y" : 0,
"name" : "L2a"
},
{
"x" : 160,
"layers" : [
{
"x" : 0,
"src" : "ax0HVTs.png",
"y" : 0,
"name" : "L2b-1"
},
{
"x" : 0,
"y" : 0,
"name" : "L2b-2"
}
],
"y" : 291,
"name" : "user_image_1"
},
{
"x" : 25,
"layers" : [
{
"x" : 0,
"src" : "hEM2kEP.png",
"y" : 0,
"name" : "L2C-1"
},
{
"x" : 0,
"y" : 0,
"name" : "L2C-2"
}
],
"y" :22,
"name" : "L2"
}
],
"y" : 0,
"width" : 612,
"name" : "L1"
}
]
};
$(document).ready(function() {
// upload image onclick mask image
$('.container').click(function(e) {
var res = e.target;
target = res.id;
console.log(target);
if (e.target.getContext) {
// click only inside Non Transparent part
var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
if (pixel[3] === 255) {
setTimeout(() => {
$('#fileup').click();
}, 20);
}
}
});
// Below code will fetch mask image from json file
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({
// icon :
imageUrl: imageUrl1,
// Mask image :
maskImageUrl: 'https://i.imgur.com/' + src,
onMaskImageCreate: function(img) {
// image positions :
img.css({
"position": "absolute",
"left": x + "px",
"top": y + "px"
});
},
id: counter
});
table.push(mask);
fileup.onchange = function() {
$("#"+String(target)).css("pointer-events", "none");
let mask2 = table[target];
const newImageLoadedId = mask2.loadImage(URL.createObjectURL(fileup.files[0]));
document.getElementById('fileup').value = "";
// Remove image
$("<br/><span id=\"" + newImageLoadedId + "\" class=\"remove\">Remove image</span>").insertAfter("#fileup");
$(".remove").click(function(event) {
const canvasId = "canvas#" + event.currentTarget.id;
// $(canvasId).css('pointer-events','auto')
// Delete the image
const ctx = $("canvas")[event.currentTarget.id].getContext("2d");
ctx.fillStyle = "white"
ctx.fillRect(0, 0, 500, 500)
// Delete the button
$(this).remove();
$(canvasId).css("pointer-events","");
});
// Remove image code end here....
};
counter++;
}
}
json(jsonData);
}); // end of document ready
// upload image & drag code
(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.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);
return settings.id;
};
// 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));
There is some issue with the file selection in codepen due to firestore not loading correctly. Try reloading frame by right clicking out of the yellow part!
Here is the codepen https://codepen.io/icy121/pen/oOqZNy?editors=0110
这篇关于单击“删除文本"后才允许图像上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
