pan图像全色图像
HTML5 Image Effects – Sepia Today we continue our HTML5 canvas examples, today I want to share with you a method of applying a sepia effect to images. This is not a very difficult method, anyone can repeat it. In our demo we can play with different images by adding a sepia 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 - Sepia | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" 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 - Sepia</h2>
<a href="https://www.script-tutorials.com/html5-image-effects-sepia/" 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="sepia" class="button">Apply Sepia 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 - Sepia | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" 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 - Sepia</h2>
<a href="https://www.script-tutorials.com/html5-image-effects-sepia/" 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="sepia" class="button">Apply Sepia 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:
这是我们的样式表：
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 Sepia effect:
最后-棕褐色效果JavaScript代码：
js / script.js (js/script.js)
// variables
var canvas, ctx;
var imgObj;
// set of sepia colors
var r = [0, 0, 0, 1, 1, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5, 6, 6, 7, 7, 7, 7, 8, 8, 8, 9, 9, 9, 9, 10, 10, 10, 10, 11, 11, 12, 12, 12, 12, 13, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 17, 18, 19, 19, 20, 21, 22, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 39, 40, 41, 42, 44, 45, 47, 48, 49, 52, 54, 55, 57, 59, 60, 62, 65, 67, 69, 70, 72, 74, 77, 79, 81, 83, 86, 88, 90, 92, 94, 97, 99, 101, 103, 107, 109, 111, 112, 116, 118, 120, 124, 126, 127, 129, 133, 135, 136, 140, 142, 143, 145, 149, 150, 152, 155, 157, 159, 162, 163, 165, 167, 170, 171, 173, 176, 177, 178, 180, 183, 184, 185, 188, 189, 190, 192, 194, 195, 196, 198, 200, 201, 202, 203, 204, 206, 207, 208, 209, 211, 212, 213, 214, 215, 216, 218, 219, 219, 220, 221, 222, 223, 224, 225, 226, 227, 227, 228, 229, 229, 230, 231, 232, 232, 233, 234, 234, 235, 236, 236, 237, 238, 238, 239, 239, 240, 241, 241, 242, 242, 243, 244, 244, 245, 245, 245, 246, 247, 247, 248, 248, 249, 249, 249, 250, 251, 251, 252, 252, 252, 253, 254, 254, 254, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255],
g = [0, 0, 1, 2, 2, 3, 5, 5, 6, 7, 8, 8, 10, 11, 11, 12, 13, 15, 15, 16, 17, 18, 18, 19, 21, 22, 22, 23, 24, 26, 26, 27, 28, 29, 31, 31, 32, 33, 34, 35, 35, 37, 38, 39, 40, 41, 43, 44, 44, 45, 46, 47, 48, 50, 51, 52, 53, 54, 56, 57, 58, 59, 60, 61, 63, 64, 65, 66, 67, 68, 69, 71, 72, 73, 74, 75, 76, 77, 79, 80, 81, 83, 84, 85, 86, 88, 89, 90, 92, 93, 94, 95, 96, 97, 100, 101, 102, 103, 105, 106, 107, 108, 109, 111, 113, 114, 115, 117, 118, 119, 120, 122, 123, 124, 126, 127, 128, 129, 131, 132, 133, 135, 136, 137, 138, 140, 141, 142, 144, 145, 146, 148, 149, 150, 151, 153, 154, 155, 157, 158, 159, 160, 162, 163, 164, 166, 167, 168, 169, 171, 172, 173, 174, 175, 176, 177, 178, 179, 181, 182, 183, 184, 186, 186, 187, 188, 189, 190, 192, 193, 194, 195, 195, 196, 197, 199, 200, 201, 202, 202, 203, 204, 205, 206, 207, 208, 208, 209, 210, 211, 212, 213, 214, 214, 215, 216, 217, 218, 219, 219, 220, 221, 222, 223, 223, 224, 225, 226, 226, 227, 228, 228, 229, 230, 231, 232, 232, 232, 233, 234, 235, 235, 236, 236, 237, 238, 238, 239, 239, 240, 240, 241, 242, 242, 242, 243, 244, 245, 245, 246, 246, 247, 247, 248, 249, 249, 249, 250, 251, 251, 252, 252, 252, 253, 254, 255],
b = [53, 53, 53, 54, 54, 54, 55, 55, 55, 56, 57, 57, 57, 58, 58, 58, 59, 59, 59, 60, 61, 61, 61, 62, 62, 63, 63, 63, 64, 65, 65, 65, 66, 66, 67, 67, 67, 68, 69, 69, 69, 70, 70, 71, 71, 72, 73, 73, 73, 74, 74, 75, 75, 76, 77, 77, 78, 78, 79, 79, 80, 81, 81, 82, 82, 83, 83, 84, 85, 85, 86, 86, 87, 87, 88, 89, 89, 90, 90, 91, 91, 93, 93, 94, 94, 95, 95, 96, 97, 98, 98, 99, 99, 100, 101, 102, 102, 103, 104, 105, 105, 106, 106, 107, 108, 109, 109, 110, 111, 111, 112, 113, 114, 114, 115, 116, 117, 117, 118, 119, 119, 121, 121, 122, 122, 123, 124, 125, 126, 126, 127, 128, 129, 129, 130, 131, 132, 132, 133, 134, 134, 135, 136, 137, 137, 138, 139, 140, 140, 141, 142, 142, 143, 144, 145, 145, 146, 146, 148, 148, 149, 149, 150, 151, 152, 152, 153, 153, 154, 155, 156, 156, 157, 157, 158, 159, 160, 160, 161, 161, 162, 162, 163, 164, 164, 165, 165, 166, 166, 167, 168, 168, 169, 169, 170, 170, 171, 172, 172, 173, 173, 174, 174, 175, 176, 176, 177, 177, 177, 178, 178, 179, 180, 180, 181, 181, 181, 182, 182, 183, 184, 184, 184, 185, 185, 186, 186, 186, 187, 188, 188, 188, 189, 189, 189, 190, 190, 191, 191, 192, 192, 193, 193, 193, 194, 194, 194, 195, 196, 196, 196, 197, 197, 197, 198, 199];
// noise value
var noise = 20;
function processSepia() {
// get current image data
var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
for (var i=0; i < imageData.data.length; i+=4) {
// change image colors
imageData.data[i] = r[imageData.data[i]];
imageData.data[i+1] = g[imageData.data[i+1]];
imageData.data[i+2] = b[imageData.data[i+2]];
// apply noise
if (noise > 0) {
var noise = Math.round(noise - Math.random() * noise);
for(var j=0; j<3; j++){
var iPN = noise + imageData.data[i+j];
imageData.data[i+j] = (iPN > 255) ? 255 : iPN;
}
}
}
// put image data back to context
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';
});
$('#sepia').click(function () {
processSepia();
});
$('#toImage').click(function () {
$('#img').attr('src', canvas.toDataURL('image/jpeg'));
});
});
// variables
var canvas, ctx;
var imgObj;
// set of sepia colors
var r = [0, 0, 0, 1, 1, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5, 6, 6, 7, 7, 7, 7, 8, 8, 8, 9, 9, 9, 9, 10, 10, 10, 10, 11, 11, 12, 12, 12, 12, 13, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 17, 18, 19, 19, 20, 21, 22, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 39, 40, 41, 42, 44, 45, 47, 48, 49, 52, 54, 55, 57, 59, 60, 62, 65, 67, 69, 70, 72, 74, 77, 79, 81, 83, 86, 88, 90, 92, 94, 97, 99, 101, 103, 107, 109, 111, 112, 116, 118, 120, 124, 126, 127, 129, 133, 135, 136, 140, 142, 143, 145, 149, 150, 152, 155, 157, 159, 162, 163, 165, 167, 170, 171, 173, 176, 177, 178, 180, 183, 184, 185, 188, 189, 190, 192, 194, 195, 196, 198, 200, 201, 202, 203, 204, 206, 207, 208, 209, 211, 212, 213, 214, 215, 216, 218, 219, 219, 220, 221, 222, 223, 224, 225, 226, 227, 227, 228, 229, 229, 230, 231, 232, 232, 233, 234, 234, 235, 236, 236, 237, 238, 238, 239, 239, 240, 241, 241, 242, 242, 243, 244, 244, 245, 245, 245, 246, 247, 247, 248, 248, 249, 249, 249, 250, 251, 251, 252, 252, 252, 253, 254, 254, 254, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255],
g = [0, 0, 1, 2, 2, 3, 5, 5, 6, 7, 8, 8, 10, 11, 11, 12, 13, 15, 15, 16, 17, 18, 18, 19, 21, 22, 22, 23, 24, 26, 26, 27, 28, 29, 31, 31, 32, 33, 34, 35, 35, 37, 38, 39, 40, 41, 43, 44, 44, 45, 46, 47, 48, 50, 51, 52, 53, 54, 56, 57, 58, 59, 60, 61, 63, 64, 65, 66, 67, 68, 69, 71, 72, 73, 74, 75, 76, 77, 79, 80, 81, 83, 84, 85, 86, 88, 89, 90, 92, 93, 94, 95, 96, 97, 100, 101, 102, 103, 105, 106, 107, 108, 109, 111, 113, 114, 115, 117, 118, 119, 120, 122, 123, 124, 126, 127, 128, 129, 131, 132, 133, 135, 136, 137, 138, 140, 141, 142, 144, 145, 146, 148, 149, 150, 151, 153, 154, 155, 157, 158, 159, 160, 162, 163, 164, 166, 167, 168, 169, 171, 172, 173, 174, 175, 176, 177, 178, 179, 181, 182, 183, 184, 186, 186, 187, 188, 189, 190, 192, 193, 194, 195, 195, 196, 197, 199, 200, 201, 202, 202, 203, 204, 205, 206, 207, 208, 208, 209, 210, 211, 212, 213, 214, 214, 215, 216, 217, 218, 219, 219, 220, 221, 222, 223, 223, 224, 225, 226, 226, 227, 228, 228, 229, 230, 231, 232, 232, 232, 233, 234, 235, 235, 236, 236, 237, 238, 238, 239, 239, 240, 240, 241, 242, 242, 242, 243, 244, 245, 245, 246, 246, 247, 247, 248, 249, 249, 249, 250, 251, 251, 252, 252, 252, 253, 254, 255],
b = [53, 53, 53, 54, 54, 54, 55, 55, 55, 56, 57, 57, 57, 58, 58, 58, 59, 59, 59, 60, 61, 61, 61, 62, 62, 63, 63, 63, 64, 65, 65, 65, 66, 66, 67, 67, 67, 68, 69, 69, 69, 70, 70, 71, 71, 72, 73, 73, 73, 74, 74, 75, 75, 76, 77, 77, 78, 78, 79, 79, 80, 81, 81, 82, 82, 83, 83, 84, 85, 85, 86, 86, 87, 87, 88, 89, 89, 90, 90, 91, 91, 93, 93, 94, 94, 95, 95, 96, 97, 98, 98, 99, 99, 100, 101, 102, 102, 103, 104, 105, 105, 106, 106, 107, 108, 109, 109, 110, 111, 111, 112, 113, 114, 114, 115, 116, 117, 117, 118, 119, 119, 121, 121, 122, 122, 123, 124, 125, 126, 126, 127, 128, 129, 129, 130, 131, 132, 132, 133, 134, 134, 135, 136, 137, 137, 138, 139, 140, 140, 141, 142, 142, 143, 144, 145, 145, 146, 146, 148, 148, 149, 149, 150, 151, 152, 152, 153, 153, 154, 155, 156, 156, 157, 157, 158, 159, 160, 160, 161, 161, 162, 162, 163, 164, 164, 165, 165, 166, 166, 167, 168, 168, 169, 169, 170, 170, 171, 172, 172, 173, 173, 174, 174, 175, 176, 176, 177, 177, 177, 178, 178, 179, 180, 180, 181, 181, 181, 182, 182, 183, 184, 184, 184, 185, 185, 186, 186, 186, 187, 188, 188, 188, 189, 189, 189, 190, 190, 191, 191, 192, 192, 193, 193, 193, 194, 194, 194, 195, 196, 196, 196, 197, 197, 197, 198, 199];
// noise value
var noise = 20;
function processSepia() {
// get current image data
var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
for (var i=0; i < imageData.data.length; i+=4) {
// change image colors
imageData.data[i] = r[imageData.data[i]];
imageData.data[i+1] = g[imageData.data[i+1]];
imageData.data[i+2] = b[imageData.data[i+2]];
// apply noise
if (noise > 0) {
var noise = Math.round(noise - Math.random() * noise);
for(var j=0; j<3; j++){
var iPN = noise + imageData.data[i+j];
imageData.data[i+j] = (iPN > 255) ? 255 : iPN;
}
}
}
// put image data back to context
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';
});
$('#sepia').click(function () {
processSepia();
});
$('#toImage').click(function () {
$('#img').attr('src', canvas.toDataURL('image/jpeg'));
});
});
Main idea is: as we know – sepia images have own quite predefined colors. So, our script will walk through all pixels of original image, and change pixel color to the one of sepia colors. Plus, we will add a little of noise to our image.
主要思想是：众所周知，棕褐色图像具有自己预定义的颜色。 因此，我们的脚本将遍历原始图像的所有像素，并将像素颜色更改为棕褐色之一。 另外，我们将在图像中添加一些噪点。
现场演示
打包下载
结论 (Conclusion)
I hope that our demo looks fine. Today we have added new interesting effect to our html5 application – Sepia. I will be glad to see your thanks and comments. Good luck!
我希望我们的演示看起来不错。 今天，我们在html5应用程序中添加了新的有趣效果–棕褐色。 看到您的感谢和评论，我将非常高兴。 祝好运！
翻译自: https://www.script-tutorials.com/html5-image-effects-sepia/
pan图像全色图像
656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
