如何使用javascript标记图像的部分（图像操作）

我正在尝试构建一个Web应用程序，人们可以在其中标记图像的一部分并更改图像的不同部分（根据商店中已有的商品），如下面的视频链接

我需要关于Javascript/HTML/任何关于如何在图像中标记对象（我的应用程序中是墙）的技术的建议

我在谷歌上搜索了一下，但只找到了功能齐全的图像编辑器或一些我不需要的随机js。像这样,

var O={
文件：文件，
body:document.body，
wd：窗口，
行政长官：职能（a、b）{
返回a.appendChild（（a=O.doc.createElement（b）），a；
},
cc:function（）{
var c，g，gn；
c=O.ce（O.body，画布）；
c、 宽度=外径；
c、 高度=O.h；
g=c.getContext（“2d”）；
gn={
证监会：职能（一）{
//设置填充颜色
g、 fillStyle=a；
},
slc：功能（a）{
//设置线条颜色
g、 strokeStyle=a；
},
slw：功能（a）{
//设置线宽
g、 线宽=a；
},
bp：函数（）{
//开始路径
g、 beginPath（）；
},
mt：功能（a、b）{
//搬到
g、 moveTo（gn.tp（0，a），gn.tp（1，b））；
},
t:{
//转化
x:0,，
y:0，
sx:1，
sy:1
},
tp：功能（a、b）{
//变换点
返回O.mfl（a？b*gn.t.sy+gn.t.y:b*gn.t.sx+gn.t.x）+0.5；
},
测试程序集：功能（a、b）{
//点间变换距离
返回O.mfl（a？b*gn.t.sy:b*gn.t.sx）；
},
lt：功能（a，b）{
//排队
g、 lineTo（gn.tp（0，a），gn.tp（1，b））；
},
cp：函数（）{
//近路
g、 closePath（）；
},
填充：函数（）{
g、 填充（）；
},
行：函数（）{
g、 笔划（）；
},
弧：功能（a、b、c、d、e、f）{
g、 弧（gn.tp（0，a），gn.tp（1，b），c，d，e，f）；
},
rc：功能（a、b、c、d）{
//长方形
g、 直肠(
gn.tp（0，a）-0.5，
gn.tp（1，b）-0.5，
gn.tps（0，c），
gn.tps（1，d）
);
},
frc：功能（a、b、c、d）{
//填充矩形
g、 fillRect(
gn.tp（0，a）-0.5，
gn.tp（1，b）-0.5，
gn.tps（0，c），
gn.tps（1，d）
);
},
st：功能（a、b、c、d）{
gn.t.x=a；
gn.t.y=b；
gn.t.sx=c；
gn.t.sy=d；
地膜厚度（1/O.min（c，d））；
},
cls:function（）{
证券及期货事务监察委员会（O.cols.white）；
gn.slc（O.cols.black）；
gn.frc（0,0,O.w,O.h）；
}
};
gn.cls（）；
返回gn；
},
init:function（）{
O.body.style.margin=“0px”；
O.body.style.padding=“0px”；
O.cols={
红色：O.rgb（1,0,0），
绿色：O.rgb（0,1,0），
蓝色：O.rgb（0,0,1），
白色：O.rgb（1,1,1），
黑色：O.rgb（0,0,0），
黄色：O.rgb（1,1,0），
浅蓝色：O.rgb（0,1,1），
紫色：O.rgb（1,0,1），
灰色：O.rgb（0.5,0.5,0.5）
};
O.w=O.wd.innerWidth；
O.h=O.wd.内部高度；
O.wh=O.w/2；
O.hh=O.h/2；
O.pih=O.pi/2；
O.pi2=O.pi*2；
主要（O）；
},
rf：功能（b、c）{
var a=新的XMLHttpRequest（）；
a、 打开（“get”，b，true）；
a、 onreadystatechange=函数（）{
a、 readyState！=4 | | |（a.status&&a.status！=200）| | c（a.responseText）；
};
a、 send（）；
},
ca：功能（a，b）{
返回（数组（a）+.split（“，”）.map（b）；
},
pad：功能（a、b、c）{
返回（a+=“”）。长度>=b？a：数组（b-a.length+1）。连接（c）+a；
},
rgb：功能（a、b、c）{
返回“#”+O.rgbf（a）+O.rgbf（b）+O.rgbf（c）；
},
rgbf：功能（a）{
返回O.pad（O.mro（a*255）.toString（16），2，“0”）；
},
科尔斯：空，
ael：功能（a、b）{
O.wd.增补列表器（a、b）；
},
rel：功能（a，b）{
O.wd.移除通风列表器（a、b）；
},
w：空，
h:空，
皇家空军：职能（a）{
//请求动画帧
O.wd.requestAnimationFrame（a）；
},
兰德：功能（a）{
//随机整数
返回O.mfl（O.mra*a）；
},
randf：函数（a）{
//随机浮动
返回O.mra（）*a；
},
rq：功能（a、b）{
//要求
O.rf（“/”+a+“/1.js”），函数（a）{
评估（a）；
b（）；
});
},
wh:null，
hh:null，
pi:Math.pi，
pih:null，
pi2:null，
漏磁：功能（a）{
//数学楼层
返回数学楼层（a）；
},
mra:function（）{
//数学随机
返回Math.random（）；
},
mro：功能（a）{
//数学回合
返回数学。第四轮（a）；
},
mce：功能（a）{
//数学单元
return Math.ceil（a）；
},
最大值：功能（a、b）{
返回Math.max（a，b）；
},
最小值：功能（a、b）{
返回Math.min（a，b）；
}
};
O.init（）；
主功能（O）{
var-gridX=32；
var-gridY=32；
变量坐标、压力、cx、cy、g；
（功能（）{
g=O.cc（）；
坐标=[]；
按下=0；
O.ael（“键控”，ON键控）；
O.ael（“mousedown”，onMouseDown）；
O.ael（“mousemove”，onMouseMove）；
O.ael（“mouseup”，onMouseUp）；
})();
函数onKeyDown（a）{
开关（a.keyCode）{
案例13：
开关（+提示（“0-清除\n1-获取JSON\n2-粘贴JSON”））{
案例0：
coords.length=0；
g、 cls（）；
打破
案例1：
提示符（“，JSON.stringify（coords））；
打破
案例2：
coords=JSON.parse（提示符（“PaseJSON:”）；
drawCoords（）；
打破
}
打破
}
}
函数onMouseDown（a）{
如果（！a.按钮）{
cx=snapToGrid（0，a.clientX）；
cy=snapToGrid（1，a.clientY）；
按下=1；
}
}
移动鼠标的功能（a）{
变量x，y；
如果（按下）{
x=snapToGrid（0，a.clientX）；
y=snapToGrid（1，a.clientY）；
如果（x！=cx）{
g、 bp（）；
g、 mt（cx，cy）；
g、 lt（x，cy）