Javascript 无法在所有画布上上载图像

我们允许用户在透明图像上单击后上传图像

在下面的模板中，我们提供了一个上传6幅图像的选项，它可以正常工作：

下面是代码段1：在整页模式下检查代码段结果

var目标；
var imageUrl=”https://i.imgur.com/RzEm1WK.png";
设jsonData={
“层”：[
{
“x”：0，
“高度”：612，
“层”：[
{
“x”：20，
“高度”：198，
“层”：[
{
“x”：0，
“src”：“WLbCzRI.png”，
“y”：0
}            
],
“y”：294
},
{
“x”：20，
“层”：[
{
“x”：0，
“src”：“YmChyhu.png”，
“y”：0
}
],
“y”：451
},
{
“x”：294，
“层”：[
{
“x”：0，
“src”：“IeXKp5z.png”，
“y”：0
}
],
“y”：390
},
{
“x”：330，
“层”：[
{
“x”：0，
“src”：“I8shPlt.png”，
“y”：0
}            
],
“y”：20
},
{
“x”：20，
“层”：[
{
“x”：0，
“src”：“h8MVKzd.png”，
“y”：0
}
],
“y”：124
},
{
“x”：20，
“层”：[
{
“x”：0，
“src”：“J436UDQ.png”，
“y”：0
},            
],
“y”：20
}
],
“y”：0
}
]
};
$（文档）.ready（函数（）{
//下面的代码将上传图片点击蒙版图片
$（'.container'）。单击（函数（e）{
//过滤非画布单击
如果（e.target.tagName！=='CANVAS'）返回；
//获取相对于容器的绝对点
常量absX=e.offsetX+e.target.parentNode.offsetLeft+e.currentTarget.offsetLeft；
常量absY=e.offsetY+e.target.parentNode.offsetTop+e.currentTarget.offsetTop；
const$canvasList=$（this.find（'canvas'）；
//在同一z索引上移动所有画布父对象
$canvasList.parent（）.css({
zIndex:0
});
$canvasList.filter（函数（）{//仅筛选适用的画布
const bbox=this.getBoundingClientRect（）
返回(
absX>=bbox.left&&absX=bbox.top&&absY{
$（'#fileup'）。单击（）；
}, 20);
}
})
});
//下面的代码将从json文件中获取掩码图像
函数getAllSrc（层）{
设arr=[]；
layers.forEach（层=>{
if（layer.src）{
arr.push({
src:layer.src，
x:layer.x，
y:图层，y，
名称：layer.name
});
}else if（layer.layers）{
设newArr=getAllSrc（layer.layers）；
如果（newArr.length>0）{
纽瓦尔·弗雷赫(({
src，
x,，
Y
名称
}) => {
arr.push({
src，
x：（层x+x），
y：（图层y+y），
姓名：（姓名）
});
});
}
}
});
返回arr；
}
函数json（数据）
{
var宽度=0；
var高度=0；
设arr=getAllSrc（data.layers）；
让layer1=data.layers；
宽度=第1层[0]。宽度；
高度=第1层[0]。高度；
设计数器=0；
设table=[]；
让{
src，
x,，
Y
名称
}（arr）{
$（“.container”）.css（'width'，width+“px”）.css（'height'，height+“px”）.addClass（'temp'）；
变量掩码=$（“.container”）.mask({
imageUrl:imageUrl，
maskImageUrl:'https://i.imgur.com/“+src，
onMaskImageCreate:函数（img）{
img.css({
“位置”：“绝对”，
“左”：x+“px”，
“顶部”：y+“px”
});
},
id:柜台
});
表.推（掩模）；
fileup.onchange=函数（）{
设mask2=表[目标]；
loadImage（URL.createObjectURL（fileup.files[0]）；
document.getElementById（'fileup'）。value=“”；
};
计数器++；
}       
}
json（jsonData）；
}); // 文件结束准备好了吗
//显示图像的代码
（函数（$）{
var JQmasks=[]；
$.fn.mask=函数（选项）{
变量设置=$.extend（{
maskImageUrl:未定义，
imageUrl:未定义，
比例：1，
id:new Date（）.getUTCMilliseconds（）.toString（），
x:0,，
y:0，
onMaskImageCreate:function（div）{}，
}，选项）；
var容器=$（此）；
设prevX=0，
prevY=0，
draggable=false，
img，
帆布，
上下文
形象,，
时间