13、在 uwp应用中,给图片添加高斯模糊滤镜效果(一)
如果在应用中,如果想要给app 添加模糊滤镜,可能第一想到的是第三方类库,比如 Win2d、lumia Imaging SDK 、WriteableBitmapEx,不可否认,这些类库功能强大,效果也挺多的。不足就是增加了生成包尺寸,由于增加了相应 dll 的引用,在 app运行时也会增加内存占用。如果只使用一种滤镜效果,建议直接添加几十行代码自己实现,这样开发、维护成本都会很少。并且由于 .net native 使得 uwp 的运算速度与 C++算法的运行速度没有差别了。
这里只讨论高斯模糊滤镜,感觉这个滤镜在应用中适当的运用,会让页面形象生动,比如图片背景使用这个滤镜,会有一些磨砂玻璃的效果。针对高斯模糊的算法网上也有很多,这里使用戴震军
大哥的曾经移植过的 windows phone7 的算法。这里主要解决的就是 silverlight(wpf)中 WriteableBitmap 中图片数据 int[] 数组到 windows runtime(uwp)中 WriteableBitmap中 byte[] 的转换。
Demo 的运行效果:
1)当不运用滤镜时 level 为 0(范围 0-40):
2)当 level 为 2时:
3)当 level 为 10时:
4)当 level 为 40时:
1、颜色值的分析:
1) 在 silverlight 或者 uwp 中,指定一个字体的前景色为绿色半透明:
<TextBlock Text="节约用电" FontSize="30" Foreground="#8800FF00"/>
显示为:
则在前景色中颜色的设置信息:
2) 运算符概述:
<< 和 >> 为位移运算符,比如对于二进制来说 0010 << 2 (右移2位)的计算结果就是 1000,等于把十进制的 2 变成了 8
| 运算符为 “或”运算,比如对于二进制来说 0100 | 0010 的计算结果 0110,等于把十进制 4|2 变为了 6
2、分析 Silverlight 中 WriteableBitmap 对象中的 int[] 数组
对于 silverlight、wpf 平台上图片(jpg、png)的编辑 WriteablBitmap 对象中使用的 int[] 数组,每个 int 值同时包含了 A(alpha)、R(red)、G(green)、B(Blue)四个信息值,每个值的范围是 0~255。
1)在 silverlight中,获取图片像素数据( int[] 数组 ):
// 100像素宽,100像素高
WriteableBitmap bitmap = new WriteableBitmap(, ); // 获取表示位图 2D 纹理的数组。
int[] data = bitmap.Pixels;
当然,这个 int[] 数组是一维数组,线性排列的。
3、分析 UWP 中 WriteableBitmap 类中的 byte[] 数组
对于 Windows Runtime (uwp) 中 WriteableBitmap 类来说,存储的图片数据为 byte[] 数组。
例如,获取一张图片中的像素数据(msdn 文档链接,WriteableBitmap):(WriteableBitmap 的图像源数据是基础像素缓冲区。WriteableBitmap.PixelBuffer不能直接写入)
using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
BitmapDecoder decoder = await BitmapDecoder.CreateAsync(fileStream);
// Scale image to appropriate size
BitmapTransform transform = new BitmapTransform() {
ScaledWidth = Convert.ToUInt32(Scenario4WriteableBitmap.PixelWidth),
ScaledHeight = Convert.ToUInt32(Scenario4WriteableBitmap.PixelHeight)
};
PixelDataProvider pixelData = await decoder.GetPixelDataAsync(
BitmapPixelFormat.Bgra8, // WriteableBitmap 使用的是 BGRA 格式
BitmapAlphaMode.Straight,
transform,
ExifOrientationMode.IgnoreExifOrientation, // This sample ignores Exif orientation
ColorManagementMode.DoNotColorManage
); // 包含图片的解码数据。在呈现之前可以被修改
byte[] sourcePixels = pixelData.DetachPixelData(); // 打开一个 image 的流,并且复制到 WriteableBitmap 的 pixel 缓冲区中
using (Stream stream = writeableBitmap.PixelBuffer.AsStream())
{
await stream.WriteAsync(sourcePixels, , sourcePixels.Length);
}
}
同样,对于 1)中描述 100X100 的图片的数据存储,因为一个 int 可以包含 4个 byte位的信息,所以对于 100x100 的 int[] 数组值,也就是 10000个 int值组成。当转换为 byte[] 数组值时,数组长度扩大四倍,变为 100x100x4 = 40000个 byte值。并且 byte 值是按照 B、G、R、A 的顺序排列:
4、int[] 与 byte[] 的互相转换
因为戴震军大哥移植的滤镜算法为 windows phone7 的工程,所以图片数据的计算是采用 silverlight中 int[] 数组的计算方式,所以这里我只做了两件事,一个是把 uwp 工程中源 WriteableBitmap 对象中 byte[] 数组的存储方式,转换为 silverlight 中的 int[] 数组的存储方式,然后对图片数据进行添加滤镜算法的处理,当处理完成时,再把处理结果 int[] 数组的数据再转换为 uwp 中 WriteableBitmap 的 byte[] 数组的存储方式:
1)uwp 中 byte[] 数组,转换为 silverlight 的 int[] 数组:
// 把 uwp 的 WriteableBitmap 对象的 PixelBuffer属性(IBuffer)转换为 byte[] 数组
byte[] colorBytes = BufferToBytes(image.PixelBuffer); // 转换为 silverlight 的 int[] 数组时,长度为 byte[] 数组的四分之一
colorArray = new int[colorBytes.Length / ]; int a,r, g, b;
int i = ; // 通过 i 自加,来遍历 byte[] 整个数组 // 通过图片的宽、高,分别设置 int[] 数组中每个像素的 ARGB 信息
for (int y = ; y < height; y++)
{
for (int x = ; x < width; x++)
{
// int[] 数组的索引
int index = y * width + x;
b = colorBytes[i++]; // Blue
g = colorBytes[i++]; // Green
r = colorBytes[i++]; // Red
a = colorBytes[i++]; // Alpha
colorArray[index] = (a << ) | (r << ) | (g << ) | b; // 4个 byte值存储为一个 int 值
}
}
2)当把上面的图片数据,添加高斯模糊滤镜效果之后,把 silverlight 中 int[] 数组的计算结果,转换为 uwp 的 byte[] 数组:
// 拷贝
WriteableBitmap new_bitmap = await Utility.BitmapClone(wb); // 添加高斯滤镜效果
MyImage mi = new MyImage(new_bitmap);
GaussianBlurFilter filter = new GaussianBlurFilter();
filter.Sigma = level;
filter.process(mi); // 图片添加完滤镜的 int[] 数组
int[] array = mi.colorArray; // byte[] 数组的长度是 int[] 数组的 4倍
byte[] result = new byte[array.Length * ]; // 通过自加,来遍历 byte[] 数组中的值
int j = ;
for (int i = ; i < array.Length; i++)
{
// 同时把 int 值中 a、r、g、b 的排列方式,转换为 byte数组中 b、g、r、a 的存储方式
result[j++] = (byte)(array[i]); // Blue
result[j++] = (byte)(array[i] >> ); // Green
result[j++] = (byte)(array[i] >> ); // Red
result[j++] = (byte)(array[i] >> ); // Alpha
} // Open a stream to copy the image contents to the WriteableBitmap's pixel buffer
using (Stream stream = new_bitmap.PixelBuffer.AsStream())
{
await stream.WriteAsync(result, , result.Length);
} img.Source = new_bitmap;// 把最终 WriteableBitmap 对象赋值给 Image 控件
5、代码中会用到的自定义帮助类:
namespace BlurEffect_demo
{
class Utility
{
/// <summary>
/// WriteableBitmap 的拷贝
/// </summary>
/// <param name="bitmap">原</param>
/// <returns></returns>
public static async Task<WriteableBitmap> BitmapClone(WriteableBitmap bitmap)
{
WriteableBitmap result = new WriteableBitmap(bitmap.PixelWidth, bitmap.PixelHeight); byte[] sourcePixels = Get_WriteableBitmap_bytes(bitmap); //byte[] resultPixels = new byte[sourcePixels.Length]; //sourcePixels.CopyTo(resultPixels, 0); using (Stream resultStream = result.PixelBuffer.AsStream())
{
await resultStream.WriteAsync(sourcePixels, , sourcePixels.Length);
}
return result;
} /// <summary>
/// 获取 WriteableBitmap 对象中的 byte[] 数组数据
/// </summary>
public static byte[] Get_WriteableBitmap_bytes(WriteableBitmap bitmap)
{
// 获取对直接缓冲区的访问,WriteableBitmap 的每个像素都写入直接缓冲区。
IBuffer bitmapBuffer = bitmap.PixelBuffer; //byte[] sourcePixels = new byte[bitmapBuffer.Length];
//Windows.Security.Cryptography.CryptographicBuffer.CopyToByteArray(bitmapBuffer, out sourcePixels);
//bitmapBuffer.CopyTo(sourcePixels); using (var dataReader = DataReader.FromBuffer(bitmapBuffer))
{
var bytes = new byte[bitmapBuffer.Capacity];
dataReader.ReadBytes(bytes);
return bytes;
}
}
}
}
6、高斯滤镜算法这里就不列出来了,具体可以参考 demo 工程
工程地址:link
参考阅读:
1)戴震军 :
blog : http://www.cnblogs.com/daizhj
github : https://github.com/daizhenjun/ImageFilterForWindowsPhone
2)WriteableBitmap.PixelBuffer property :https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.imaging.writeablebitmap.pixelbuffer.aspx
3)WriteableBitmap class : https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.imaging.writeablebitmap.aspx
4)WriteableBitmapEx : http://writeablebitmapex.codeplex.com/releases/view/612952
5)Getting Pixels of an Element(WriteableBitmap) // https://social.msdn.microsoft.com/Forums/en-US/39b3c702-caed-47e4-b7d3-b51d75cbca9b/getting-pixels-of-an-element-writeablebitmap?forum=winappswithcsharp
6) Windows 8 WriteableBitmap Pixel Arrays in C# and C++ : http://www.tuicool.com/articles/fQNvUz
7) 各种流转换 : http://www.cnblogs.com/hebeiDGL/p/3428743.html
8) XAML images sample : https://code.msdn.microsoft.com/windowsapps/0f5d56ae-5e57-48e1-9cd9-993115b027b9/
9) 重新想象 Windows 8 Store Apps (29) - 图片处理 : http://www.cnblogs.com/webabcd/archive/2013/05/27/3101069.html
13、在 uwp应用中,给图片添加高斯模糊滤镜效果(一)的更多相关文章
- javascript随机将第一个dom中的图片添加到第二个div中去
javascript随机将第一个dom中的图片添加到第二个div中去,此代码的是一个简单的例子,将第一个div中的五张图片中,提取随机两张显示到第二个div中. <!DOCTYPE html P ...
- VS2010中 为图片添加背景图片
很简单的东西,嘿嘿 void CTestDlg::OnPaint() { if (IsIconic()) { CPaintDC dc(this); // 用于绘制的设备上下文 SendMessage( ...
- html中给图片添加热点
<img src="images/index/top1.jpg" width="248" height="512" usemap=&q ...
- Java 添加、删除、格式化Word中的图片
本文介绍使用Spire.Cloud.SDK for Java提供的ImagesApi接口来操作Word中的图片.具体可通过addImage()方法添加图片.deleteImage()方法删除图片.up ...
- R语言 如何为图片添加文字说明(转载)
转载:(中文翻译者)[http://blog.csdn.net/chen790646223/article/details/49766659] (原文链接)[http://datascienceplu ...
- netbeans中给jpanl添加背景图片制定代码的理解——匿名内部类继承父类
此测试是为了仿照在netbeans中给jpanl添加背景图片的制定代码的执行过程 在JpDemo中定义了个Car类的数据类型,但在给其赋值对象时使用了匿名内部类,继承了Car类,是其子类,并重写了父类 ...
- Java 添加、替换、删除PDF中的图片
概述 本文介绍通过java程序向PDF文档添加图片,以及替换和删除PDF中已有的图片.另外,关于图片的操作还可参考设置PDF 图片背景.设置PDF图片水印.读取PDF中的图片.将PDF保存为图片等文章 ...
- Java 添加、提取PDF中的图片
Spire.Cloud.SDK for Java提供了PdfImagesApi接口可用于添加图片到PDF文档addImage().提取PDF中的图片extractImages(),具体操作步骤和Jav ...
- c# Winform中如何把图片添加到resources中
我们在Winform项目中中需要插入图片资源,但是新建的项目中找不到Resources文件夹,怎么才能出现呢? 1:双击项目下的Resources.resx,出现视图 2:单击"添加资源&q ...
随机推荐
- 51nod 1170 1770 数数字(动态规划)
解题思路:看到题后,直接想到分成两种情况: ①:a*b >9 这里又分成两种 1. n==1 a*b 直接是一个两位数 求得十位和个位(这里十位和个位不可能相等) 然后如果等于d 则结果=1 2 ...
- hdu 2050 折线分割平面
训练递推用题,第一次做这个题,蒙的,而且对了. #include <stdio.h> int main(void) { int c,a; scanf("%d",& ...
- 锋利的jQuery-3--用js给多选的checkbox或者select赋值
单选的select: <select id="single"> <option>Single</option> <option>Si ...
- Java统计数据库表中记录数
public static int count(String txyl_table) {// 获取用户数量 int i = 0;// Store_Information Connection con ...
- PyOpenGL利用文泉驿正黑字体显示中文字体
摘要:在NeHe的OpenGL教程第43课源代码基础上,调用文泉驿正黑字体实现中文字体的显示 在OpenGL中显示汉字一直是个麻烦的事情,很多中文书籍的文抄公乐此不疲地介绍各种方法及其在windows ...
- xcode SVN
Mac上SVN的管理工具: CornerStone http://blog.csdn.net/wohaoxuexi/article/details/8444184 步骤: 1. import 项目到s ...
- sql注入攻击的预防函数
/* 待更新 */ addslashes htmlspecialchars mysql_escape_string($string) mysql_real_escape_string($strin ...
- [官方教程] [ES4封装教程]1.使用 VMware Player 创建适合封装的虚拟机
[转载处,http://bbs.itiankong.com/] 前言: 首先要明确的一点,系统封装操作的源计算机一般为虚拟计算机(简称虚拟机.VM等),这也是为什么我们要在封装教程的第一章就专门学习虚 ...
- grep与egrep
当只有一个匹配条件时:egrep pattern file等价于grep -E pattern file 例如: 当多个匹配条件时,只能用egrep -e pattern1 -e pattern2 - ...
- Objective-C中的instancetype和id区别
目录(?)[-] 有一个相同两个不同相同 Written by Mattt Thompson on Dec 10th 2012 一什么是instancetype 二关联返回类型related resu ...