0

CSS effect I want to achieve

css

img {
    filter: sepia(1) saturate(4) hue-rotate(-42deg) invert(100%) grayscale(70%);
}

How does canvas implement the filter?This may require some knowledge of computer vision


  const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    const image = new Image();
    image.src = "./1.jpg";
    image.onload = function () {
      context.drawImage(image, 0, 0, canvas.width, canvas.height);
      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
      const data = imageData.data;

      for (let i = 0; i < data.length; i += 4) {
       // What should I do with this piece of code
       // data[i] = 255 - data[i];
       // data[i + 1] = 255 - data[i + 1];
       // data[i + 2] = 255 - data[i + 2];
      }
      context.putImageData(imageData, 0, 0);
    }
Dasheng
  • 67
  • 6
  • CSS does not affect/change the content in any way, if you expect that applying the CSS to an image you'll get a processed image, as in Photoshop, then you must know that this is not how it works. CSS operates with the content on the screen at hardware level not software. – n-- Oct 03 '22 at 08:42
  • I don't understand why you are inverting the colors. If you want the filter effect have you investigated filter on a canvas context (nothing to do with CSS, though it does use the same sort of values)? – A Haworth Oct 03 '22 at 08:54

0 Answers0