Изображение с помехами при помощи HTML5 Canvas

Изображение с помехами при помощи HTML5 Canvas

От автора: В течение уже некоторого времени я изучаю, как можно создать изображение с помехами при помощи веб-технологий html5. В canvas API можно изменять растровые изображения по пикселям, но вчера я осознал, что с помощью довольно простой функции API можно создавать изображения с эффектом графического мусора.

Перенос изображений в Canvas

Начнем мы с тега canvas, как показано в CodePen демо:

<canvas id="portrait" width="200" height="400"></canvas>

Обратите внимание, что изначальные размеры тега произвольные. Они будут изменяться при помощи JavaScript. И код CSS:

body { 
  background: #000;
}
canvas { 
  display: block;
  margin: 0 auto;
  width: 60%;
}

JS код для рисования в canvas делится на два общих шага. Первым делом мы загружаем соответствующее растровое изображение:

var img = new Image();
img.src = "nastya.jpg";
img.onload = function() {
  draw(this);
};

После полной загрузки изображения мы отрисовываем его на полотно при помощи функции draw. Сначала мы проверяем, чтобы размер полотна совпадал с размером загружаемого изображения:

function draw(img) {
  var portrait = document.getElementById("portrait");
  var canvas = portrait.getContext("2d");
  portrait.setAttribute("width", img.width);
  portrait.setAttribute("height", img.height);
  ...
}

Если все нормально, изображение ляжет на canvas один к одному. То есть высота и ширина изображения заполнят такую же по размеру область на холсте, начиная от левого верхнего угла (0, 0) до нижнего правого. Синтаксис будет выглядеть примерно так:

canvas.drawImage(img, 0, 0, img.width, img.height, 
    0, 0, portrait.width, porttrait.height);

Пиксели изображения ложатся на холст один к одному, однако примененный CSS код сделает так, что canvas и изображение будут адаптивно подстраиваться под высоту и ширину окна браузера.

Тем не менее, нигде не сказано, что нужно брать все изображение и переносить его на холст целиком сразу. Мы можем нарезать изображение на полоски и выкладывать их на canvas со смещенным горизонтальным значением. Для этого нам понадобится две переменные: количество полосок и максимальное горизонтальное смещение. Код ниже – продолжение функции draw:

var verticalSlices = Math.round(img.height / 20);
var maxHorizOffset = 20;

Полоски отрисовываются внутри цикла for:

for (var i = 0; i < verticalSlices; i++)  {
    var horizOffset = getRandom(-Math.abs(maxHorizOffset), maxHorizOffset);
    canvas.drawImage(img, 
    0, 
    i * verticalSlices, 
    img.width, 
    i * verticalSlices + verticalSlices, 
    horizOffset, i * verticalSlices, 
    img.width, 
    i * verticalSlices + verticalSlices);
}

Переменная horizOffset вызывает другую функцию для вычисления случайного значения в пределах двух чисел. Заметьте, что вызов функции может вернуть отрицательное значение, что сдвинет полоски изображения влево:

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

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

Заключение

Различные вариации данной техники можно использовать динамически: к примеру, можно наложить на canvas два потока HTML5 видео и сделать сравнение «до-после».

По иронии судьбы, большая часть эффектов позаимствована из аналоговых технологий типа потери сигнала на старых телевизорах, но переведена в цифру. В следующих статьях я покажу еще больше похожих эффектов, которые выполнены при помощи веб-технологий.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree