Javascript 在同一位置显示文本和图像

我们允许用户上传一个图像一旦用户点击汽车

一旦用户上传图像，我们将在汽车顶部显示用户上传的图像，并在容器外部显示文本“编辑”

要求：

但我想在图像的同一位置显示该文本

如果轿厢位置为

左侧：1px

我希望文本位置也应该是

left:1px

代码笔：

小提琴：

var目标；
var imageUrl=”https://i.imgur.com/RzEm1WK.png";
//Json文件-包括汽车图像及其位置
设jsonData={
“层”：[{
“x”：10，
“高度”：412，
“层”：[
{
“x”：20，
“层”：[{
“x”：30，
“src”：“iEA642D.jpg”，
“y”：31，
“名称”：“L2b-1”
}
],
“y”：21，
“名称”：“用户\图像\ 1”
}
],
“y”：11，
“宽度”：412，
“名称”：“L1”
}]
};
$（文档）.ready（函数（）{
//忽略下面的代码-它将在单击汽车时上载图像
$（'.container'）。单击（函数（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.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'）；
if（name.indexOf（'mask_'）！=-1）{
var imageUrl1=imageUrl；
}否则{
var imageUrl1=''；
}
变量掩码=$（“.container”）.mask({
imageUrl:imageUrl1，
maskImageUrl:'https://i.imgur.com/“+src，
onMaskImageCreate:函数（img）{
//车辆位置：
img.css({
“位置”：“绝对”，
“左”：x+“px”，
“顶部”：y+“px”
});
},
id:柜台
});
表.推（掩模）；
fileup.onchange=函数（）{
设mask2=表[目标]；
const newImageLoadedId=mask2.loadImage（URL.createObjectURL（fileup.files[0]）；
document.getElementById（'fileup'）。value=“”；
//编辑文本
$("" +
“
编辑”+
“）。插入后面的（#fileup”）；
//编辑代码结束在这里。。。。
};
计数器++；
}
}
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，
帆布，
上下文
形象,，
超时，
initImage=false，
startX=settings.x，
startY=settings.y，
分区；
container.mousePosition=函数（事件）{
返回{
x:event.pageX | | event.offsetX，
y:event.pageY | | event.offsetY
};
}
container.selected=功能（ev）{
var pos=容器鼠标位置（ev）；
变量项=$（“.masked img canvas”）.filter（函数（）{
var offset=$（this.offset（）
var x=位置x-偏移量x；
变量y=位置y-偏移量顶部；
var d=this.getContext（'2d'）.getImageData（x，y，1，1）.data；
返回d[0]>0
});
JQmasks.forEach（函数（el）{
变量id=item.length>0？
$(".masked-img").append("<span class=\"pip\">" +
"<br/><span style =\"left:  layer.x + 'px;'\" class=\"edit\" >Edit </span>" +
"</span>");

.pip {
  display: inline-block;
  margin: 10px 10px 0 0;
  position: relative;
  top: -200px; // The height of the canvas
}

<section id="input-container">
  <div class="image-editor" >
    <div class="edit"><button>edit</button></div>
    <div class="mask-img" >...</div>
  </div>
</section>

.pip {
  display: inline-block;
  margin: 0;
  position: absolute;
}

$("<span class=\"pip\">" +
    "<span class=\"edit\" >Edit </span>" +
    "</span>").insertAfter(".masked-img").css({"left": x + "px", "top": y - $('.pip').height() + "px"});