Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Апрель » 2 » Эффекты HTML5 Image – Emboss (тиснения изображения)


19:39
Эффекты HTML5 Image – Emboss (тиснения изображения)

Эффекты HTML5 Image – Emboss (тиснения изображения)


Сегодня мы продолжаем рассматривать HTML5 с применением фильтров к изображению, сегодня я хотел бы поделиться с вами способом нанесения эффекта тиснения к изображениям. Это довольно сложный способ, но я уверен, что вы можете повторить его. В нашей демо вы можете работать с различными изображениями, нажав на кнопку «Применить эффект», а также мы можем «экспортировать» наш результат на элемент изображения (<img>).

СМОТРЕТЬ ДЕМО                    СКАЧАТЬ ИСХОДНИК


 

Шаг 1. HTML Markup

Это разметка нашей демонстрационной страницы. 

index.html

<!DOCTYPE html>

<html lang="en" >

    <head>

        <meta charset="utf-8" />

        <title>HTML5 Image Effects - Emboss | Script Tutorials</title>

        <link href="css/main.css" rel="stylesheet" type="text/css" />

        <script src="https://www.google.com/jsapi"></script>

        <script>

            google.load("jquery", "1.7.1");

        </script>

        <script src="js/script.js"></script>

    </head>

    <body>

        <header>

            <h2>HTML5 Image Effects - Emboss</h2>

            <a href="http://www.script-tutorials.com/html5-image-effects-emboss/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>

        </header>

        <div id="container" class="container">

            <table cellspacing=0>

                <tr>

                    <td><p>Canvas Object &lt;CANVAS&gt;</p></td>

                    <td><p>Image Object &lt;IMG&gt;</p></td>

                </tr>

                <tr>

                    <td><canvas id="source" width="500" height="500"></canvas><div id="next" class="button">Next image</div></td>

                    <td><img id="img" src="images/button.png" /></td>

                </tr>

                <tr>

                    <td><div id="emboss" class="button">Apply Emboss Effect</div></td>

                    <td><div id="toImage" class="button">To Image</div></td>

                </tr>

            </table>

        </div>

    </body>

</html>

В основном – она содержит  только один объект холст, одно изображение и три "кнопки" (DIV элементов).

Шаг 2. CSS

Вот наши таблицы стилей (не так важно, но в любом случае):

CSS / main.css

*{

    margin:0;

    padding:0;

}

body {

    background-image:url(../images/bg.png);

    color:#fff;

    font:14px/1.3 Arial,sans-serif;

}

header {

    background-color:#212121;

    box-shadow: 0 -1px 2px #111111;

    display:block;

    height:70px;

    position:relative;

    width:100%;

    z-index:100;

}

header h2{

    font-size:22px;

    font-weight:normal;

    left:50%;

    margin-left:-400px;

    padding:22px 0;

    position:absolute;

    width:540px;

}

header a.stuts,a.stuts:visited {

    border:none;

    text-decoration:none;

    color:#fcfcfc;

    font-size:14px;

    left:50%;

    line-height:31px;

    margin:23px 0 0 110px;

    position:absolute;

    top:0;

}

header .stuts span {

    font-size:22px;

    font-weight:bold;

    margin-left:5px;

}

.container {

    color: #000000;

    margin: 20px auto;

    overflow: hidden;

    position: relative;

    width: 1005px;

}

table {

    background-color: rgba(255, 255, 255, 0.7);

}

table td {

    border: 1px inset #888888;

    position: relative;

    text-align: center;

}

table td p {

    display: block;

    padding: 10px 0;

}

.button {

    cursor: pointer;

    height: 20px;

    padding: 15px 0;

    position: relative;

    text-align: center;

    width: 500px;

 

   -moz-user-select: none;

   -khtml-user-select: none;

   user-select: none;

}

Шаг 3. JS

Наконец - наличие кода Emboss эффект (тиснения):

JS / script.js

// variables

var canvas, ctx;

var imgObj;

 

// filter strength

var strength = 0.5;

 

// shifting matrix

var matrix = [-2, -1, 0, -1, 1, 1, 0, 1, 2];

 

// normalize matrix

function normalizeMatrix(m) {

    var j = 0;

    for (var i = 0; i < m.length; i++) {

        j += m[i];

    }

    for (var i = 0; i < m.length; i++) {

        m[i] /= j;

    }

    return m;

}

 

// convert x-y coordinates into pixel position

function convertCoordinates(x, y, w) {

    return x + (y * w);

}

 

// find a specified distance between two colours

function findColorDiff(dif, dest, src) {

    return dif * dest + (1 - dif) * src;

}

 

// transform matrix

function transformMatrix(img, pixels) {

 

    // create a second canvas and context to keep temp results

    var canvas2 = document.createElement('canvas');

    var ctx2 = canvas2.getContext('2d');

    ctx2.width = canvas2.width = img.width;

    ctx2.height = canvas2.height = img.height;

 

    // draw image

    ctx2.drawImage(img, 0, 0, img.width , img.height);

    var buffImageData = ctx2.getImageData(0, 0, canvas.width, canvas.height);

 

    var data = pixels.data;

    var bufferedData = buffImageData.data;

 

    // normalize matrix

    matrix = normalizeMatrix(matrix);

    var mSize = Math.sqrt(matrix.length);

 

    for (var i = 1; i < img.width - 1; i++) {

        for (var j = 1; j < img.height - 1; j++) {

 

            var sumR = sumG = sumB = 0;

 

            // loop through the matrix

            for (var h = 0; h < mSize; h++) {

                for (var w = 0; w < mSize; w++) {

                    var r = convertCoordinates(i + h - 1, j + w - 1, img.width) << 2;

 

                    // RGB for current pixel

                    var currentPixel = {

                        r: bufferedData[r],

                        g: bufferedData[r + 1],

                        b: bufferedData[r + 2]

                    };

 

                    sumR += currentPixel.r * matrix[w + h * mSize];

                    sumG += currentPixel.g * matrix[w + h * mSize];

                    sumB += currentPixel.b * matrix[w + h * mSize];

                }

            }

 

            var rf = convertCoordinates(i, j, img.width) << 2;

            data[rf] = findColorDiff(strength, sumR, data[rf]);

            data[rf + 1] = findColorDiff(strength, sumG, data[rf + 1]);

            data[rf + 2] = findColorDiff(strength, sumB, data[rf + 2]);

        }

    }

    return pixels;

}

 

// process emboss function

function processEmboss() {

 

    // clear context

    ctx.clearRect(0, 0, canvas.width, canvas.height);

 

    // draw image

    ctx.drawImage(imgObj, 0, 0, imgObj.width , imgObj.height);

 

    // get image data

    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

 

    // transform image data

    imageData = transformMatrix(imgObj, imageData);

 

    // draw data back

    ctx.putImageData(imageData, 0, 0);

};

 

$(function () {

 

    // create canvas and context objects

    canvas = document.getElementById('source');

    ctx = canvas.getContext('2d');

 

    // load source image

    imgObj = new Image();

    imgObj.onload = function () {

 

        // draw image

        ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, canvas.width, canvas.height);

    }

    imgObj.src = 'images/pic1.jpg';

 

    // different onclick handlers

    var iCur = 1;

    $('#next').click(function () {

        iCur++;

        if (iCur > 6) iCur = 1;

        imgObj.src = 'images/pic' + iCur + '.jpg';

    });

    $('#emboss').click(function () {

        processEmboss();

    });

    $('#toImage').click(function () {

        $('#img').attr('src', canvas.toDataURL('image/jpeg'));

    });

});

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


СМОТРЕТЬ ДЕМО                 СКАЧАТЬ ИСХОДНИК


Ссылка на источник

Категория: CSS//HTML//JS | Просмотров: 937 | Добавил: Iron | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди