使用 ChromaKey 滤镜进行抠图

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

简介

Nokia Imaging SDK 1.0 中新提供的 ChromaKey 滤镜是一个神奇的滤镜，它的基本原理就是把

一个指定范围值内的颜色变为透明或半透明，比如下面的 demo 演示的，看上去第一张照片的两个人物的

拍摄地点由屋子里变成了沙滩：

原理是用 ChromaKey 滤镜把第一张图片的背景色去除，然后用 Blend 滤镜，与第二张图片进行融合，显示结果就是

第三张图片。

由此可以预见，使用这个滤镜，如果背景素材丰富的话，可以提供各种有趣的效果。在其它场景的应用交互中，这个滤镜也是

大有作为的。

步骤：

1）首先在 VS 中新建一个名为 ChromaKeyFilterSample 的解决方案，并且通过 NuGet 添加 Imaging SDK 类库，

具体参照上一篇文章。

2）在工程的根目录下面添加两张图片，作为下面的处理过程的素材：

图片一：

图片二：

3）在 MainPage 的 xaml 页面，添加三个 Image 控件，分别显示两张原图和结果：

4）在页面的 Loaded 事件中，分别显示两张原图：

// 存储两张原图片的流
Stream stream_pic_1;
Stream stream_pic_2;
async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
// 获取 xap 包中的图片
stream_pic_1 = App.GetResourceStream(new Uri("pic_1.jpg", UriKind.Relative)).Stream;
stream_pic_2 = App.GetResourceStream(new Uri("pic_2.jpg", UriKind.Relative)).Stream; BitmapImage bitmap_1 = new BitmapImage();
bitmap_1.SetSource(stream_pic_1);
pic1.Source = bitmap_1; BitmapImage bitmap_2 = new BitmapImage();
bitmap_2.SetSource(stream_pic_2);
pic2.Source = bitmap_2; }

显示效果：

为了显示效果明显，把 MainPage 页面的背景色改为了淡蓝色： Background="AliceBlue"

5）继续在 MainPage_Loaded 页面中添加处理代码。在 PhotoShop 中，用拾色器查看图片一

的背景色大致为 #6f9c87，然后给图片一运用 ChromaKeyFilter 滤镜：

stream_pic_1.Position = ;
stream_pic_2.Position = ; var filters = new IFilter[]
{
//6f9c87
new ChromaKeyFilter(Windows.UI.Color.FromArgb(0xff, 0x6f, 0x9c, 0x87), 0.3d),//颜色值和颜色范围
}; WriteableBitmap writeableBitmap = new WriteableBitmap(, );// 给图片添加滤镜的管道过程
using (StreamImageSource streamImageSource = new StreamImageSource(stream_pic_1))
using (FilterEffect filterEffect = new FilterEffect(streamImageSource) { Filters = filters })
using (var renderer = new WriteableBitmapRenderer(filterEffect, writeableBitmap, OutputOption.Stretch))
{
await renderer.RenderAsync(); imgResult.Source = writeableBitmap;
}

具体滤镜的使用可以参考链接

到这里，运行代码显示效果可以看出，图片一的背景色去除了，显示出了页面的淡白色：

6）这个步骤就是把上一步中，图片一的处理结果和图片二进行融合，继续在 MainPage_Loaded 方法中，

把上面的这行代码注释掉：

// imgResult.Source = writeableBitmap;

然后继续添加 Blend 滤镜。BlendFilter 的一个属性就是指定它的 BitmapImageSource 类型的前景图片，然后

指定两张图片的融合方式：

运行结果，可以看出，两张照片已经融合到了一起：

到这里，这个神奇的滤镜的讲解就完成了。

7）因为在 Iamging SDK 中，可以通过 ColorImageSource 类，初始化一个纯色背景的图片源，通过它再跟

第一张图片进行融合，就可以改变背景的颜色。把 步骤 6）上面添加 ”沙滩背景“ 的代码注释掉，添加下面代码，

直接把蓝色背景换成了耀眼的红色：

// 纯色
using (ColorImageSource colorImageSource = new ColorImageSource(new Windows.Foundation.Size(, ),
Windows.UI.Color.FromArgb(, , , )))
using (FilterEffect filterEffect = new FilterEffect(colorImageSource) { Filters = filtersBlend })
using (var renderer = new WriteableBitmapRenderer(filterEffect, writeableBitmap, OutputOption.Stretch))
{
await renderer.RenderAsync(); imgResult.Source = writeableBitmap;
}

其中的，下面这行代码的意思是初始化一张 450x450 的背景为红色的半透明的 ImageSource 对象：

ColorImageSource colorImageSource = new ColorImageSource(new Windows.Foundation.Size(, ),
Windows.UI.Color.FromArgb(, , , ))

运行代码显示效果：

8）另外，在 Imaging SDK 中，还提供了一个 RadialGradient 类，用它可以初始化一个渐变色的 ImageSource 对象，

注释掉 7）中的代码，用下面的代码给图片一添加一个紫色的渐变背景色：

// 渐变色
var rad = new RadialGradient(new Windows.Foundation.Point(0.5, 0.9), new EllipseRadius(0.3, 0.3));
rad.Stops = new GradientStop[]
{
new GradientStop() { Color = Windows.UI.Color.FromArgb(, , , ), Offset = },
//e70aef
new GradientStop() { Color = Windows.UI.Color.FromArgb(0xff, 0xe7, 0x0a, 0xef), Offset = }
}; using(var gradImageSource = new GradientImageSource(new Windows.Foundation.Size(, ), rad))
using (FilterEffect filterEffect = new FilterEffect(gradImageSource) { Filters = filtersBlend })
//using (FilterEffect filterEffect = new FilterEffect(gradImageSource))
using (var renderer = new WriteableBitmapRenderer(filterEffect, writeableBitmap, OutputOption.Stretch))
{
await renderer.RenderAsync(); imgResult.Source = writeableBitmap;
}

工程运行效果：