HTML5 Image Effects – Emboss Today we continue our HTML5 canvas image filter examples, today I would like to share with you a method of applying a Emboss effect to images. This is pretty difficult method, but I sure that you can repeat it. In our demo we can play with different images by adding a emboss effect to them, as well as we can ‘export’ our result on the image element (<img>).
HTML5图像效果–浮雕今天，我们继续我们HTML5画布图像滤镜示例，今天，我想与大家分享一种对图像应用浮雕效果的方法。 这是非常困难的方法，但我相信您可以重复执行。 在我们的演示中，我们可以通过向它们添加浮雕效果来处理不同的图像，也可以将结果“导出”到图像元素(<img>)上。
Here are our demo and downloadable package:
这是我们的演示和可下载的软件包：
现场演示
打包下载
Ok, download the example files and lets start coding !
好的，下载示例文件并开始编码！
步骤1. HTML标记 (Step 1. HTML Markup)
This is markup of our demo page. Here it is:
这是我们的演示页面的标记。 这里是：
index.html (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="https://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>
<!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="https://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>
Basically – it contain just one canvas object, one image, and three ‘buttons’ (div elements).
基本上-它仅包含一个画布对象，一个图像和三个“按钮”(div元素)。
步骤2. CSS (Step 2. CSS)
Here are our stylesheets (not so important, but anyway):
这是我们的样式表(不是很重要，但是无论如何)：
css / main.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;
}
*{
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 (Step 3. JS)
Finally – our javascript code of Emboss effect:
最后-我们的Emboss效果的javascript代码：
js / script.js (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'));
});
});
// 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'));
});
});
This effect is required some pretty difficult matrix transformations, so, you can try to understand it, or use it as is. Of course, our script will pass through all pixels of original image, and after – will apply some transformation.
需要一些非常困难的矩阵转换才能达到这种效果，因此，您可以尝试理解它，也可以照原样使用它。 当然，我们的脚本将遍历原始图像的所有像素，然后–将进行一些转换。
现场演示
打包下载
结论 (Conclusion)
I hope that our demo looks fine. Today we have added new interesting effect to our html5 application – Emboss. I will be glad to see your thanks and comments. Good luck!
我希望我们的演示看起来不错。 今天，我们在html5应用程序中添加了新的有趣效果– Emboss。 看到您的感谢和评论，我将非常高兴。 祝好运！
翻译自: https://www.script-tutorials.com/html5-image-effects-emboss/
176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
