Use a grayscale filter

Turn the picture gray

<script>
function loadImage(src) {
    
  const img = new Image();
  img.crossOrigin = 'anonymous';
  return new Promise((resolve) => {
    
    img.onload = () => {
    
      resolve(img);
    };
    img.src = src;
  });
}
const imageDataContext = new WeakMap();
//  Get pictures of  imageData  data 
function getImageData(img, rect = [0, 0, img.width, img.height]) {
    
  let context;
  if(imageDataContext.has(img)) context = imageDataContext.get(img);
  else {
    
    const canvas = new OffscreenCanvas(img.width, img.height);
    context = canvas.getContext('2d');
    context.drawImage(img, 0, 0);
    imageDataContext.set(img, context);
  }
  return context.getImageData(...rect);
}
//  Loop traversal  imageData  data 
function traverse(imageData, pass) {
    
  const {
    width, height, data} = imageData;
  for(let i = 0; i < width * height * 4; i += 4) {
    
    const [r, g, b, a] = pass({
    
      r: data[i] / 255,
      g: data[i + 1] / 255,
      b: data[i + 2] / 255,
      a: data[i + 3] / 255,
      index: i,
      width,
      height,
      x: ((i / 4) % width) / width,
      y: Math.floor(i / 4 / width) / height});
    data.set([r, g, b, a].map(v => Math.round(v * 255)), i);
  }
  return imageData;
}

  const canvas = document.getElementById('paper');
  const context = canvas.getContext('2d');
  (async function () {
    
    //  Loading images asynchronously 
    const img = await loadImage('https://p2.ssl.qhimg.com/d/inn/4b7e384c55dc/girl1.jpg');
    //  Get the  imageData  Data objects 
    const imageData = getImageData(img);
    //  Traverse  imageData  Data objects 
    traverse(imageData, ({
     r, g, b, a}) => {
     //  Grayscale each pixel 
      const v = 0.2126 * r + 0.7152 * g + 0.0722 * b;
      return [v, v, v, a];
    });
    //  to update canvas Content 
    canvas.width = imageData.width;
    canvas.height = imageData.height;
    context.putImageData(imageData, 0, 0);
  }());
  </script>