Canvas: работа с изображениями

4

Draw images

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

drawImage(img, dx, dy);
drawImage(img, dx, dy, dw, dh);
drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

При первом варианте.
Первый аргумент — сама картинка, второй и третий — координаты левого верхнего угла картинки.

При втором варианте.
Здесь мы видим дополнительные параметры dw и dh. Это ширина и высота картинки.

При третьем варианте есть еще 4 дополнительных параметра.
Они отвечают за маску.

clip example

sx и sy — это координаты левого верхнего угла маскирующего прямоугольника
sw и sh — это ширина и высота маскирующего прямоугольника

Пример использования.

let img = new Image();
    img.src = './regularshow.png';

    img.onload = () => {
        context.drawImage(img, 100, 100);
        context.drawImage(img, 100, 150, 100, 100);
        context.drawImage(img, 40, 100, 150, 250, 250, 50, 250, 400);
    }

Рисование по спрайтам

Пример

    const pokemonTile = new Image();
    pokemonTile.src = './pokemons.png';
    pokemonTile.onload = () => {
        //pikachu
        context.drawImage(pokemonTile, 0, 0, 200, 200, 0, 0, 200, 200);
        // Squirtile
        context.drawImage(pokemonTile, 400, 180, 200, 200, 200, 0, 200, 200);
        // Bulbasaur
        context.drawImage(pokemonTile, 1000, 0, 200, 200, 400, 0, 200, 200);
    }

Filtering (Фильтры на изображения)

Как же мы будем манипулировать пикселями?

HTML5 предоставляет некоторые функции для работы с данными изображений.
* createImageData() — creates a new, blank ImageData object (Создает новый, пустой объект ImageData)
* getImageData() — Returns an ImageData object that copies the pixel data for the specified rectagngle on (возвращает объект данных изображения, который копирует данные пикселей)
* putImageData() — Puts the image data (from a specified ImageData object) back onto the canvas (Кладем данные изображения (из указанного объекта данных изображения) обратно на холст);

Сначала мы позьмем данные изображения с точки зрения пискселей в массив и потом мы будем манипулировать ими, после чего мы положим эти данные обратно на холст.

getImageData принимает четыре параметра: первые два — координаты левого верхнего угла картинки. А последние два — это ширина и высота картинки.

putImageData принимает три основных параметра: первый — imageData, остальные два — x и y — координаты левого верхнего угла изображения.

Получая imageData — мы получаем массив пикселей rgba. В массиве каждые четыре цифры — это и есть значения пикселя. Поэтому для манипуляции с ними их можно сгруппировать. А затем попиксельной обработкой можно делать с ними всё что угодно.

let flowerImage = new Image();
    flowerImage.src = './flower.jpg';

    flowerImage.onload = () => {
        context.drawImage(flowerImage, 130, 25);

        let imageData = context.getImageData(130, 25, 640, 400);
        console.log(imageData);

        for (let i = 0; i < imageData.data.length; i+=4) {

            //negative filter
            /*
            imageData.data[i] = 255 - imageData.data[i];
            imageData.data[i+1] = 255 - imageData.data[i+1];
            imageData.data[i+2] = 255 - imageData.data[i+2];
            //imageData.data[i+3] = 240;
            */

            //black and white filter
            let average = (imageData.data[i] + imageData.data[i+1] + imageData.data[i+2]) / 3;
            imageData.data[i] = average;
            imageData.data[i+1] = average;
            imageData.data[i+2] = average;
            //imageData.data[i+3] = 240;
        }

        context.putImageData(imageData, 130, 25);

    }

You might also like More from author

Leave A Reply

Your email address will not be published.