canvas 图像滤镜

作者: 即将牛逼的蛋蛋 | 来源:发表于2020-03-27 18:17 被阅读0次

canvas 图像滤镜
canvas-09 图像源相关
简单的canvas图像处理
Canvas
Core Image专题（二）
Canvas学习笔记之图像处理
图像滤镜
使用OPenGL ES 实现滤镜功能
HTML5 - Canvas
Core Image编程指南翻译二（图像处理）

这期完成了图像的一些简单的滤镜，问题就在于，关于rgb颜色之间的一些转换。
第二期完成视频的人脸识别
附上代码
gif过大就不上传了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    .wrap {
        display: flex;
    }

    .btnlist {}

    .btnlist .fuyuan,
    .black_white,
    .test1,
    .test4 {
        display: block;
        margin-bottom: 10px;
    }

    .Rline {
        margin-top: 10px;
        width: 200px;
        height: 5px;
        background: #ccc;
        position: relative;
    }

    .Rlinebg {
        width: 200px;
        height: 20px;
        background: transparent;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        z-index: 10;
    }

    .Rtuozhuai {
        width: 5px;
        height: 20px;
        background: lightblue;
        position: absolute;
        right: -5px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .Rcolorline {
        position: absolute;
        left: 0;
        top: 0;
        width: 0px;
        height: 5px;
        background: lightblue;
    }


    .Bline {
        margin-top: 10px;
        width: 200px;
        height: 5px;
        background: #ccc;
        position: relative;
    }

    .Blinebg {
        width: 200px;
        height: 20px;
        background: transparent;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        z-index: 10;
    }

    .Btuozhuai {
        width: 5px;
        height: 20px;
        background: lightblue;
        position: absolute;
        right: -5px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .Bcolorline {
        position: absolute;
        left: 0;
        top: 0;
        width: 0px;
        height: 5px;
        background: lightblue;
    }

    .progress {
        display: none;
    }
</style>

<body>
    <img style="width: 300px;height: 206px;display: none;" id="image" src="./timg.jpeg" alt="">
    <div class="wrap">
        <div style="border: 1px solid #ccc;width: 500px;height: 500px;margin-right: 20px;">
            <canvas width="500" height="500" id="canvas"></canvas>
        </div>
        <div class="btnlist">
            <button class="fuyuan">复原</button>
            <button class="black_white">变黑白</button>
            <button class="test1">反色</button>
            <button class="test2">冷色</button>
            <button class="test3">暖色</button>
            <div class="progress">
                <div>r：10~30 当前：<span class="redColor"></span></div>
                <div class="Rline">
                    <div class="Rcolorline">
                        <div class="Rtuozhuai"></div>
                    </div>
                    <div class="Rlinebg"></div>
                </div>
                <div style="margin-top: 30px;">g：10~30 当前：<span class="blueColor"></span></div>
                <div class="Bline">
                    <div class="Bcolorline">
                        <div class="Btuozhuai"></div>
                    </div>
                    <div class="Blinebg"></div>
                </div>

            </div>
            <button class="test4" style="margin-top: 10px;">冰冻效果</button>
            <button class="test5">熔铸效果</button>
            <button class="test6">连环画效果</button>
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    // window.onload = function () {
    $(function () {


        var canvas = document.getElementById('canvas')

        var context = canvas.getContext('2d'),
            image = document.getElementById('image'),
            imageData, data, i, len, average, red, green, blue, alpha



        var aaaaa = function () {
            console.log(1111)
        }


        const imageWidth = image.width;
        const imageHeight = image.height;
        const canvasWidth = canvas.width;
        const canvasHeight = canvas.height;

        const imageWHRate = imageWidth / imageHeight;
        const canvasWHRate = canvasWidth / canvasHeight;

        const calHeight = canvasWidth * (1 / imageWHRate);
        const calWidth = canvasHeight * imageWHRate;

        var newWidth = '';
        var newHeight = '';
        var xData = ''
        var yData = ''
        if (calHeight > canvasHeight) {
            newWidth = calWidth
            newHeight = canvasHeight
            xData = (canvasWidth - calWidth) / 2;
            yData = 0
        } else {
            newWidth = canvasWidth
            newHeight = calHeight
            yData = (canvasHeight - calHeight) / 2;
            xData = 0
            // 绘制原始图像
        }

        context.drawImage(image, xData, yData, newWidth, newHeight);



        // 取得图像数据
        imageData = context.getImageData(xData, yData, newWidth, newHeight);

        data = imageData.data;

        // 变黑白
        $('.black_white').click(function () {
            fuyuanImage()
            for (i = 0, len = data.length; i < len; i += 4) {
                red = data[i];
                green = data[i + 1];
                blue = data[i + 2];
                alpha = data[i + 3];

                // 求得平均值
                average = Math.floor((red + blue + green) / 3);

                data[i] = average;
                data[i + 1] = average;
                data[i + 2] = average;
            }
            imageData.data = data;

            // 回写图像数据并显示结果
            context.putImageData(imageData, xData, yData);
        })


        //////////////////////////////// 反色
        $('.test1').click(function () {
            fuyuanImage()
            for (i = 0, len = data.length; i < len; i += 4) {
                red = data[i];
                green = data[i + 1];
                blue = data[i + 2];
                alpha = data[i + 3];

                // 求得平均值
                average = Math.floor((red + blue + green) / 3);

                data[i] = (255 - red);
                data[i + 1] = (255 - green);
                data[i + 2] = (255 - blue);
            }
            imageData.data = data;

            // 回写图像数据并显示结果
            context.putImageData(imageData, xData, yData);
        })


        // 复原图片
        $('.fuyuan').click(function () {
            fuyuanImage()
            // context.drawImage(image, xData, yData, newWidth, newHeight);
        })

        // 复原图片
        function fuyuanImage() {
            context.drawImage(image, xData, yData, newWidth, newHeight);
            // 取得图像数据
            imageData = context.getImageData(xData, yData, newWidth, newHeight);
            data = imageData.data;
        }

        // ///////////// 冷色拖拽条
        var Rtag = false;

        var colorRRange = 10;
        var isCold = false;
        $('.redColor').html(colorRRange)
        $('.Rlinebg').mousedown(function (e) {
            console.log('按下', e.offsetX)
            $('.Rcolorline').width(e.offsetX);
            // $('.tuozhuai').css('left', e.offsetX)
            Rtag = true;
        })
        $('.Rlinebg').mousemove(function (e) {
            if (Rtag) {
                console.log(e.target == this)
                if (e.target == this) {
                    $('.Rcolorline').width(e.offsetX);
                    console.log(e.offsetX / 200 * 20 + 10)
                    colorRRange = Math.floor(e.offsetX / 200 * 20 + 10)
                    $('.redColor').html(colorRRange)
                    if (isCold) {
                        getCold()
                    } else {
                        getWarm()
                    }
                }
            }
        })
        $('.Rlinebg').mouseup(function (e) {
            Rtag = false;
        })
        $('.Rlinebg').mouseleave(function (e) {
            Rtag = false;
        })


        /////////////// 暖色拖拽条 
        var Btag = false;

        var colorBRange = 10;
        $('.blueColor').html(colorBRange)
        $('.Blinebg').mousedown(function (e) {
            console.log('按下', e.offsetX)
            $('.Bcolorline').width(e.offsetX);
            // $('.tuozhuai').css('left', e.offsetX)
            Btag = true;
        })
        $('.Blinebg').mousemove(function (e) {
            if (Btag) {
                console.log(e.target == this)
                if (e.target == this) {
                    $('.Bcolorline').width(e.offsetX);
                    console.log(e.offsetX / 200 * 20 + 10)
                    colorBRange = Math.floor(e.offsetX / 200 * 20 + 10)
                    $('.blueColor').html(colorBRange)
                    if (isCold) {
                        getCold()
                    } else {
                        getWarm()
                    }
                }
            }
        })
        $('.Blinebg').mouseup(function (e) {
            Btag = false;
        })
        $('.Blinebg').mouseleave(function (e) {
            Btag = false;
        })




        ////////////////////////////////// 冷色   r- b+
        $('.test2').click(function () {
            isCold = true;
            $(this).css({ background: '#ff5000', color: '#fff' })
            $('.test3').css({ background: '', color: '' })
            $('.progress').css({ display: 'block' })

            getCold()
        })
        ////////////////////////////////// 暖色   r+ b-
        $('.test3').click(function () {
            isCold = false;
            $(this).css({ background: '#ff5000', color: '#fff' })
            $('.test2').css({ background: '', color: '' })
            $('.progress').css({ display: 'block' })
            getWarm()
        })
        function getCold() {
            fuyuanImage()
            for (i = 0, len = data.length; i < len; i += 4) {
                red = data[i];
                green = data[i + 1];
                blue = data[i + 2];
                alpha = data[i + 3];

                data[i] = (red - colorRRange) <= 255 ? (red - colorRRange) : 255;
                data[i + 2] = (blue + colorBRange) <= 255 ? (blue + colorBRange) : 255;
            }
            imageData.data = data;

            // 回写图像数据并显示结果
            context.putImageData(imageData, xData, yData);
        }

        function getWarm() {
            fuyuanImage()
            for (i = 0, len = data.length; i < len; i += 4) {
                red = data[i];
                green = data[i + 1];
                blue = data[i + 2];
                alpha = data[i + 3];

                data[i] = (red + colorRRange) <= 255 ? (red + colorRRange) : 255;
                data[i + 2] = (blue - colorBRange) <= 255 ? (blue - colorBRange) : 255;
            }
            imageData.data = data;

            // 回写图像数据并显示结果
            context.putImageData(imageData, xData, yData);
        }

        // ///////////// 冰冻效果
        $('.test4').click(function () {
            fuyuanImage()
            for (i = 0, len = data.length; i < len; i += 4) {
                red = data[i];
                green = data[i + 1];
                blue = data[i + 2];
                alpha = data[i + 3];
                // 求得平均值
                average = Math.floor((red + blue + green) / 3);

                data[i] = Math.abs(red - green - blue) * 3 / 2;
                data[i + 1] = Math.abs(green - red - blue) * 3 / 2;
                data[i + 2] = Math.abs(blue - red - green) * 3 / 2;
            }
            imageData.data = data;

            // 回写图像数据并显示结果
            context.putImageData(imageData, xData, yData);
        })
        // ///////////// 熔铸效果
        $('.test5').click(function () {
            fuyuanImage()
            for (i = 0, len = data.length; i < len; i += 4) {
                red = data[i];
                green = data[i + 1];
                blue = data[i + 2];
                alpha = data[i + 3];

                data[i] = red * 128 / (green + blue + 1);
                data[i + 1] = green * 128 / (red + blue + 1);
                data[i + 2] = blue * 128 / (green + red + 1);
            }
            imageData.data = data;

            // 回写图像数据并显示结果 
            context.putImageData(imageData, xData, yData);
        })
        // ///////////// 连环画效果
        $('.test6').click(function () {
            fuyuanImage()
            for (i = 0, len = data.length; i < len; i += 4) {
                red = data[i];
                green = data[i + 1];
                blue = data[i + 2];
                alpha = data[i + 3];

                data[i] = Math.abs(green - blue + green + red) * red / 500;
                data[i + 1] = Math.abs(blue - green + blue + red) * red / 500;
                data[i + 2] = Math.abs(blue - green + blue + red) * green / 500;
            }
            imageData.data = data;

            // 回写图像数据并显示结果
            context.putImageData(imageData, xData, yData);
        })
    })
</script>

</html>

canvas 图像滤镜
这期完成了图像的一些简单的滤镜，问题就在于，关于rgb颜色之间的一些转换。第二期完成视频的人脸识别附上代码gif过...
canvas-09 图像源相关
常用图像源：图像元素：img 视频元素video canvas:canvas...
简单的canvas图像处理
本文将阐述如何使用canvas做一些最简单的图像处理，如水印添加、灰度滤镜等。先用HTML代码创建一个canva...
Canvas
Canvas绘图- JavaScript 来绘制图像使用 JavaScript 来绘制图像canvas 元素本身...
Core Image专题（二）
处理图像处理图像意味着应用滤镜 - 图像滤镜是逐像素检查输入图像，在算法上应用某种效果以创建输出图像。在Cor...
Canvas学习笔记之图像处理
Canvas 学习笔记 -- by Damon canvas对于图像的操作能力功能：动态的图像合成、图形的背景、...
图像滤镜
canvas+vue 共10个滤镜（好像马赛克写大图没有实现）源码地址：https://github.com...
使用OPenGL ES 实现滤镜功能
滤镜滤镜就是通过特定的算法编辑图像,使图像呈现不同的效果.其实滤镜的关键在片元着色器其实滤镜处理的原理:就是把静...
HTML5 - Canvas
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 Canvas 绘制图像在使用 ...
Core Image编程指南翻译二（图像处理）
示例代码下载图像处理图像处理意味着应用滤镜 - 图像滤镜是一个软件，它逐个像素地检查输入图像，并在算法上应用一...