创建令人难以置信HTML5 Canvas应用程序以进行在线图像增强

最新推荐文章于 2024-06-12 09:51:07 发布

cuken7684698822

最新推荐文章于 2024-06-12 09:51:07 发布

阅读量385

点赞数

文章标签： js pascal css gwt mooc ViewUI

原文链接：https://www.script-tutorials.com/html5-canvas-image-effects-app/

版权

HTML5 Canvas Image Effects App Today we continue HTML5 canvas examples, I sure that this still interesting to you. Today we will make application to adjust image colors (Changing photo colors / Grayscale). We will able to make photo darker, lighter, change density of each channel (RGB), make image grayscale (and still able to play with colors).

HTML5 Canvas Image Effects应用程序今天，我们继续HTML5 Canvas示例，我相信这对您仍然很有趣。今天，我们将提供调整图像颜色(更改照片颜色/灰度)的应用程序。我们将使照片更暗，更亮，改变每个通道(RGB)的密度，使图像灰度(并且仍然能够播放彩色)。

Here are our demo and downloadable package:

这是我们的演示和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

Here are all html of my demo

这是我的演示的全部html

index.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="https://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>


<!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="https://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>

Pretty small, isn`t it? Here you can see (in left column) different buttons (controls), and Canvas object itself.

很小，不是吗？在这里，您可以看到(在左列中)不同的按钮(控件)和Canvas对象本身。

步骤2. CSS (Step 2. CSS)

Here are used CSS styles.

这是使用CSS样式。

css / main.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;
}


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 (Step 3. JS)

Now – most interesting – its inner functionality (HTML5 canvas script).

现在，最有趣的是它的内部功能(HTML5画布脚本)。

js / script.js (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();
}


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();
}

I hope that you know basics of working with canvas. Check what I doing on window.onload: I creating new canvas, obtaining 2d context for drawing, filling its background and draw original image on it. And, when we clicking to our controls – we playing with bits of source image, and can adjust color, brightness, also we can make image grayscale too.

我希望您了解使用画布的基础知识。检查我在window.onload上所做的事情：创建新的画布，获取2D上下文进行绘制，填充其背景并在其上绘制原始图像。而且，当我们单击控件时-我们可以处理源图像的某些部分，并且可以调整颜色，亮度，也可以使图像变为灰度。

现场演示

结论 (Conclusion)

Hope that you was happy to play with our scripts. Commonly – image processing, filters, effect – this all very interesting. Will glad to see your interesting comments. Good luck!

希望您很高兴使用我们的脚本。通常-图像处理，滤镜，效果-所有这些都非常有趣。很高兴看到您的有趣评论。祝好运！

翻译自: https://www.script-tutorials.com/html5-canvas-image-effects-app/

cuken7684698822

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
创建令人难以置信HTML5 Canvas应用程序以进行在线图像增强

HTML5 Canvas Image Effects App Today we continue HTML5 canvas examples, I sure that this still interesting to you. Today we will make application to adjust image colors (Changing photo colors / Graysc...
复制链接

扫一扫