专栏首页拂晓风起Flash图片处理 图像处理 效果 滤镜 pixelbender blender mode

Flash图片处理 图像处理 效果 滤镜 pixelbender blender mode

本文原创,总结Flash一般的图像处理方法,主要介绍PixelBender。

1 各种Filter类

  • 斜角滤镜(BevelFilter 类) 可创建立体效果的文字或图像
  • 模糊滤镜(BlurFilter 类) 对文字或图片进行模糊处理
  • 投影滤镜(DropShadowFilter 类) 添加阴影效果
  • 发光滤镜(GlowFilter 类) 添加发光效果
  • 渐变斜角滤镜(GradientBevelFilter 类) 可使用多种颜色渐变实现斜角效果
  • 渐变发光滤镜(GradientGlowFilter 类) 可使用多种颜色渐变实现发光效果
  • 颜色矩阵滤镜(ColorMatrixFilter 类) 可设置图片的亮度、对比度、饱和度、色相
  • 卷积滤镜(ConvolutionFilter 类) 可实现图片的锐化、边缘、雕刻效果
  • 置换图滤镜(DisplacementMapFilter 类) 可实现两张图片之间的切换效果
  • 着色器滤镜(ShaderFilter 类) 可通过应用不同的pbj文件,实现多种效果!例如:聚焦模糊、铅笔画、反色、马赛克、调色效果等

  前6个小玩意,正好对应Flash CS滤镜面板的几个效果,使用比较简单,详细可以参考这个: http://blog.sina.com.cn/s/blog_3fbce8b10100o8oz.html 。

  后边的颜色矩阵滤镜和着色器滤镜就强大很多。下边详细说颜色矩阵滤镜。

2 颜色矩阵滤镜ColorMatrixFilter

     上边的几个滤镜都会在元件周围或者里边做一些额外的显示,如果要只修改图片本身的色彩,例如黑白化,还是需要ColorMatrixFilter出马了。

参考:

http://blog.csdn.net/flag_and_leg/article/details/6412945

http://blog.sina.com.cn/s/blog_49b35d540100aks4.html

     ColorMatrixFilter就是对图像中每个点的颜色值做调整,包括alpha值。使用ColorMatrixFilter很简单,但如果设置好里边每一个数值就非常有考究。

     例如上述的参考网站中,要把一个图片黑白化(灰度),非常简单几句:

            //加载一张彩色图片  
            var image:Bitmap=new Bitmap();  
            image=Bitmap(loader.content);  
            //定义滤镜matrix,一个包含20个项的数组  
            var matrix:Array=[0.3086, 0.6094, 0.0820, 0, 0,  
                    0.3086, 0.6094, 0.0820, 0, 0,  
                    0.3086, 0.6094, 0.0820, 0, 0,  
                    0,      0,      0,      1, 0];  
                //初始化一个ColorMatrixFilter对象(matrix作为参数)  
            var myfilter:ColorMatrixFilter=new ColorMatrixFilter(matrix);  
            //将滤镜应用于图片  
            image.filters=[myfilter];  

     可以在这里尝试一下自己手工调整矩阵每个数字:

http://d2fhka9tf2vaj2.cloudfront.net/tuts/070_effectsTester/Preview/EffectsTester.html

     另外,也有人整理了一些比较常用的基础照片处理用到的ColorMatrixFilter代码(对比度、饱和度、亮度什么的):

http://code.google.com/p/ghostcat/source/browse/trunk/GhostCat/src/ghostcat/filter/ColorMatrixFilterProxy.as?spec=svn596&r=476

     用这个代码,分别试验亮度、对比度和反相:

     至于为什么是这么做,也有人说了一点分析:

http://cjdyx815.blog.163.com/blog/static/187705056201172322035148/

     但由于这些都很容易搜索到,所以,这里就不详细展开说了。

     那么,使用ColorMatrixFilter除了上述这些基本的照片处理功能外,有没有办法做出现成一点,比较有实际意义的滤镜效果呢?

     答案是当然可以。例如上边说的黑白化就是了。

黑白:

 [0.3086, 0.6094, 0.0820, 0, 0, 
  0.3086, 0.6094, 0.0820, 0, 0, 
  0.3086, 0.6094, 0.0820, 0, 0, 
  0,      0,      0,      1, 0]

旧照片:(网上搜集回来的,具体为什么这么计算,太难考究)

 [0.3930000066757202, 0.7689999938011169, 0.1889999955892563, 0, 0,
  0.3490000069141388, 0.6859999895095825, 0.1679999977350235, 0, 0,
  0.2720000147819519, 0.5339999794960022, 0.1309999972581863, 0, 0,
  0, 0, 0, 1, 0]

3 更原始的操作getPixel

  通过BitmapData的getPixel,我们可以获取到每个像素点的颜色值,然后可以分离出红绿蓝每个通道的颜色,反之,也可以通过红绿蓝分别的值得到合并后的RGB值。

方法:

     private static function mergeRGB(red:uint, green:uint, blue:uint):uint
     {
        return red << 16 | green << 8 | blue;
     }
 
     private static function getRed(color:uint):uint
     {
        return (color >> 16) & 0xFF;     
     }
 
     private static function getGreen(color:uint):uint
     {
        return (color >> 8) & 0xFF;
     }
 
     private static function getBlue(color:uint):uint
     {
        return color & 0xFF;
     }

     那么,分离有什么用呢?单纯分离出每个通道的色值,当然没什么用。。。但通过各种图像算法,把每个通道的色值做一定修改、叠加,然后用setPixel还原回去,得到新的bitmapData,就会有新的图像了。

     但是,这个合并算法,当然相对比较复杂了。但我们还是可以google到一些零星的例子,例如接下来要展示的LOMO效果:

     上边4个图,分别就是几步操作的结果,详细参考: http://bbs.9ria.com/thread-83906-1-1.html

  • 滤色。产生漂白效果;作为第三步底图
  • 反相。作为第三步前景图
  • 前景图的蓝色通道20%叠加到底图。(叠加色r=覆盖色r*覆盖alpha+底色r*(1-覆盖色alpha))

4 高级高效的pixelbender

     其实pixelbender,在我理解,是getPixel的高级版,按官方介绍说,getPixel,我们只能逐个逐个点去算,但pixelbender是独立的程序,可以一批去算。比较简洁的介绍: http://www.pixelbender.cn/?p=130

 什么是一个pixel shader?简单来说,就是一个用来计算像素值的程序。这样说也好像太简单了吧,不过这就是pixel shader要做的基本任务。各种pixel shader都是由输入和复杂运算算法组成的,最后它只会告诉你:“这个像素应该是这个值。”

     有很多原因说明为什么Pixel Bender是一项牛B项目、为什么人们都为它感到兴奋。第一,Pixel Bender可以应用于位图、填充以及其它可视对象,然后运行pixel shader作用在每一个像素。不是逐个逐个,而是一次过。没错,它是在同一时间计算一个区域内的所有像素值。它编译后得到优化并且运行在独立的进程,是 独立于Flash Player的。总而言之,相对于Flash里的图形处理,pixel shader的执行效率是非常快的。

简单几步就可以理解pixelbender了:

  • 打开pixelbender toolkit,打开图片,load一个filter,然后看看代码看看效果。效果就是那些代码跑出来的。。就是输入input几个图片,然后evalutePixel计算每个像素是什么值。
  • 学习基本的数据类型、语法。学会怎么在toolkit中编写简单的程序。 http://www.pixelbender.cn/?p=154
    •  image4和pixel4、float4都是有4通道的意思,是一个结构体。pixel4每个通道的值都是0到1范围内,要转为255那种,就乘以255即可。
    • float3 * float3,两个矢量相乘,比较特殊,这里不是矩阵乘法,而是分别用第一个元素乘以第一个元素,第二个乘以第二个。。
    • 所有常量数字都写小数位,强制为float,否则跟float运算会出错。
    • 数组array不能用在供flash player加载的pixel bender代码中。取巧的办法是,用一个宽为array.length,高为1的bitmapdata传递,再用sampleNearest(src, float2(x, y))取出
  • 了解基本的函数。 outCoord()获取当前像素坐标, sampleNearest()。它需要传入两个参数,第一个是图片,第二个是包含x和y坐标值的float2变量。它会找到最接近float2变量的那个像素,然后返回该像素值
  • 加入参数。这个在toolkit中很方便使用,会自动生成相应的控制条。
  • 基本控制:if else。没有for while什么的
  • 如何在as中使用。可以纯粹的当工具使用,也可以用作滤镜、填充、混合模式
    • 导出pbj文件;
    • 加载/嵌入pbj。加载: var shader:Shader = new Shader(loader.data)。嵌入: [Embed(source="pixelate.pbj",mimeType="application/octet-stream")] 
      • 如果new shader就一直提示#2004错误,试试删除一些pb代码,很可能是某些内建函数在flash中不支持。例如normalize。一定要在Toolkit中使用Flash模式测试
    • 纯粹的当工具使用。ShaderJob,传入Shader和结果存储的target(例如新的BitmapData),可以异步或同步处理数据。
    • 用于填充: graphics.beginShaderFill(shader);
    • 用于滤镜: var filter:ShaderFilter=new ShaderFilter(shader);然后赋值给元件的filters属性。自动把该元件的作为第一个image4输入。
    • 用于混合模式。http://www.pixelbender.cn/?p=73。设置参数: shader.data.xres.value = [20];  其中xres是pb代码中设置的参数,以数组形式赋值
      • foregroundShape.blendShader = shader; foregroundShape.blendMode = BlendMode.SHADER;
      • 使用着色器作为混和模式时,着色器必须由至少两个输入定义。如果未手工指定,则将两个混和后的图像自动用作着色器的输入。前景图像 设置为第二个图像。(此显示对象便是要对其应用混和模式的对象。)背景图像由前景图像边框后的所有像素组合而成。背景图像设置为第一个输入图像。如果所用 着色器要求两个以上的输入,则还需为前两个之外的其它输入提供值。
    • 输入图片: shader.data.src.input = image.bitmapData;  pb代码是 input image4 src

效率对比

本次对比使用了一个利用三张模版图片混合实现的滤镜(照片秀滤镜——彩虹)作为测试:

getPixel逐个计算

pixelBender

大图(2592*1936)

31秒

480毫秒

小图(402*402)

1.2秒

120毫秒

     可以看出,效率是天壤之别。。

5 更进一步的图像处理

     到了上边说的getPixel和pixelbender层级之后,我们就会发现,越来越迷惑,为什么一些滤镜要各种相乘相加相减。有什么道理么?

     如果需要明白这些,就需要从图像的基本知识开始了。例如RGB是什么,饱和度是什么等等。

     但一般用到几个图像合并的话,就需要了解blend mode。也就是相乘相加什么的,赶紧点这里: http://en.wikipedia.org/wiki/Blend_modes

     另外也可以跟摄影照片后期处理的曲线关联起来,理解一下。

     比较常见的是:Multiply和Screen,分别让图片变暗和变亮

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SSH 项目过程中遇到的问题和解决方法汇总 struts2 spring hibernate

    用户1258909
  • C++调用C链接库

    用户1258909
  • vc6.0编译时常见错误及改正方法

    用户1258909
  • Flutter之SliverAppBar

    SliverAppBar控件可以实现页面头部区域展开、折叠的效果,类似于Android中的CollapsingToolbarLayout。

    老孟Flutter
  • 辣眼睛,看别人如何用Jetson TX1花式逗猫!

    如果你最近在阅读人工智能(artificial intelligence,简称AI)、深度学习(deep learning)和神经网络(neural netwo...

    GPUS Lady
  • [C#1] 7-枚举

    1.Enum 枚举是定义了一组符号名称和数值对,如下: 1 //byte、sbyte、short、ushort、int、uint、long 或 ulong ...

    blackheart
  • 【C#】工具类-FTP操作封装类FTPHelper

    转载:http://blog.csdn.net/gdjlc/article/details/11968477

    跟着阿笨一起玩NET
  • 运算符重载,以及迭代器[foreach]示例

     以下代码来源于"c#高级编程(第4版)",只不过我对它做了一些注释和修改 using System; using System.Collections; ...

    菩提树下的杨过
  • 如何动态获取Dubbo服务提供方地址列表

    dubbo框架本身提供了丰富的负载均衡策略,比如轮询、随机、最少活跃调用数、一致性hash等,但是有时候我们需要自己根据业务指定某个ip来进行调用。要指定ip进...

    加多
  • 【ICCV 目标跟踪性能最优】首个应用残差学习的深度目标跟踪算法

    【新智元导读】不同于在目标检测和识别等领域取得的丰硕成果,深度学习在目标跟踪领域进展相对缓慢,很大原因是缺乏数据——目标跟踪只有第一帧的标定框作为训练数据,在这...

    新智元

扫码关注云+社区

领取腾讯云代金券