Saturate image where mouse is hovering-CodePudding

I'm trying to have an image on my website become saturated at the same location the mouse is. When the mouse moves the saturation effect goes with it, and the area previously hovered over becomes grayscale again. I'm thinking this effect could be accomplished using saturate(), however I haven't had any success with it. Additionally, I would like the effect to be circular without hard edges similar to this.

Example of what it would look like (orange arrow indicating where the mouse is).

Any help or insight would be appreciated, thanks!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content= "width=device-width, initial-scale=1.0" />     
    </head>
    
    <script>
        const size = 250;
        var radius = 30;
        var rad = Math.PI / 180;

        var canvas = document.querySelector("canvas")
        var ctx = canvas.getContext("2d");

        canvas.width = size;
        canvas.height = size;

        var image = new Image();
        image.onload = demo
        image.src = "https://picsum.photos/250"

        function draw_circle(x, y, radius) {
          ctx.clearRect(0, 0, size, size);
          ctx.drawImage(image, 0, 0); // image to change
          ctx.globalCompositeOperation = "saturation";
          ctx.beginPath();
          ctx.fillStyle = "hsl(0,100%,50%)"; // saturation at 100%
          ctx.arc(x, y, radius, 0, 360 * rad, false);
          ctx.fill()
          ctx.closePath();
          ctx.globalCompositeOperation = "source-over"; // restore default comp
        }


        function demo() {
        ctx.drawImage(image, 0, 0); // image to change
        
        canvas.addEventListener('mousemove', function(ev) {
          var cx = ev.offsetX
          var cy = ev.offsetY
          draw_circle(cx, cy, radius)
          })
        }
    </script>
    
    <canvas></canvas>
    
</html>

CodePudding user response：

Using a canvas we can try. Here's a start inspired by How can I adjust the huse, saturation, and lightness of in image in HTML5 Canvas?.

const size = 250;
var radius = 30;
var rad = Math.PI / 180;

var canvas = document.querySelector("canvas")
var ctx = canvas.getContext("2d");

canvas.width = size;
canvas.height = size;




var image = new Image();
image.onload = demo
image.src = "https://picsum.photos/250"

function draw_circle(x, y, radius) {
  ctx.clearRect(0, 0, size, size);
  ctx.drawImage(image, 0, 0); // image to change
  ctx.globalCompositeOperation = "saturation";
  ctx.beginPath();
  ctx.fillStyle = "hsl(0,100%,50%)"; // saturation at 100%
  ctx.arc(x, y, radius, 0, 360 * rad, false);
  ctx.fill()
  ctx.closePath();
  ctx.globalCompositeOperation = "source-over"; // restore default comp
}


function demo() {
  ctx.drawImage(image, 0, 0); // image to change
  
  canvas.addEventListener('mousemove', function(ev) {
    var cx = ev.offsetX
    var cy = ev.offsetY
    draw_circle(cx, cy, radius)
  })
}

<canvas></canvas>

CodePudding user response：

This is a simple answer (change the logic of the program as you want):

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.relative {
        position: relative;
        width: 200px;
        height: 150px;
      }

      .image {
        width: 100%;
        height: 100%;
      }
    </style>

    <script>
      const width = 50;
      const height = 50;

      function create() {
        const element = document.createElement("div");
        element.id = "filtered";
        element.style.width = `${width}px`;
        element.style.height = `${height}px`;
        element.style.borderRadius = "50%";
        element.style.position = "absolute";
        element.style.backgroundColor = "red";
        element.style.opacity = "0.2";
        element.style.zIndex = "2";

        return element;
      }

      function changePos(e) {
        x = e.clientX;
        y = e.clientY;

        let element = document.getElementById("filtered");

        if (!element) {
          element = create();
          document.getElementById("focusArea").appendChild(element);
        }

        element.style.left = `${x - width / 2}px`;
        element.style.top = `${y - height / 2}px`;
      }

      function removeElement() {
        if (document.getElementById("filtered")) {
          document.getElementById("filtered").remove();
        }
      }
    </script>
  </head>

  <body>
    <div
      id="focusArea"
      onm ouseleave="removeElement()"
      onm ousemove="changePos(event)"
      
    >
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png"
        
      />
    </div>
  </body>
</html>