Как я могу изменить яркость только части изображения (html / css / js)?

Question

У меня есть изображение с тегами внизу, которые соответствуют различным частям изображения. Например, изображение может быть собакой, и одним из тегов является «нос», который соответствует части изображения вокруг носа собаки. Когда пользователь наводит курсор на метку, я хочу, чтобы яркость вокруг этой соответствующей части изображения увеличивалась. Как я могу это сделать?

function fixLabel(c) {
  var x_coor = document.getElementById('x').textContent;
  var y_coor = document.getElementById('y').textContent;

  var x2_coor = document.getElementById('x2').textContent;
  var y2_coor = document.getElementById('y2').textContent;

  var width = document.getElementById('w').textContent;
  var height = document.getElementById('h').textContent;

  var tag = document.createElement('input'); // Create a `input` element,
  tag.setAttribute('type', 'text'); // Set it's `type` attribute,
  tag.setAttribute('name', 'loc:' + round_2_decimals(x_coor) + "-" + round_2_decimals(y_coor) + "-" +
    round_2_decimals(x2_coor) + "-" + round_2_decimals(y2_coor) + "-" + round_2_decimals(width) +
    "-" + round_2_decimals(height));

  /**
   *Here's the area: How do I attach a mouseover function so the image's 
   *brightness increases whenever I hover over the tag?
   */
  tag.onmouseover = function() {};

  var br = document.createElement('br'); // Create a `br` element,
  var button_div = document.getElementById('fix_label_area');
  button_div.appendChild(br);
  button_div.appendChild(tag);
  button_div.appendChild(br);
};

<div>
  <p id='x'></p>
  <p id='y'></p>
  <p id='x2'></p>
  <p id='y2'></p>
  <p id='w'></p>
  <p id='h'></p>
  <br/>
  <button id='fix_label' onclick="fixLabel()">Fix Label Here</button>
</div>

<form action="" method="POST" id="canvas">
  <div id='img_area'>
    <img src="someImageFile.jpg" id="imageId" width="350" height="350" />
  </div>
  <div id='label_area'>
    <input type="submit" name="submit" value="Label" id='input'>
  </div>
  <div id='fix_label_area'></div>
</form>

Answer 1

Лично Canvas и SVG более мощные, но вы можете использовать CSS, чтобы обрезать круг, и непрозрачность, чтобы затемнить оригинал. Но вам нужно проверить поддержку браузера , чтобы убедиться, что она охватывает нужные вам браузеры.

div.holder {
  position: relative;
}

img.main {
  opacity: .4;
}

img.circle {
    position: absolute;
    clip-path: circle(50px at 405px 135px);
}

<div class="holder">
  <img class="circle" src="https://placedog.net/500" />
  <img class="main" src="https://placedog.net/500" />
</div>