溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

一個圖片濾鏡效果

發(fā)布時間：2020-07-10 04:13:56 來源：網(wǎng)絡(luò) 閱讀：668 作者：syo0610 欄目：移動開發(fā)

一個圖片濾鏡效果


html頁面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width = device-width,initial-scale=1.0">
</head>
<body>
<img src="img/5.jpg" class="photo">
</br>
</br>
<button class="reset">復(fù)位</button>
</br>
</br>
<button class="grayscale">灰度效果</button>
<button class="sepia">復(fù)古效果</button>
<button class="redmask">紅色蒙版效果</button>
<button class="brightness">亮度效果</button>
<button class="invert">反轉(zhuǎn)效果</button>
<button class="blackWhite">黑白效果</button>
<button class="emboss">浮雕效果</button>
</br>
</br>
<button class="redFilter">紅色濾鏡</button>
<button class="greenFilter">綠色濾鏡</button>
<button class="blueFilter">藍色濾鏡</button>
<button class="yellowFilter">×××濾鏡</button>
<button class="perpleFilter">紫色濾鏡</button>
<button class="cyanFilter">青色濾鏡</button>


<script src="js/photoFilter.js"></script>
<script src="js/app.js"></script>
</body>
</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();
    }

    /**
     * 初始化
     * 圖片轉(zhuǎn)canvas
     */
    drawImage() {
        this.ctx.drawImage(this.img, 0, 0);
        this.imgData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
    }

    /**
     * 灰度
     * 紅、綠、藍三個像素值的算術(shù)平均值
     */
    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();
    }

    /**
     * 復(fù)古
     * 將紅、綠、藍三個像素，分別取這三個值的某種加權(quán)平均值，使得圖像有一種古舊的效果。
     */
    sepia() {
        let d = this.imgData.data;
        //假定d[i]是像素數(shù)組中一個象素的紅色值，則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();
    }

    /**
     * 紅色蒙版
     * 圖像呈現(xiàn)一種偏紅的效果
     * 算法是將紅色通道設(shè)為紅、綠、藍三個值的平均值，而將綠色通道和藍色通道都設(shè)為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();
    }

    /**
     * 亮度
     * 圖像變得更亮或更暗
     * 算法將紅色通道、綠色通道、藍色通道，同時加上一個正值或負(fù)值
     * @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();
    }


    /**
     * 反相
     * 圖片呈現(xiàn)一種色彩顛倒的效果
     * 算法為紅、綠、藍通道都取各自的相反值（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平均值A(chǔ)vg ＝ (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();
    }

    /**
     * 浮雕效果
     * 當(dāng)前RGB減去相鄰的GRB得到的值再加上128
     * 取平均值 再次灰度，優(yōu)化浮雕的效果
     */
    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();
    }

    /**
     * 紅色濾鏡
     * 當(dāng)前紅色通道值變?yōu)樵瓉淼?倍
     */
    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();
    }

    /**
     * 綠色濾鏡
     * 當(dāng)前綠色通道值變?yōu)樵瓉淼?倍
     */
    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();
    }

    /**
     * 藍色濾鏡
     * 當(dāng)前藍色通道值變?yōu)樵瓉淼?倍
     */
    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();
    }

    /**
     * ×××濾鏡
     * 當(dāng)前紅色通道和綠色通道值+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();
    }

    /**
     * 紫色濾鏡
     * 當(dāng)前紅色通道和藍色通道值+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();
    }

    /**
     * 青色濾鏡
     * 當(dāng)前藍色通道和綠色通道值+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轉(zhuǎn)換成圖片元素
     */
    canvasToImage() {
        this.ctx.putImageData(this.imgData, 0, 0);
        this.img.src = this.canvas.toDataURL();
    }

    /**
     * 復(fù)原
     */
    reset() {
        this.img.src = this.src;
        this.drawImage();
    }
}


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手