changeImgToGrey

changeImgToGrey

Создай новый проект

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

Начинаем с нашего любимого HTML

Привычные действия

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

Немного CSS

Привычные действия

Добавь элементу «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)