changeImgToGrey

Зайди на сайт https://repl.it/ и создай новый проект

Добавляем тег «canvas» в элемент «body».

Добавь элементу «canvas» рамку.

Создай переменную «canv» и присвой ей выбранный элемент «canvas». Сделай так, чтобы элемент «canvas» занимал весь экран редактора. Создай переменную «c» и присвой ей элемент «canvas» с методом «getContext("2d")».

Создай переменную «img» и присвой ей конструкцию new Image()

Воспользуйся вот такой конструкцией: img.src и присвой ей "".

После этого перейди на сайт: https://www.base64-image.de/

Данный ресурс поможет нам сконвертировать наше изображение в специальный формат. Это нужно для манипуляции цветами картинки.

Выбери какую-нибудь фотографию или картинку.

Скачайте картинку себе на компьютер. Для этого нажмите правой кнопкой мыши на картинку и выберите пункт «Сохранить картинку как». После этого нажмите «Сохранить»

Загрузить эту картинку на сайт. Для этого перейдите обратно на https://www.base64-image.de/. Нажмите на кнопку «OR CLICK HERE»

Выберите скаченную фотографию в открывшимся меню.

После этого нажмите на кнопку «Открыть».

Выбери пункт «show code».

Выбери пункт «copy to clipboard».

Вставляем данный код в скобки у конструкции «img.src»

Добавляем слушатель событий переменной «img». Укажи у слушателя параметры: "load", function(){}

Добавь конструкцию: c.drawImage(img, 0, 0, canv.width, canv.height);

Создай переменную «scanImg» и присвой ей конструкцию: c.getImageData(0, 0, canv.width, canv.height)

Создай переменную «scanData» и присвой ей конструкцию: scanImg.data

Создаем цикл со счётчиком. Указываем ему вот такое условие: i < scanData.length

Сделай шаг цикла равным четырем

Создай переменную «averageNumber» и присвой ей вот такую конструкцию:

(scanData[i] + scanData[i + 1] + scanData[i + 2]) / 3

Вставь в свой код вот такую конструкцию:

 scanData[i] = averageNumber 

      scanData[i + 1] = averageNumber 

      scanData[i + 2] = averageNumber

Выйди из тела цикла. Добавь конструкцию:

scanImg.data = scanData

Добавь конструкцию:

  c.putImageData(scanImg, 0, 0)