Я пытаюсь убедиться, что при нажатии на изображение на нем появится круг. Тем не менее, когда я пытаюсь использовать код, подобный текущему, я не вижу изображения, сгенерированные моим кодом ниже. Я не совсем уверен, как это исправить или что делать.
Редактировать: Итак, я получил изображение и холст, которые нужно прикрепить к каждому элементу div. Однако каждое мое изображение, на которое вы нажимаете, активирует холст только на первом изображении. Например, если вы нажмете на изображение два и три, два холста 'будут заполнены на изображении один. Единственный способ удалить эти холсты - дважды щелкнуть мышью по области холста. Один раз за каждый раз, когда он был применен к другим изображениям. Это происходит только если cnvs.style.position = 'absolute'; включено. Если это закомментировано, холст соединится с нижней частью изображения, а не будет наложен.
document.body.onload = addElement;
function addElement() {
var i = 0;
// create a new div element
const imagePath = <?= json_encode($face) ?>;
// console.log(imagePath);
for (const image of imagePath) {
var id = `${image}`;
const img = document.createElement("img");
img.src = `/check/assets/img/${image}`;
img.classList.add("new");
const cnvs = document.createElement("canvas");
cnvs.classList.add("suiteiCanvas");
cnvs.style.left = img.offsetLeft + "px";
cnvs.style.top = img.offsetTop + "px";
var ctx = cnvs.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI, false);
ctx.lineWidth = 15;
ctx.strokeStyle = '#FF0000';
ctx.stroke();
var div = document.createElement("div");
div.id = id;
div.classList.add("image");
linebreak = document.createElement("br");
document.getElementById('suitei-slider').appendChild(div);
document.getElementById(image).appendChild(img);
document.getElementById(image).appendChild(cnvs);
cnvs.onclick = function() {
cnvs.style.display = 'none';
hdnName.value = null;
};
img.onclick = function() {
cnvs.style.display = '';
hdnName.value = img.id;
};
}
}
canvas.suiteiCanvas{
height: auto;
width: auto;
/* position: absolute;
display: 'none'; */
max-height: 200px;
max-width: 150px;
margin-left: 100px;
margin-right: 100px;
border:3px solid rgb(20, 11, 11);
}
img.new {
height: auto;
width: auto;
max-height: 200px;
max-width: 150px;
margin-left: 100px;
margin-right: 100px;
border:3px solid rgb(20, 11, 11);
}
<div class="multiple-items" id="suitei-slider"></div>
Спасибо за любую помощь!
Этот код я использую для справки
var img = document.getElementById("theImg");
var cnvs = document.getElementById("myCanvas");
var hdnName = document.getElementById("sendServ");
cnvs.style.position = "absolute";
cnvs.style.left = img.offsetLeft + "px";
cnvs.style.top = img.offsetTop + "px";
cnvs.style.display = 'none';
var ctx = cnvs.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI, false);
ctx.lineWidth = 15;
ctx.strokeStyle = '#FF0000';
ctx.stroke();
function draw(){
cnvs.style.display = '';
hdnName.value = img.id;
}
function remove() {
cnvs.style.display = 'none';
hdnName.value = null;
}
#draw-btn {
font-size: 14px;
padding: 2px 16px 3px 16px;
margin-bottom: 8px;
}
<img id='theImg' src='https://blogs.worldbank.org/sites/default/files/africacan/small_better_small.jpg' onclick='draw()'>
<canvas id='myCanvas' width='536px' height='536px' onclick="remove()"></canvas>
<input type="hidden" id="sendServ">