Статьи

Создание невероятного HTML5-приложения Canvas для онлайн-улучшения изображений

Январь 7, 2019

Сегодня мы продолжаем примеры холста HTML5, которые, я уверен, все еще интересны для вас. Сегодня мы сделаем приложение для настройки цвета изображения (изменение цвета фото / оттенки серого). Мы сможем сделать фотографию темнее, светлее, изменить плотность каждого канала (RGB), сделать изображение в градациях серого (и при этом продолжать играть с цветами).

Вот наши демонстрационные и загружаемые пакеты:

Live Demo

скачать в упаковке

Хорошо, загрузите файлы примеров и давайте начнем кодировать!

Шаг 1. HTML

Вот весь HTML-код моей демонстрации:

index.html

<!DOCTYPE html>
<html lang="en" >
<head>
<link href="css/main.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/script.js"></script>

</head>
<body>
    <div class="example">
        <h3><a href="http://www.script-tutorials.com/html5-canvas-image-effects-app/">HTML5 Canvas Image Effects demo (Changing photo colors / Grayscale) | Script Tutorials</a></h3>

        <div class="column1">
            <input type="button" onclick="resetToGrayscale()" value="Grayscale" /><br />
            <input type="button" onclick="resetToColored()" value="Colored" /><br />
            <input type="button" onclick="reset()" value="Reset" /><br />
            <input type="button" onclick="changeGrayValue(0.1)" value="Lighter" /><br />
            <input type="button" onclick="changeGrayValue(-0.1)" value="Darker" /><br />
            Red: <input type="button" onclick="changeColorValue('er', 10)" value="More" />
            <input type="button" onclick="changeColorValue('er', -10)" value="Less" /><br />
            Green: <input type="button" onclick="changeColorValue('eg', 10)" value="More" />
            <input type="button" onclick="changeColorValue('eg', -10)" value="Less" /><br />
            Blue: <input type="button" onclick="changeColorValue('eb', 10)" value="More" />
            <input type="button" onclick="changeColorValue('eb', -10)" value="Less" />
        </div>
        <div class="column2">
            <canvas id="panel" width="520" height="700"></canvas>
        </div>
        <div style="clear:both;"></div>
    </div>
</body>
</html>

Довольно маленький, не правда ли? Здесь вы можете видеть (в левом столбце) различные кнопки (элементы управления) и сам объект Canvas.

Шаг 2. CSS

Вот используемые стили CSS.

CSS / main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:750px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius: 3px}

h3 {
    text-align:center;
}

.column1 {
    float:left;
    padding-right: 10px;
    text-align:right;
    width:185px;
}
.column2 {
    float:left;
    width:550px;
}

input[type=button] {
    margin:5px;
}

Шаг 3. JS

Теперь — самое интересное — его внутренняя функциональность (скрипт HTML5 Canvas).

JS / script.js

var canvas;
var context;
var p1 = 0.99;
var p2 = 0.99;
var p3 = 0.99;
var er = 0; // extra red
var eg = 0; // extra green
var eb = 0; // extra blue
var func = 'colored'; // used function

window.onload = function() {
    canvas = document.getElementById('panel');
    context = canvas.getContext('2d');

    context.fillStyle = '#888888';
    context.fillRect(0, 0, 520, 700);

    var imgObj = new Image();
    imgObj.onload = function () {
        context.drawImage(imgObj, 10, 10, 500, 333); // Draw the image on the canvas
    }
    imgObj.src="images/01.jpg";
};

function Grayscale() {
    func = 'grayscale';
    var imgd = context.getImageData(10, 10, 500, 333);
    var data = imgd.data;
    for (var i = 0, n = data.length; i < n; i += 4) {
        var grayscale = data[i] * p1 + data[i+1] * p2 + data[i+2] * p3;
        data[i]   = grayscale + er; // red
        data[i+1] = grayscale + eg; // green
        data[i+2] = grayscale + eb; // blue
    }
    context.putImageData(imgd, 10, 353);
}

function Colored() {
    func = 'colored';
    var imgd = context.getImageData(10, 10, 500, 333);
    var data = imgd.data;
    for (var i = 0, n = data.length; i < n; i += 4) {
        data[i]   = data[i]*p1+er; // red
        data[i+1] = data[i+1]*p2+eg; // green
        data[i+2] = data[i+2]*p3+eb; // blue
    }
    context.putImageData(imgd, 10, 353);
}

function reset() {
    switch(func) {
        case 'grayscale': resetToGrayscale(); break;
        case 'colored': resetToColored(); break;
    }
}

function changeGrayValue(val) {
    p1 += val;
    p2 += val;
    p3 += val;

    switch(func) {
        case 'grayscale': Grayscale(); break;
        case 'colored': Colored(); break;
    }
}

function changeColorValue(sobj, val) {
    switch (sobj) {
        case 'er': er += val; break;
        case 'eg': eg += val; break;
        case 'eb': eb += val; break;
    }

    switch(func) {
        case 'grayscale': Grayscale(); break;
        case 'colored': Colored(); break;
    }
}

function resetToColored() {
    p1 = 1;
    p2 = 1;
    p3 = 1;
    er = eg = eb = 0;

    Colored();
}
function resetToGrayscale() {
    p1 = 0.3;
    p2 = 0.59;
    p3 = 0.11;
    er = eg = eb = 0;

    Grayscale();
}

Я надеюсь, что вы знаете основы работы с Canvas. Посмотрите, что я делаю на window.onload: я создаю новый Canvas, получаю 2d контекст для рисования, заполняю его фон и рисую на нем исходное изображение. И, когда мы нажимаем на наши элементы управления — мы играем с битами исходного изображения, и можем настроить цвет, яркость, а также можем сделать изображение в градациях серого.

Live Demo

скачать в упаковке

Вывод

Hope that you were happy to play with our scripts. Image processing, filters, effect – this is all very interesting. I’ll be glad to see your interesting comments. Good luck!

 

Source: http://www.script-tutorials.com/html5-canvas-image-effects-app/

34
Share: