Javascript 用外部图像替换内部图像

用户点击蒙版并上传图片

它两次显示同一图像，同时在图像上显示文本

一旦用户点击编辑文本，我们将显示弹出框

在那里我们可以看到缩放和缩放按钮正在显示

问题：

一旦我们点击这些按钮，它将缩放外部图像，而不是内部图像

要求：

所以我想用外部图像替换内部图像&删除内部图像，这样缩放功能将适用于上传的图像

代码笔：

var目标；
常量imageUrl=”https://i.imgur.com/RzEm1WK.png";
设jsonData={
“层”：[{
“x”：0，
“高度”：612，
“层”：[{
“x”：160，
“src”：“ax0HVTs.png”，
“y”：291，
“高度”：296，
“宽度”：429，
“名称”：“掩码_1”
},
{
“x”：25，
“src”：“hEM2kEP.png”，
“高度”：324，
“宽度”：471，
“y”：22，
“名称”：“面罩2”
}
],
“y”：0，
“宽度”：612
}]
};
const containerElement=$（“#container”）；
常量fileUp=$（“#fileUp”）；
$（函数（）{
//上传图片点击蒙版图片
容器元素。单击（函数（e）{
var-res=e.target；
target=res.id；
//控制台日志（目标）；
if（e.target.getContext）{
//仅在不透明零件内部单击
var pixel=e.target.getContext（'2d'）.getImageData（e.offsetX，e.offsetY，1，1）；
如果（像素[3]==255）{
设置超时（（）=>{
$（'#fileup'）。单击（）；
}, 20);
}
}
});
//从json文件获取掩码图像-忽略此代码
函数getAllSrc（层）{
设arr=[]；
layers.forEach（层=>{
if（layer.src）{
arr.push({
src:layer.src，
x:layer.x，
y:图层，y，
高度：layer.height，
宽度：layer.width，
名称：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=[]；
//容器尺寸
containerElement.css（'width'，width+“px”）.css（'height'，height+“px”）.addClass（'temp'）；
//结束
让{
src，
x,，
Y
名称
}（arr）{
//获取遮罩图像的高度和宽度[编辑按钮]
var-ImagePosition=arr；
//代码端
变量掩码=$（“.container”）.mask({
imageUrl:imageUrl，
//获取掩码图像
maskImageUrl:'https://i.imgur.com/“+src，
//结束
onMaskImageCreate:函数（img）{
//遮罩图像位置
img.css({
“位置”：“绝对”，
“左”：x+“px”，
“顶部”：y+“px”
});
//结束
},
id:柜台
});
表.推（掩模）；
fileup.onchange=函数（）{
设mask2=表[目标]；
const imgView=URL.createObjectURL（fileup.files[0]）；
const newImageLoadedId=mask2.loadImage（URL.createObjectURL（fileup.files[0]）；
document.getElementById（'fileup'）。value=“”；
if（$（“.masked img”+newImageLoadedId+”#renderImage'）.length）==0）{
$（'.masked img'+newImageLoadedId）.append（“”）；
}否则{
$（'渲染'）.attr（'src'，imgView）；
}
//编辑图像-忽略此代码
if（$（“.masked img”+newImageLoadedId）.length==1）{
$("" +
“+”）.appendTo（“.pip”+newImageLoadedId）.css({
“左”：$（'.edit'+newImageLoadedId）.width（）+2+“px”，