拍摄图像并添加噪声_HTML5图像效果应用程序–添加噪声并反转

最新推荐文章于 2021-06-18 11:54:00 发布

cukeoumuqian0413

最新推荐文章于 2021-06-18 11:54:00 发布

阅读量203

点赞数

文章标签： python css html less js ViewUI

原文链接：https://www.script-tutorials.com/html5-image-effects-app-adding-noise-and-invert/

版权

拍摄图像并添加噪声

HTML5 Image Effects App - Adding Noise and Invert

Noise and Invert HTML5 image effects. Today we continue HTML5 canvas examples, I hope you enjoy this series of articles. Even for me, working with graphics, images brings pleasure. Sure that and for you too. Today we will be adding two new filters – Noise and Invert.

噪波和反转HTML5图像效果。今天我们继续HTML5 canvas示例，希望您喜欢本系列文章。即使是对我来说，使用图形，图像也能带来乐趣。当然可以，对您也一样。今天，我们将添加两个新的滤波器-噪声和反相。

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>
<title>HTML5 Image Effects App - Adding Noise and Invert (demo) | Script Tutorials</title>
</head>
<body>
    <div class="example">
        <h3><a href="https://www.script-tutorials.com/html5-canvas-image-effects-app/">HTML5 Image Effects App - Adding Noise and Invert | Script Tutorials</a></h3>
        <div class="column1">
            Reset to:<br />
            <input type="button" onclick="resetToColor()" value="Color" />
            <input type="button" onclick="resetToGrayscale()" value="Grayscale" /><hr />
            Effects:<br />
            <input type="button" onclick="resetToBlur()" value="1. Blur" /><br />
            <input type="button" onclick="resetToNoise()" value="2. Add noise" /><br />
            <input type="button" onclick="resetToInvert()" value="3. Invert colors" /><hr />
            Adjustment:<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" />
            Blur: <input type="button" onclick="changeBlurValue(1)" value="More" />
            <input type="button" onclick="changeBlurValue(-1)" value="Less" /><br />
        </div>
        <div class="column2">
            <canvas id="orig" width="500" height="333"></canvas>
            <canvas id="panel" width="500" height="333"></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>
<title>HTML5 Image Effects App - Adding Noise and Invert (demo) | Script Tutorials</title>
</head>
<body>
    <div class="example">
        <h3><a href="https://www.script-tutorials.com/html5-canvas-image-effects-app/">HTML5 Image Effects App - Adding Noise and Invert | Script Tutorials</a></h3>
        <div class="column1">
            Reset to:<br />
            <input type="button" onclick="resetToColor()" value="Color" />
            <input type="button" onclick="resetToGrayscale()" value="Grayscale" /><hr />
            Effects:<br />
            <input type="button" onclick="resetToBlur()" value="1. Blur" /><br />
            <input type="button" onclick="resetToNoise()" value="2. Add noise" /><br />
            <input type="button" onclick="resetToInvert()" value="3. Invert colors" /><hr />
            Adjustment:<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" />
            Blur: <input type="button" onclick="changeBlurValue(1)" value="More" />
            <input type="button" onclick="changeBlurValue(-1)" value="Less" /><br />
        </div>
        <div class="column2">
            <canvas id="orig" width="500" height="333"></canvas>
            <canvas id="panel" width="500" height="333"></canvas>
        </div>
        <div style="clear:both;"></div>
    </div>
</body>
</html>

What I did since last our version. I sorted the buttons and added two new. Nothing serious.

自上次发布以来我所做的。我对按钮进行了排序，并添加了两个新按钮。不严重。

步骤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:730px;
    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:500px;
    background-color:#888;
    padding:10px;
}
input[type=button] {
    margin:5px;
}


body {
    background:#eee;
    font-family:Verdana, Helvetica, Arial, sans-serif;
    margin:0;
    padding:0
}
.example {
    background:#fff;
    width:730px;
    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:500px;
    background-color:#888;
    padding:10px;
}
input[type=button] {
    margin:5px;
}

步骤3. JS (Step 3. JS)

Since today I don`t will publich whole script code again and again, but will publish our new functions which we using. Full version of script you can find in our package. First function for Noise effect:

从今天开始，我不会一次又一次地公开整个脚本代码，而是将发布我们使用的新功能。您可以在我们的软件包中找到完整版本的脚本。噪波效果的第一个功能：

js / script.js (js/script.js)


function Noise() {
    func = 'noise'; // last used function
    var imgd = contextOrig.getImageData(0, 0, iW, iH);
    var data = imgd.data;
    for (var i = 0, n = data.length; i < n; i += 4) {
       // generating random color coefficients
       var randColor1 = 0.6 + Math.random() * 0.4;
       var randColor2 = 0.6 + Math.random() * 0.4;
       var randColor3 = 0.6 + Math.random() * 0.4;
        // assigning random colors to our data
        data[i] = data[i]*p2*randColor1+er; // green
        data[i+1] = data[i+1]*p2*randColor2+eg; // green
        data[i+2] = data[i+2]*p3*randColor3+eb; // blue
    }
    // put image date back to context
    context.putImageData(imgd, 0, 0);
}


function Noise() {
    func = 'noise'; // last used function
    var imgd = contextOrig.getImageData(0, 0, iW, iH);
    var data = imgd.data;
    for (var i = 0, n = data.length; i < n; i += 4) {
       // generating random color coefficients
       var randColor1 = 0.6 + Math.random() * 0.4;
       var randColor2 = 0.6 + Math.random() * 0.4;
       var randColor3 = 0.6 + Math.random() * 0.4;
        // assigning random colors to our data
        data[i] = data[i]*p2*randColor1+er; // green
        data[i+1] = data[i+1]*p2*randColor2+eg; // green
        data[i+2] = data[i+2]*p3*randColor3+eb; // blue
    }
    // put image date back to context
    context.putImageData(imgd, 0, 0);
}

We will generate colored noise. As you can see, during walking through all pixels we generating different coefficients for each color channel (red/green/blue). And in result – multiply our source pixel info to these coefficients. In result – we have noise effect. Next function is Invert, here are code:

我们将产生彩色噪声。如您所见，在遍历所有像素期间，我们为每个颜色通道(红色/绿色/蓝色)生成不同的系数。结果–将我们的源像素信息乘以这些系数。结果–我们产生了噪音效应。下一个函数是Invert，下面是代码：


function Invert(vContext) {
    func = 'color'; // last used function
    var imgd = vContext.getImageData(0, 0, iW, iH);
    var data = imgd.data;
    for (var i = 0, n = data.length; i < n; i += 4) {
        // assigning inverted colors to our data
        data[i] = 255 - data[i]; // green
        data[i+1] = 255 - data[i+1]; // green
        data[i+2] = 255 - data[i+2]; // blue
    }
    // put image date back to context
    vContext.putImageData(imgd, 0, 0);
}
.........
function resetToInvert() {
    p1 = 1;
    p2 = 1;
    p3 = 1;
    er = eg = eb = 0;
    iBlurRate = 1;
    if (func == '') Color();
    Invert(context);
    Invert(contextOrig);
}


function Invert(vContext) {
    func = 'color'; // last used function
    var imgd = vContext.getImageData(0, 0, iW, iH);
    var data = imgd.data;
    for (var i = 0, n = data.length; i < n; i += 4) {
        // assigning inverted colors to our data
        data[i] = 255 - data[i]; // green
        data[i+1] = 255 - data[i+1]; // green
        data[i+2] = 255 - data[i+2]; // blue
    }
    // put image date back to context
    vContext.putImageData(imgd, 0, 0);
}
.........
function resetToInvert() {
    p1 = 1;
    p2 = 1;
    p3 = 1;
    er = eg = eb = 0;
    iBlurRate = 1;
    if (func == '') Color();
    Invert(context);
    Invert(contextOrig);
}

Invert function is pretty easy, we will subtract current color value from 255 (white). So we will get reversed color (negative) for each point.

反转功能非常简单，我们将从255(白色)中减去当前颜色值。因此，我们将为每个点获得相反的颜色(负色)。

现场演示

结论 (Conclusion)

Not bad, isn`t it? Today we added two new interesting effects to our application – Noise and Invert. I will be glad to see your thanks and comments. Good luck!

还不错，不是吗？今天，我们在应用程序中添加了两个有趣的新效果–噪声和反相。看到您的感谢和评论，我将非常高兴。祝好运！