Как сделать изображение ч/б?

Question

[kirillleogky]

У меня в сторадже (localStorage.getItem('saveImage')) есть изображение цветное и мне надо взять из стораджа фото и сделать его черно-белым.

В примере localStorage.getItem('saveImage') ЭТО - " https://images.unsplash.com/photo-1568097379042-34... "

function drawImageOnCanvas(size, reduct, reductPixel) {
  canvas.width = size;
  canvas.height = size;
  
  const colorImage = localStorage.getItem('saveImage'); <---------------- цветное изображение
  const img = new Image();
  img.crossOrigin = 'Anonymous';
  img.src = ЗДЕСЬ ЛИНК ДОЛЖЕН БЫТЬ НА ЧЕРНО-БЕЛОЕ ИЗОБРАЖЕНИЕ
  img.onload = () => {
      ctx.drawImage(img, 0, 0, size, size);
  };
  canvasSize = size;
  reductionNumber = reduct;
  reductionPixelNumber = reductPixel;
}

Как мне сделать его черно белым, сохранить в local storage и поместить на канвас?

Answer 1

[twobomb]

function drawImageOnCanvas(size, reduct, reductPixel) {
  canvas.width = size;
  canvas.height = size;
  
  const colorImage = localStorage.getItem('saveImage');/// <---------------- цветное изображение
      ctx.drawImage(colorImage, 0, 0, size, size);
      ctx.globalCompositeOperation='color';
      ctx.fillStyle = "white";
      ctx.globalAlpha = 1;
      ctx.fillRect(0, 0, size,size);

  canvasSize = size;
  reductionNumber = reduct;
  reductionPixelNumber = reductPixel;
}