HTML5canvas给图片加滤镜

  1. 图片颜色反转
    图片颜色反转的终极奥义就是,每个像素的颜色值取反,即data[i + 0] = 255 - data[i + 0];

<html lang="en">
<head>
    <title>title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            var image = new Image();
            image.src = "images/cat.jpg";

            image.onload = function () {
                cxt.drawImage(image, 10, 10);//把我的图片放在(10,10)的位置
                var imgData = cxt.getImageData(10, 10, 235, 235);
                //我这个图片大小是235*235,这里指从(10,10)获取宽235高235的像素的data
                var data = imgData.data;//每个像素的data是个数组(红,绿,蓝,透明度)
                //遍历每个像素
                for (var i = 0; i < data.length; i += 4) {
                    data[i + 0] = 255 - data[i + 0];
                    data[i + 1] = 255 - data[i + 1];
                    data[i + 2] = 255 - data[i + 2];
                    //这里只反转颜色,不管透明度
                }
                //在指定位置输出图片
                cxt.putImageData(imgData, 250, 10);
                //在(250,10)的位置放上我的新图片
            }
        }
    script>
head>
<body>
    <canvas id="canvas" width="500" height="300">canvas>
body>
html>

HTML5canvas给图片加滤镜_第1张图片

2.黑白
黑白效果就每个像素的值等于原图三原色的值取平均值,加权平均值等。
总之三个通道数值一样。

for (var i = 0; i < data.length; i += 4) {
                    var average = (data[i + 0] + data[i + 1] + data[i + 2] + data[i + 3]) / 3;
                    data[i + 0] = average;   //红
                    data[i + 1] = average;   //绿
                    data[i + 2] = average;   //蓝
                }

HTML5canvas给图片加滤镜_第2张图片
拓展
可以在得出的average的值上通过增加或者减小数值来决定黑白照黑白的程度。举例,average = average - 80;效果如下图
HTML5canvas给图片加滤镜_第3张图片
还可以对三原色的值加权。举例 average = data[i] * 0.1 + data[i + 1] * 0.5 + data[i + 2] * 0.9;(代码中average已经不是平均的意思了,就当个参数看看)
HTML5canvas给图片加滤镜_第4张图片
3.调节图片亮暗
其实和第二点的拓展一样,就是在原来的值上面增加或减少同样的值来调节亮暗。

 for (var i = 0; i < data.length; i += 4) {
                    var a = 100;//这里准备加100
                    data[i + 0] += a;
                    data[i + 1] += a;
                    data[i + 2] += a;
                }

HTML5canvas给图片加滤镜_第5张图片
4.蒙版
某个颜色取三色的平均值(可以再这个基础上加减),其他颜色为0(也可以简单调整)。

for (var i = 0; i < data.length; i += 4) {
                    var r = data[i + 0];
                    var g = data[i + 1];
                    var b = data[i + 2];
                    var average = (r + g + b) / 3;

                    data[i + 0] = 0;
                    data[i + 1] = average+50;
                    data[i + 2] = 0;
                }

HTML5canvas给图片加滤镜_第6张图片

你可能感兴趣的:(html5)