Эффекты 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 <CANVAS></p></td>
<td><p>Image
Object <IMG></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'));
});
});
Для этого эффекта требуются некоторое довольно трудное преобразования матрицы, таким
образом, вы можете попробовать экспериментировать с ним, чтобы понять это, или
использовать его как есть. Конечно, наш скрипт будет проходить через все
пикселы исходного изображения, а после - будет применять некоторые
преобразования.
СМОТРЕТЬ ДЕМО СКАЧАТЬ ИСХОДНИК
Ссылка на
источник
| 
