Изменение цвета одной части изображения с помощью выборочной палитры

Question

Итак, я пытаюсь выяснить, как выбрать одну часть изображения JPG / SVG (я использую SVG) и поместить выборочную палитру, чтобы с её помощью изменить каждую часть изображения другим цветом. Я искал, но не нашел подходящего решения.
У меня есть пара изображений SVG, и мне нужен пример, по крайней мере, шаблон палитры.

Вопрос такой:

Как выделить 1 часть изображения
Как изменить цвет по одной части изображения

Мне нужно использовать палитру для пользователя, который мог бы изменить цвет любой части изображения по своему усмотрению.

Это пример:

_{Свободный перевод вопроса Changing color of one part of an image using selective palette от участника @Jan Tuđan.}

Answer 1

Вот простой пример того, как вы можете выбрать цвет и использовать его для изменения цвета элемента SVG.
Код должен быть довольно простым для понимания.

let currentSelectedColour = "red";

// Для каждой кнопки палитры...
document.querySelectorAll(".palette button").forEach(btn => {
  // ... добавить обработчик кликов, который устанавливает текущий цвет палитры
  btn.addEventListener("click", evt => {
    // dataset.colour - это значение атрибута data-color.
    currentSelectedColour = evt.target.dataset.colour;
    // Обновите поле «Current colour», чтобы отображалось это название цвета.
    document.getElementById("selectedColour").textContent = currentSelectedColour;
  });
});

// Для каждого элемента в SVG...
document.querySelectorAll("circle, rect").forEach(shape => {
  // ... добавить обработчик щелчка, который устанавливает заливку в текущий выбранный цвет
  shape.addEventListener("click", evt => {
    evt.target.setAttribute("fill", currentSelectedColour);
  });
});

svg circle,
svg rect {
   stroke: black;
}

div {
  margin: 3em 0;
}

<svg width="400" viewBox="0 0 400 100">
  <circle cx="50" cy="50" r="45" fill="linen"/>
  <rect x="110" y="10" width="80" height="80" fill="linen"/>
  <circle cx="250" cy="50" r="45" fill="linen"/>
  <rect x="310" y="10" width="80" height="80" fill="linen"/>
</svg>

<div class="palette">
  <button type="button" data-colour="red">Red</button>
  <button type="button" data-colour="orange">Orange</button>
  <button type="button" data-colour="yellow">Yellow</button>
  <button type="button" data-colour="green">Green</button>
  <button type="button" data-colour="blue">Blue</button>
  <button type="button" data-colour="violet">Violet</button>
</div>

<div>
  Current colour is: <span id="selectedColour">red</span>
</div>

Комментарии:

@Jan Tuđan Это очень полезно! Но я обновил свой пост и хочу нарисовать что-то вроде этого. Вы можете мне с этим помочь?

@Paul LeBeau Пока ваше изображение является SVG, мой код должен работать. Под SVG я имею в виду, что он состоит из векторных фигур, таких как прямоугольники и элементы <path>. Если вам нужно, чтобы он работал с растровым изображением, например PNG или JPEG, вам, вероятно, потребуется решение на основе Canvas API.

_{Свободный перевод ответа от участника @Paul LeBeau.}

БЛОГ НА HUSL

Изменение цвета одной части изображения с помощью выборочной палитры

Ответы (1 шт):