Javascript 具有绝对定位图像的响应页面

我们正在使用JSON获取图像。在json中，还提到了图像的X[左]&Y[顶]位置，我需要使用相同的位置

所以我用绝对位置。如果我使用相对位置，那么图像将不会显示在适当的位置，因此在这种情况下，是否可以使页面响应

如果是这样的话，我需要遵循哪些事项才能使其响应

onMaskImageCreate: function(img) {
                    // Mask image positions
                    img.css({
                        "position": "absolute",
                        "left": x + "px",
                        "top": y + "px"
                    });

片段：

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 imageUrl1=imageUrl；
变量掩码=$（“.container”）.mask({
imageUrl:name.indexOf（'mask_'）！=-1？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=“”；
};
计数器++；
}
返回掩码；
}
mask=json（jsonData）；
}); // 功能结束
//图像编码
（函数（$）{
window.JQmasks=[]；
$.fn.mask=函数（选项）{
//这是拥有默认选项的最简单方法。
常量设置=$.extend({
//这些是默认设置。
maskImageUrl:未定义，
imageUrl:未定义，
比例：1，
id:new Date（）.getUTCMilliseconds（）.toString（），
x:0，//图像开始位置
y:0，//图像开始位置
onMaskImageCreate:function（div）{}，
旋转：0，
}，选项）；
//创建图像属性
settings.maskImage=新图像
settings.image=新图像
//设置交叉原点属性
settings.maskImage.setAttribute（'crossOrigin'，'anonymous'）；
settings.image.setAttribute（'crossOrigin'，'anonymous'）；
settings.maskImage.onload=函数（）{
//加载遮罩后，加载图像
container.loadImage（settings.imageUrl，true）
container.drawMask（）
}
settings.image.onload=函数（）{
//加载图像后，渲染到画布
container.drawImage（）
}
var容器=$（此）；
设prevX=0，
prevY=0，
draggable=false，
img，
帆布，
上下文
形象,，
超时，
initImage=false，
斯塔克斯