★ Рубрика: Кодинг

Инвертируем цвета на картинке

В этом примере показано, как на канве можно поменять цвета в картинке на противоположные, то есть выполнить инвертирование цветов. Понятно, требуется поддержка HTML5 и скриптов вашим браузером. Полный код примера приведен ниже.

<!DOCTYPE html>
<html>
<body>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
document.getElementById("scream").onload = function() {
 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 var img = document.getElementById("scream");
 ctx.drawImage(img, 0, 0);
 var imgData = ctx.getImageData(0, 0, c.width, c.height);
 // invert colors
 var i;
 for (i = 0; i < imgData.data.length; i += 4) {
 imgData.data[i] = 255 - imgData.data[i];
 imgData.data[i+1] = 255 - imgData.data[i+1];
 imgData.data[i+2] = 255 - imgData.data[i+2];
 imgData.data[i+3] = 255;
 }
 ctx.putImageData(imgData, 0, 0);
};
</script>

</body>
<⁄html>

И вот результат применения скрипта для инвертирования цветов:

The Scream

Похожие публикации: HTML5, JavaScript

Войти и комментировать [ Вход | Регистрация ]