一个图片滤镜效果

一个图片滤镜效果

创新互联建站服务项目包括宝安网站建设、宝安网站制作、宝安网页制作以及宝安网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，宝安网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到宝安省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

html页面：

    
    
    







复位




灰度效果
复古效果
红色蒙版效果
亮度效果
反转效果
黑白效果
浮雕效果




红色滤镜
绿色滤镜
蓝色滤镜
×××滤镜
紫色滤镜
青色滤镜

app.js代码：

/**
 * Created by syo on 2017/3/14.
 * @author syo QQ:23371891
 */

let photoData = new PhotoFilter(document.querySelector('.photo'));

Array.prototype.slice.call(document.querySelectorAll('button')).map(function (dom, index) {
    dom.onclick = function (evt) {
        switch (evt.target.className) {
            case 'grayscale':
                photoData.grayscale();
                break;
            case 'sepia':
                photoData.sepia();
                break;
            case 'redmask':
                photoData.redmask();
                break;
            case 'brightness':
                photoData.brightness(20);
                break;
            case 'invert':
                photoData.invert();
                break;
            case 'blackWhite':
                photoData.blackWhite(100);
                break;
            case 'emboss':
                photoData.emboss();
                break;
            case 'redFilter':
                photoData.redFilter();
                break;
            case 'greenFilter':
                photoData.greenFilter();
                break;
            case 'blueFilter':
                photoData.blueFilter();
                break;
            case 'yellowFilter':
                photoData.yellowFilter();
                break;
            case 'perpleFilter':
                photoData.perpleFilter();
                break;
            case 'cyanFilter':
                photoData.cyanFilter();
                break;
            case 'reset':
                photoData.reset();
                break;
        }
    }
})

photoFilter.js 类：

/**
 * Created by syo on 2017/3/14.
 * @author syo QQ:23371891
 * 图片滤镜效果
 * class PhotoFilter
 * @param img 传入img元素
 */

class PhotoFilter {
    constructor(img) {
        this.src = img.src;
        this.img = img;
        this.canvas = document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d');
        this.canvas.width = this.img.width;
        this.canvas.height = this.img.height;
        this.drawImage();
    }

    /**
     * 初始化
     * 图片转canvas
     */
    drawImage() {
        this.ctx.drawImage(this.img, 0, 0);
        this.imgData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
    }

    /**
     * 灰度
     * 红、绿、蓝三个像素值的算术平均值
     */
    grayscale() {
        let d = this.imgData.data;
        for (let i = 0; i < d.length; i += 4) {
            let r = d[i];
            let g = d[i + 1];
            let b = d[i + 2];
            d[i] = d[i + 1] = d[i + 2] = (r + g + b) / 3;
        }
        this.canvasToImage();
    }

    /**
     * 复古
     * 将红、绿、蓝三个像素，分别取这三个值的某种加权平均值，使得图像有一种古旧的效果。
     */
    sepia() {
        let d = this.imgData.data;
        //假定d[i]是像素数组中一个象素的红色值，则d[i+1]为绿色值，d[i+2]为蓝色值，d[i+3]就是alpha通道值
        for (let i = 0; i < d.length; i += 4) {
            let r = d[i];
            let g = d[i + 1];
            let b = d[i + 2];
            d[i] = (r * 0.393) + (g * 0.769) + (b * 0.189);    //red
            d[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168); //green
            d[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131); //blue
        }
        this.canvasToImage();
    }

    /**
     * 红色蒙版
     * 图像呈现一种偏红的效果
     * 算法是将红色通道设为红、绿、蓝三个值的平均值，而将绿色通道和蓝色通道都设为0
     */
    redmask() {
        let d = this.imgData.data;
        for (let i = 0; i < d.length; i += 4) {
            let r = d[i];
            let g = d[i + 1];
            let b = d[i + 2];
            d[i] = (r + g + b) / 3;
            d[i + 1] = d[i + 2] = 0;
        }
        this.canvasToImage();
    }

    /**
     * 亮度
     * 图像变得更亮或更暗
     * 算法将红色通道、绿色通道、蓝色通道，同时加上一个正值或负值
     * @param val 亮度值
     */
    brightness(val) {
        let d = this.imgData.data;
        for (let i = 0; i < d.length; i += 4) {
            d[i] += val;
            d[i + 1] += val;
            d[i + 2] += val;
        }
        this.canvasToImage();
    }


    /**
     * 反相
     * 图片呈现一种色彩颠倒的效果
     * 算法为红、绿、蓝通道都取各自的相反值（255-原值）
     */
    invert() {
        let d = this.imgData.data;
        for (let i = 0; i < d.length; i += 4) {
            d[i] = 255 - d[i];
            d[i + 1] = 255 - d[i + 1];
            d[i + 2] = 255 - d[i + 2];
        }
        this.canvasToImage();
    }

    /**
     * 黑白图片
     * 求RGB平均值Avg ＝ (R + G + B) / 3，如果Avg >= 100，则新的颜色值为R＝G＝B＝255；
     * @param Threshold 阈值
     */
    blackWhite(threshold) {
        let d = this.imgData.data;
        for (let i = 0; i < d.length; i += 4) {
            let avg = (d[i] + d[i + 1] + d[i + 2]) / 3;
            d[i] = d[i + 1] = d[i + 2] = avg > threshold ? 255 : 0;
        }
        this.canvasToImage();
    }

    /**
     * 浮雕效果
     * 当前RGB减去相邻的GRB得到的值再加上128
     * 取平均值 再次灰度，优化浮雕的效果
     */
    emboss() {
        let d = this.imgData.data;
        for (let i = 4; i < d.length; i += 4) {
            d[i] = d[i] - d[i + 4] + 128;
            d[i + 1] = d[i + 1] - d[i + 5] + 128;
            d[i + 2] = d[i + 2] - d[i + 6] + 128;
            let avg = (d[i] + d[i + 1] + d[i + 2]) / 3;
            d[i] = avg;
            d[i + 1] = avg;
            d[i + 2] = avg;
        }
        this.canvasToImage();
    }

    /**
     * 红色滤镜
     * 当前红色通道值变为原来的2倍
     */
    redFilter() {
        let d = this.imgData.data;
        for (let i = 4; i < d.length; i += 4) {
            let r = d[i] * 2;
            d[i] = r > 255 ? 255 : r;
        }
        this.canvasToImage();
    }

    /**
     * 绿色滤镜
     * 当前绿色通道值变为原来的2倍
     */
    greenFilter() {
        let d = this.imgData.data;
        for (let i = 4; i < d.length; i += 4) {
            let g = d[i + 1] * 2;
            d[i + 1] = g > 255 ? 255 : g;
        }
        this.canvasToImage();
    }

    /**
     * 蓝色滤镜
     * 当前蓝色通道值变为原来的2倍
     */
    blueFilter() {
        let d = this.imgData.data;
        for (let i = 4; i < d.length; i += 4) {
            let b = d[i + 2] * 2;
            d[i + 2] = b > 255 ? 255 : b;
        }
        this.canvasToImage();
    }

    /**
     * ×××滤镜
     * 当前红色通道和绿色通道值+50
     */
    yellowFilter() {
        let d = this.imgData.data;
        for (let i = 4; i < d.length; i += 4) {
            let r = d[i] + 50;
            let g = d[i + 1] + 50;
            d[i] = r > 255 ? 255 : r;
            d[i + 1] = g > 255 ? 255 : g;
        }
        this.canvasToImage();
    }

    /**
     * 紫色滤镜
     * 当前红色通道和蓝色通道值+50
     */
    perpleFilter() {
        let d = this.imgData.data;
        for (let i = 4; i < d.length; i += 4) {
            let r = d[i] + 50;
            let b = d[i + 2] + 50;
            d[i] = r > 255 ? 255 : r;
            d[i + 2] = b > 255 ? 255 : b;
        }
        this.canvasToImage();
    }

    /**
     * 青色滤镜
     * 当前蓝色通道和绿色通道值+50
     */
    cyanFilter() {
        let d = this.imgData.data;
        for (let i = 4; i < d.length; i += 4) {
            let g = d[i + 1] + 50;
            let b = d[i + 2] + 50;
            d[i + 1] = g > 255 ? 255 : g;
            d[i + 2] = b > 255 ? 255 : b;
        }
        this.canvasToImage();
    }

    /**
     * canvas转换成图片元素
     */
    canvasToImage() {
        this.ctx.putImageData(this.imgData, 0, 0);
        this.img.src = this.canvas.toDataURL();
    }

    /**
     * 复原
     */
    reset() {
        this.img.src = this.src;
        this.drawImage();
    }
}