Я пытаюсь создать веб-приложение, в котором люди могут пометить часть изображения и изменить различные части изображения (в соответствии с уже имеющимися в магазине элементами), как показано на приведенной ниже ссылке на видео.
Iнужно предложение на Javascript / HTML / любая технология о том, как пометить объект (стена в случае моего приложения) на изображении.
Я погуглил, но нашел только полнофункциональный редактор изображений или некоторые случайные js, которые я не делаюнужно. вот так:
var O = {
doc: document,
body: document.body,
wd: window,
ce: function(a, b) {
return a.appendChild((a = O.doc.createElement(b))), a;
},
cc: function() {
var c, g, gn;
c = O.ce(O.body, "canvas");
c.width = O.w;
c.height = O.h;
g = c.getContext("2d");
gn = {
sfc: function(a) {
// Set fill color
g.fillStyle = a;
},
slc: function(a) {
// Set line color
g.strokeStyle = a;
},
slw: function(a) {
// Set line width
g.lineWidth = a;
},
bp: function() {
// Begin path
g.beginPath();
},
mt: function(a, b) {
// Move to
g.moveTo(gn.tp(0, a), gn.tp(1, b));
},
t: {
// Transform
x: 0,
y: 0,
sx: 1,
sy: 1
},
tp: function(a, b) {
// Tranform point
return O.mfl(a ? b * gn.t.sy + gn.t.y : b * gn.t.sx + gn.t.x) + 0.5;
},
tps: function(a, b) {
// Tranform distance between points
return O.mfl(a ? b * gn.t.sy : b * gn.t.sx);
},
lt: function(a, b) {
// Line to
g.lineTo(gn.tp(0, a), gn.tp(1, b));
},
cp: function() {
// Close path
g.closePath();
},
fill: function() {
g.fill();
},
line: function() {
g.stroke();
},
arc: function(a, b, c, d, e, f) {
g.arc(gn.tp(0, a), gn.tp(1, b), c, d, e, f);
},
rc: function(a, b, c, d) {
// Rectangle
g.rect(
gn.tp(0, a) - 0.5,
gn.tp(1, b) - 0.5,
gn.tps(0, c),
gn.tps(1, d)
);
},
frc: function(a, b, c, d) {
// Fill rectangle
g.fillRect(
gn.tp(0, a) - 0.5,
gn.tp(1, b) - 0.5,
gn.tps(0, c),
gn.tps(1, d)
);
},
st: function(a, b, c, d) {
gn.t.x = a;
gn.t.y = b;
gn.t.sx = c;
gn.t.sy = d;
gn.slw(1 / O.min(c, d));
},
cls: function() {
gn.sfc(O.cols.white);
gn.slc(O.cols.black);
gn.frc(0, 0, O.w, O.h);
}
};
gn.cls();
return gn;
},
init: function() {
O.body.style.margin = "0px";
O.body.style.padding = "0px";
O.cols = {
red: O.rgb(1, 0, 0),
green: O.rgb(0, 1, 0),
blue: O.rgb(0, 0, 1),
white: O.rgb(1, 1, 1),
black: O.rgb(0, 0, 0),
yellow: O.rgb(1, 1, 0),
lightBlue: O.rgb(0, 1, 1),
purple: O.rgb(1, 0, 1),
gray: O.rgb(0.5, 0.5, 0.5)
};
O.w = O.wd.innerWidth;
O.h = O.wd.innerHeight;
O.wh = O.w / 2;
O.hh = O.h / 2;
O.pih = O.pi / 2;
O.pi2 = O.pi * 2;
main(O);
},
rf: function(b, c) {
var a = new XMLHttpRequest();
a.open("get", b, true);
a.onreadystatechange = function() {
a.readyState != 4 || (a.status && a.status != 200) || c(a.responseText);
};
a.send();
},
ca: function(a, b) {
return (Array(a) + "").split(",").map(b);
},
pad: function(a, b, c) {
return (a += "").length >= b ? a : Array(b - a.length + 1).join(c) + a;
},
rgb: function(a, b, c) {
return "#" + O.rgbf(a) + O.rgbf(b) + O.rgbf(c);
},
rgbf: function(a) {
return O.pad(O.mro(a * 255).toString(16), 2, "0");
},
cols: null,
ael: function(a, b) {
O.wd.addEventListener(a, b);
},
rel: function(a, b) {
O.wd.removeEventListener(a, b);
},
w: null,
h: null,
raf: function(a) {
// Request animation frame
O.wd.requestAnimationFrame(a);
},
rand: function(a) {
// Random integer
return O.mfl(O.mra * a);
},
randf: function(a) {
// Random float
return O.mra() * a;
},
rq: function(a, b) {
// Require
O.rf("/" + a + "/1.js", function(a) {
eval(a);
b();
});
},
wh: null,
hh: null,
pi: Math.PI,
pih: null,
pi2: null,
mfl: function(a) {
// Math floor
return Math.floor(a);
},
mra: function() {
// Math random
return Math.random();
},
mro: function(a) {
// Math round
return Math.round(a);
},
mce: function(a) {
// Math ceil
return Math.ceil(a);
},
max: function(a, b) {
return Math.max(a, b);
},
min: function(a, b) {
return Math.min(a, b);
}
};
O.init();
function main(O) {
var gridX = 32;
var gridY = 32;
var coords, pressed, cx, cy, g;
(function() {
g = O.cc();
coords = [];
pressed = 0;
O.ael("keydown", onKeyDown);
O.ael("mousedown", onMouseDown);
O.ael("mousemove", onMouseMove);
O.ael("mouseup", onMouseUp);
})();
function onKeyDown(a) {
switch (a.keyCode) {
case 13:
switch (+prompt("0 - Clear\n1 - Get JSON\n2 - Paste JSON")) {
case 0:
coords.length = 0;
g.cls();
break;
case 1:
prompt("", JSON.stringify(coords));
break;
case 2:
coords = JSON.parse(prompt("Pase JSON:"));
drawCoords();
break;
}
break;
}
}
function onMouseDown(a) {
if (!a.button) {
cx = snapToGrid(0, a.clientX);
cy = snapToGrid(1, a.clientY);
pressed = 1;
}
}
function onMouseMove(a) {
var x, y;
if (pressed) {
x = snapToGrid(0, a.clientX);
y = snapToGrid(1, a.clientY);
if (x != cx) {
g.bp();
g.mt(cx, cy);
g.lt(x, cy);
g.line();
cx = x;
coords.push(cx, cy);
}
if (y != cy) {
g.bp();
g.mt(cx, cy);
g.lt(cx, y);
g.line();
cy = y;
coords.push(cx, cy);
}
}
}
function onMouseUp(a) {
if (!a.button) {
pressed = 0;
coords.push(null);
}
}
function snapToGrid(a, b) {
return a ? O.mro(b / gridY) * gridY : O.mro(b / gridX) * gridX;
}
function drawCoords() {
var a = coords.slice(),
q;
g.cls();
g.bp();
g.mt(a.shift(), a.shift());
while (a.length) {
if ((q = a.shift()) == null) {
g.mt(a.shift(), a.shift());
} else {
g.lt(q, a.shift());
}
}
g.line();
}
}
И вот, я увидел Canvas. Нужно ли учить холст? Раньше я такого рода работой не выполнял, поэтому, учитывая это, буду признателен за любые предложения.
Мне нужно отметить изображение как эту ссылку здесь. https://www.youtube.com/watch?v=DTXuP_EJx74