Как создать схему для изображения? ⇐ Javascript

[Anonymous]

Я сейчас использую CSS, HTML и реагировать. Я пытаюсь сделать мой пользовательский интерфейс взаимодействовать, позволяя пользователям парить над изображением, и контур объекта будет выделен. Я искал несколько потоков о том, как это сделать, но безрезультатно. Я снял фон каждого изображения, но все же по какой-то причине, когда я выделяю очертания, он переоценка фона в зеленый оттенок. Я не знаю, как это делает фильтр, когда я снял фон изображения. Изображение - это файл PNG. < /P>
Вот что я пытаюсь сделать
, как это должно выглядеть < /p>
Вот что на самом деле произошло:
как на самом деле выглядит < /p>
Я пытался просматривать прошлые потоки, но они не решают проблему.

Код: Выделить всё

html {
background: gray;
height: 100vh;
display: grid;
place-items: center;
overflow: hidden;
}

img {
user-select: none;
height: 500px;
width: 500px;
}

.image-w-bg {
filter: drop-shadow(5px 0 0 green)
drop-shadow(0 5px 0 green)
drop-shadow(-5px 0 0 green)
drop-shadow(0 -5px 0 green);
}
< /code>
Вот где я вставил изображение в страницу:
return 
[img]{designImage} alt=[/img]
;

Подробнее здесь: https://stackoverflow.com/questions/795 ... r-an-image