2012-07-21 14:06:09 jingwen3699 阅读数 9408
  • 16天Photoshop从入门到精修

    通过学习本课程,学员熟练掌握Photoshop(PS)软件的各种操作; 包括:软件安装配置,图层操作,工具栏所有工具使用方法, 字体,文本,图层,样式,滤镜,色彩等操作技巧。 通过实际案例练习,能够熟练掌握图片的调整,修饰,修复, 合成效果;可以独立使用软件完成各种图形的设计和图像的创意设计。

    4677 人正在学习 去看看 崔豆豆
为了便于大家对滤镜算法的学习,以后发布的图像处理滤镜系列帖子会在这里汇总,本人第一次写合集,写得不好的地方大家请见谅,手头上虽然有一些滤镜的算法,但是大多不是android版的,教程里的代码大多是我借鉴其他语言的算法转换而成的,效率上还存在优化的空间,大家可以自行优化。有些网友说代码能看懂,但是里面的某些数值不知道是怎么计算出来的,说实话有些数值我不查资料我也不是很清楚,但是当我需要知道的时候我也会慢慢查阅算法的核心思想,很多参数由此而来。同时也希望大家养成不懂就查的习惯。

android 图像处理滤镜系列之一  冰冻特效

android 图像处理滤镜系列之二  熔铸特效

android 图像处理滤镜系列之三  连环画特效

android 图像处理滤镜系列之四 柔化美白特效

android 图像处理滤镜系列之五  照亮边缘特效

android 图像处理滤镜系列之六  羽化特效

android 图像处理滤镜系列之七  缩放模糊

android 图像处理滤镜系列之八  LOMO特效
2019-11-26 20:32:26 shwan_ma 阅读数 30
  • 16天Photoshop从入门到精修

    通过学习本课程,学员熟练掌握Photoshop(PS)软件的各种操作; 包括:软件安装配置,图层操作,工具栏所有工具使用方法, 字体,文本,图层,样式,滤镜,色彩等操作技巧。 通过实际案例练习,能够熟练掌握图片的调整,修饰,修复, 合成效果;可以独立使用软件完成各种图形的设计和图像的创意设计。

    4677 人正在学习 去看看 崔豆豆

无意中发现的网站,里面有各种图像滤镜的实现方法:
https://www.kancloud.cn/trent/hotoimagefilter/102786

2017-04-04 16:24:42 u013085897 阅读数 9111
  • 16天Photoshop从入门到精修

    通过学习本课程,学员熟练掌握Photoshop(PS)软件的各种操作; 包括:软件安装配置,图层操作,工具栏所有工具使用方法, 字体,文本,图层,样式,滤镜,色彩等操作技巧。 通过实际案例练习,能够熟练掌握图片的调整,修饰,修复, 合成效果;可以独立使用软件完成各种图形的设计和图像的创意设计。

    4677 人正在学习 去看看 崔豆豆
       做了那么多滤镜,今天写一篇关于滤镜的博客。可能是现在滤镜太多了,现在所有的图像相关app,基本都有滤镜功能,同时还有很多开源滤镜程序。美食滤镜、风景滤镜、人像滤镜,每家滤镜都各有特色,可以说没有最好,只有更有特色的滤镜,不过身边很多人还是比较推崇VSCO的滤镜。
       那么滤镜程序都是如何实现的呢?我以前的工作流程是,滤镜效果由设计师使用ps设计,设计滤镜常用的ps功能是:调节饱和度及色相、调节曲线、叠加纹理等等,通过调节饱和度和色相,可以有针对性的调节某一个色系,使之变浓、变淡或者改变色调,而其他色系不变。同样,对rgb某一个通道进行曲线调节,可以非线性的拉伸或压缩某一颜色通道对整幅图像的影响,实现精细化的色调调节。叠加纹理要简单一些,将设计好的纹理,通过某种混合操作,叠加在原图上,实现各种特效,比如lomo滤镜,暗角除了可以通过算法生成外,也可以通过叠加纹理实现。而程序员拿到设计师的滤镜设计稿后,要做的就是编写程序高度还原设计效果。这一点多多少少还是有些挑战,因为ps经过多年发展后,不同版本有些功能效果还不一样,比如最为常见的亮度、对比度调节,算法很简单,但是要做到和ps效果一样,还是要花时间摸索、调试。我当时在实现过程中,比较难还原的是分色系:红、黄、绿、青、蓝、洋红进行饱和度及色相调节,比如整幅图像,只对红色部分进行调节,但是如果程序处理不佳,在红与黄、洋红颜色过渡带,会出现非常明显的色块、锯齿等各种非常差的效果,而ps就不会。这时就要反复推测ps的实现方式,努力做到自己的程序和ps效果一样。所以,滤镜其实也没什么复杂原理及公式推导,就是通过编写程序模拟ps各种操作,以还原设计师的设计效果。这里要提一下,对于图像处理算法工程师,如果ps不熟,那不及格的,哈哈。
       下面是一些滤镜效果图,主要包括黑白滤镜、美食滤镜、风景滤镜等。
    
    
    
       
       
       
    
    
    





2012-06-25 17:36:58 duanyu218 阅读数 633
  • 16天Photoshop从入门到精修

    通过学习本课程,学员熟练掌握Photoshop(PS)软件的各种操作; 包括:软件安装配置,图层操作,工具栏所有工具使用方法, 字体,文本,图层,样式,滤镜,色彩等操作技巧。 通过实际案例练习,能够熟练掌握图片的调整,修饰,修复, 合成效果;可以独立使用软件完成各种图形的设计和图像的创意设计。

    4677 人正在学习 去看看 崔豆豆
http://www.eoeandroid.com/home.php?mod=space&uid=567786&do=thread&view=me&from=space
2019-09-23 17:41:56 setsunadoudou 阅读数 19
  • 16天Photoshop从入门到精修

    通过学习本课程,学员熟练掌握Photoshop(PS)软件的各种操作; 包括:软件安装配置,图层操作,工具栏所有工具使用方法, 字体,文本,图层,样式,滤镜,色彩等操作技巧。 通过实际案例练习,能够熟练掌握图片的调整,修饰,修复, 合成效果;可以独立使用软件完成各种图形的设计和图像的创意设计。

    4677 人正在学习 去看看 崔豆豆

灰度滤镜

将颜色的RGB设置为相同的值即可使得图片为灰色,一般处理方法有: 1、取三种颜色的平均值 2、取三种颜色的最大值(最小值) 3、加权平均值:0.3R 0.59G 0.11*B

for(var i = 0; i < data.length; i =4) {
     var grey = (data[i]   data[i 1]   data[i 2]) / 3;
     data[i] = data[i 1] = data[i 2] = grey;
}

image.png

黑白滤镜

顾名思义,就是图片的颜色只有黑色和白色,可以计算rgb的平均值arg,arg>=100,r=g=b=255,否则均为0

for(var i = 0; i < data.length; i  = 4) {
     var avg = (data[i]   data[i 1]   data[i 2]) / 3;
     data[i] = data[i 1] = data[i 2] = avg >= 100 ? 255 : 0;
}

image.png

反向滤镜

就是RGB三种颜色分别取255的差值。

for(var i = 0; i < data.length; i = 4) {
      data[i] = 255 - data[i];
      data[i   1] = 255 - data[i   1];
      data[i   2] = 255 - data[i   2];
}

image.png

去色滤镜

rgb三种颜色取三种颜色的最值的平均值。

for(var i = 0; i < data.length; i  ) {
   var avg = Math.floor((Math.min(data[i], data[i 1], data[i 2])   Math.max(data[i], data[i 1], data[i 2])) / 2 );
   data[i] = data[i 1] = data[i 2] = avg;
}

单色滤镜

就是只保留一种颜色,其他颜色设为0

for(var i = 0; i < canvas.height * canvas.width; i  ) {
    data[i*4   2] = 0;
    data[i*4   1] = 0;
}

高斯模糊滤镜

高斯模糊的原理就是根据正态分布使得每个像素点周围的像素点的权重不一致,将各个权重(各个权重值和为1)与对应的色值相乘,所得结果求和为中心像素点新的色值。我们需要了解的高斯模糊的公式:

function gaussBlur(imgData, radius, sigma) {
    var pixes = imgData.data,
        height = imgData.height,
        width = imgData.width,
        radius = radius || 5;
        sigma = sigma || radius / 3;
    
    var gaussEdge = radius * 2   1;

    var gaussMatrix = [],
        gaussSum = 0,
        a = 1 / (2 * sigma * sigma * Math.PI),
        b = -a * Math.PI;
    
    for(var i = -radius; i <= radius; i  ) {
        for(var j = -radius; j <= radius; j  ) {
            var gxy = a * Math.exp((i * i   j * j) * b);
            gaussMatrix.push(gxy);
            gaussSum  = gxy;
        }
    }
    var gaussNum = (radius   1) * (radius   1);
    for(var i = 0; i < gaussNum; i  ) {
        gaussMatrix[i] /= gaussSum;
    }

    for(var x = 0; x < width; x  ) {
        for(var y = 0; y < height; y  ) {
            var r = g = b = 0;
            for(var i = -radius; i<=radius; i  ) {
                var m = handleEdge(i, x, width);
                for(var j = -radius; j <= radius; j  ) {
                    var mm = handleEdge(j, y, height);
                    var currentPixId = (mm * width   m) * 4;
                    var jj = j   radius;
                    var ii = i   radius;
                    r  = pixes[currentPixId] * gaussMatrix[jj * gaussEdge   ii];
                    g  = pixes[currentPixId   1] * gaussMatrix[jj * gaussEdge   ii];
                    b  = pixes[currentPixId   2] * gaussMatrix[jj * gaussEdge   ii];
                }
            }
            var pixId = (y * width   x) * 4;

            pixes[pixId] = ~~r;
            pixes[pixId   1] = ~~g;
            pixes[pixId   2] = ~~b;
        }
    }
    imgData.data = pixes;
    return imgData;
}

function handleEdge(i, x, w) {
    var m = x   i;
    if(m < 0) {
        m = -m;
    } else if(m >= w) {
        m = w   i -x;
    }
    return m;
}

怀旧滤镜

怀旧滤镜公式

for(var i = 0; i < imgData.height * imgData.width; i  ) {
    var r = imgData.data[i*4],
        g = imgData.data[i*4 1],
        b = imgData.data[i*4 2];

    var newR = (0.393 * r   0.769 * g   0.189 * b);
    var newG = (0.349 * r   0.686 * g   0.168 * b);
    var newB = (0.272 * r   0.534 * g   0.131 * b);
    var rgbArr = [newR, newG, newB].map((e) => {
        return e < 0 ? 0 : e > 255 ? 255 : e;
    });
    [imgData.data[i*4], imgData.data[i*4 1], imgData.data[i*4 2]] = rgbArr;
}

熔铸滤镜

公式: r = r128/(g b 1); g = g128/(r b 1); b = b*128/(g r 1);

for(var i = 0; i < imgData.height * imgData.width; i  ) {
    var r = imgData.data[i*4],
        g = imgData.data[i*4 1],
        b = imgData.data[i*4 2];

    var newR = r * 128 / (g   b   1);
    var newG = g * 128 / (r   b   1);
    var newB = b * 128 / (g   r   1);
    var rgbArr = [newR, newG, newB].map((e) => {
        return e < 0 ? 0 : e > 255 ? 255 : e;
    });
    [imgData.data[i*4], imgData.data[i*4 1], imgData.data[i*4 2]] = rgbArr;
}

image.png

冰冻滤镜

公式: r = (r-g-b)*3/2; g = (g-r-b)*3/2; b = (b-g-r)*3/2;

for(var i = 0; i < imgData.height * imgData.width; i  ) {
    var r = imgData.data[i*4],
        g = imgData.data[i*4 1],
        b = imgData.data[i*4 2];

    var newR = (r - g -b) * 3 /2;
    var newG = (g - r -b) * 3 /2;
    var newB = (b - g -r) * 3 /2;
    var rgbArr = [newR, newG, newB].map((e) => {
        return e < 0 ? 0 : e > 255 ? 255 : e;
    });
    [imgData.data[i*4], imgData.data[i*4 1], imgData.data[i*4 2]] = rgbArr;
}

连环画滤镜

公式: R = |g – b g r| * r / 256

G = |b – g b r| * r / 256;

B = |b – g b r| * g / 256;

for(var i = 0; i < imgData.height * imgData.width; i  ) {
    var r = imgData.data[i*4],
        g = imgData.data[i*4 1],
        b = imgData.data[i*4 2];

    var newR = Math.abs(g - b   g   r) * r / 256;
    var newG = Math.abs(b -g   b   r) * r / 256;
    var newB =  Math.abs(b -g   b   r) * g / 256;
    var rgbArr = [newR, newG, newB];
    [imgData.data[i*4], imgData.data[i*4 1], imgData.data[i*4 2]] = rgbArr;
}

image.png

褐色滤镜

公式: r = r * 0.393 g * 0.769 b * 0.189; g = r * 0.349 g * 0.686 b * 0.168; b = r * 0.272 g * 0.534 b * 0.131;

for (var i = 0; i < imgData.height * imgData.width; i  ) {
    var r = imgData.data[i * 4],
        g = imgData.data[i * 4   1],
        b = imgData.data[i * 4   2];

    var newR = r * 0.393   g * 0.769   b * 0.189;
    var newG = r * 0.349   g * 0.686   b * 0.168;
    var newB =  r * 0.272   g * 0.534   b * 0.131;
    var rgbArr = [newR, newG, newB];
    [imgData.data[i * 4], imgData.data[i * 4   1], imgData.data[i * 4   2]] = rgbArr;
}

image

数字图像处理

阅读数 163

Android 滤镜效果

阅读数 1568

没有更多推荐了,返回首页