Від автора: вже протягом деякого часу я вивчаю, як можна створити зображення з перешкодами за допомогою веб-технологій html5. В canvas API можна змінювати растрові зображення в пікселях, але вчора я усвідомив, що з допомогою досить простої функції API можна створювати зображення з ефектом графічного сміття.
Перенесення зображень в Canvas
Почнемо ми з тега canvas, як показано в CodePen демо:
Зверніть увагу, що початкові розміри тега довільні. Вони будуть змінюватися за допомогою 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 відео і зробити порівняння «до-після».
За іронією долі, велика частина ефектів запозичена з аналогових технологій типу втрати сигналу на старих телевізорах, але переведена в цифру. У наступних статтях я покажу ще більше схожих ефектів, які виконані за допомогою веб-технологій.
