原文:重新想象 Windows 8 Store Apps (29) - 图片处理

[源码下载]

重新想象 Windows 8 Store Apps (29) - 图片处理

作者:webabcd

介绍
重新想象 Windows 8 Store Apps 之 图片处理

  • 显示图片
  • 图片的 9 切片
  • WriteableBitmap
  • 获取和修改图片属性
  • 对图片文件做“缩放/旋转/编码”操作,并保存操作后的结果

示例
1、演示最基础的图片显示
Image/Display.xaml

<Page
x:Class="XamlDemo.Image.Display"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:XamlDemo.Image"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> <Grid Background="Transparent">
<StackPanel Margin="120 0 0 0" Orientation="Horizontal" VerticalAlignment="Top"> <Border BorderBrush="Red" BorderThickness="1" Width="200" Height="100" Margin="20 0 0 0">
<Image Source="/Assets/Logo.png" Stretch="Uniform" Width="200" Height="100" />
</Border> <Border BorderBrush="Red" BorderThickness="1" Width="200" Height="100" Margin="20 0 0 0">
<Image Source="ms-appx:///Assets/Logo.png" Stretch="Uniform" Width="200" Height="100" />
</Border> <Border BorderBrush="Red" BorderThickness="1" Width="200" Height="100" Margin="20 0 0 0">
<Image x:Name="img" Stretch="Uniform" Width="200" Height="100" />
</Border> <Border BorderBrush="Red" BorderThickness="1" Width="200" Height="100" Margin="20 0 0 0">
<Image x:Name="img2" Stretch="Uniform" Width="200" Height="100" />
</Border> </StackPanel>
</Grid>
</Page>

Image/Display.xaml.cs

/*
* 演示最基础的图片显示
*
* 注:
* 1、引用 package 中的图片用:ms-appx:///
* 2、引用 ApplicationData 中的图片:
* a) LocalFolder 对应 ms-appdata:///local/
* b) RoamingFolder 对应 ms-appdata:///roaming/
* c) TemporaryFolder 对应 ms-appdata:///temp/
*/ using System;
using Windows.Storage.Streams;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Imaging;
using Windows.UI.Xaml.Navigation; namespace XamlDemo.Image
{
public sealed partial class Display : Page
{
public Display()
{
this.InitializeComponent();
} protected async override void OnNavigatedTo(NavigationEventArgs e)
{
// code-behind 指定图片源
img.Source = new BitmapImage(new Uri("ms-appx:///Assets/Logo.png", UriKind.Absolute)); // code-behind 指定图片源
RandomAccessStreamReference imageStreamRef = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/Logo.png", UriKind.Absolute));
IRandomAccessStream imageStream = await imageStreamRef.OpenReadAsync();
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.SetSource(imageStream);
img2.Source = bitmapImage;
}
}
}

2、演示图片的 NineGrid
Image/NineGrid.xaml

<Page
x:Class="XamlDemo.Image.NineGrid"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:XamlDemo.Image"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> <Grid Background="Transparent">
<StackPanel Margin="120 0 0 0" Orientation="Horizontal" VerticalAlignment="Top"> <!--
Image - 图片控件
NineGrid - 指定9网格(相当于flash中的9切片)中的4条线,Thickness 类型
Left - 左边的线相对于图片最左端的距离
Top - 上边的线相对于图片最顶端的距离
Right - 右边的线相对于图片最右端的距离
Bottom - 下边的线相对于图片最底端的距离 以下示例图片的原始大小为 16 * 16
--> <Image Source="/Assets/NineGrid/Demo.png" Width="200" Height="200" /> <!--通过指定9切片,防止边框被放大或缩小-->
<Image Source="/Assets/NineGrid/Demo.png" Width="200" Height="200" NineGrid="1 1 1 1" Margin="20 0 0 0" /> </StackPanel>
</Grid>
</Page>

3、演示 WriteableBitmap 的应用
Image/WriteableBitmapDemo.xaml

<Page
x:Class="XamlDemo.Image.WriteableBitmapDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:XamlDemo.Image"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> <Grid Background="Transparent">
<StackPanel Margin="120 0 0 0"> <Image x:Name="img" Width="300" Height="300" HorizontalAlignment="Left" /> <Button x:Name="btnLoadImage" Content="load image" Margin="0 10 0 0" Click="btnLoadImage_Click_1" /> <Button x:Name="btnChangePixel" Content="加载一个图片并修改其中的像素的颜色值" Margin="0 10 0 0" Click="btnChangePixel_Click_1" /> <Button x:Name="btnCreatePixel" Content="创建一个图片,设置其每个像素的颜色值" Margin="0 10 0 0" Click="btnCreatePixel_Click_1" /> </StackPanel>
</Grid>
</Page>

Image/WriteableBitmapDemo.xaml.cs

/*
* 演示 WriteableBitmap 的应用
*
* 注:WriteableBitmap 使用的是 BGRA 格式
*/ using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Imaging;
using System;
using System.IO;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Graphics.Imaging;
using Windows.Storage;
using Windows.Storage.Streams; namespace XamlDemo.Image
{
public sealed partial class WriteableBitmapDemo : Page
{
public WriteableBitmapDemo()
{
this.InitializeComponent();
} // 加载一个图片
private async void btnLoadImage_Click_1(object sender, RoutedEventArgs e)
{
// 实例化一个 300*300 的 WriteableBitmap,并将其作为 Image 控件的图片源
WriteableBitmap writeableBitmap = new WriteableBitmap(, );
img.Source = writeableBitmap; StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/Logo.png"));
using (IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read))
{
// 设置 WriteableBitmap 对象的图片流
await writeableBitmap.SetSourceAsync(fileStream);
}
} // 加载一个图片并修改其中的像素的颜色值
private async void btnChangePixel_Click_1(object sender, RoutedEventArgs e)
{
// 实例化一个 300*300 的 WriteableBitmap,并将其作为 Image 控件的图片源
WriteableBitmap writeableBitmap = new WriteableBitmap(, );
img.Source = writeableBitmap; StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/Logo.png"));
using (IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read))
{
// 将指定的图片转换成 BitmapDecoder 对象
BitmapDecoder decoder = await BitmapDecoder.CreateAsync(fileStream); // 通过 BitmapTransform 缩放图片的尺寸
BitmapTransform transform = new BitmapTransform()
{
ScaledWidth = Convert.ToUInt32(writeableBitmap.PixelWidth),
ScaledHeight = Convert.ToUInt32(writeableBitmap.PixelHeight)
}; // 获取图片的 PixelDataProvider 对象
PixelDataProvider pixelData = await decoder.GetPixelDataAsync(
BitmapPixelFormat.Bgra8,
BitmapAlphaMode.Straight,
transform,
ExifOrientationMode.IgnoreExifOrientation,
ColorManagementMode.DoNotColorManage); // 获取图片的像素数据,由于之前指定的格式是 BitmapPixelFormat.Bgra8,所以每一个像素由 4 个字节组成,分别是 bgra
byte[] sourcePixels = pixelData.DetachPixelData();
for (int i = ; i < sourcePixels.Length; i++)
{
sourcePixels[i] -= ;
} // 将修改后的像素数据写入 WriteableBitmap 对象的像素缓冲区(WriteableBitmap 使用的是 BGRA 格式)
using (Stream stream = writeableBitmap.PixelBuffer.AsStream()) // IBuffer.AsStream() 为来自 System.Runtime.InteropServices.WindowsRuntime.WindowsRuntimeBufferExtensions 中的扩展方法
{
await stream.WriteAsync(sourcePixels, , sourcePixels.Length);
}
} // 用像素缓冲区的数据绘制图片
writeableBitmap.Invalidate();
} // 创建一个图片,设置其每个像素的颜色值
private async void btnCreatePixel_Click_1(object sender, RoutedEventArgs e)
{
// 实例化一个 300*300 的 WriteableBitmap,并将其作为 Image 控件的图片源
WriteableBitmap writeableBitmap = new WriteableBitmap(, );
img.Source = writeableBitmap; Random random = new Random(); // 设置需要绘制的图片的像素数据(每一个像素由 4 个字节组成,分别是 bgra)
byte[] result = new byte[ * * ];
for (int i = ; i < result.Length; )
{
result[i++] = (byte)random.Next(, ); // Green
result[i++] = (byte)random.Next(, ); // Blue
result[i++] = (byte)random.Next(, ); // Red
result[i++] = ; // Alpha
} // 将像素数据写入 WriteableBitmap 对象的像素缓冲区
using (Stream stream = writeableBitmap.PixelBuffer.AsStream())
{
await stream.WriteAsync(result, , result.Length);
} // 用像素缓冲区的数据绘制图片
writeableBitmap.Invalidate();
}
}
}

4、演示如何获取、修改图片属性
Image/ImageProperty.xaml.cs

/*
* 演示如何获取、修改图片属性
*/ using System;
using System.Threading.Tasks;
using Windows.Storage;
using Windows.Storage.FileProperties;
using Windows.Storage.Pickers;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
using XamlDemo.Common; namespace XamlDemo.Image
{
public sealed partial class ImageProperty : Page
{
public ImageProperty()
{
this.InitializeComponent();
} protected async override void OnNavigatedTo(NavigationEventArgs e)
{
if (Helper.EnsureUnsnapped())
{
// 选择一个图片文件
FileOpenPicker picker = new FileOpenPicker();
picker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
picker.FileTypeFilter.Add(".jpg");
picker.FileTypeFilter.Add(".png"); StorageFile file = await picker.PickSingleFileAsync(); if (file != null)
{
ImageProperties imageProperties = await GetImageProperty(file);
UpdateImageProperty(imageProperties);
}
}
} // 获取图片属性
private async Task<ImageProperties> GetImageProperty(StorageFile file)
{
// 获取图片文件的图片属性信息
ImageProperties imageProperties = await file.Properties.GetImagePropertiesAsync(); // 显示图片文件的图片属性(以下试举几例,不全)
lblMsg.Text = "title: " + imageProperties.Title;
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "keywords: " + string.Join(",", imageProperties.Keywords);
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "width: " + imageProperties.Width;
lblMsg.Text += Environment.NewLine;
lblMsg.Text += "height: " + imageProperties.Height;
lblMsg.Text += Environment.NewLine; return imageProperties;
} // 更新图片属性
private async void UpdateImageProperty(ImageProperties imageProperties)
{
Random random = new Random(); // 设置图片文件的图片属性(以下试举几例,不全)
imageProperties.Title = random.Next(, ).ToString();
imageProperties.Keywords.Clear();
imageProperties.Keywords.Add(random.Next(, ).ToString());
imageProperties.Keywords.Add(random.Next(, ).ToString()); try
{
// 保存图片文件的图片属性信息
await imageProperties.SavePropertiesAsync();
lblMsg.Text += "title 和 keywords 已被修改,重新进来可看效果";
}
catch (Exception ex)
{
lblMsg.Text = ex.ToString();
}
}
}
}

5、演示如何对图片文件做“缩放/旋转/编码”操作,并保存操作后的结果
Image/ImageTransform.xaml

<Page
x:Class="XamlDemo.Image.ImageTransform"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:XamlDemo.Image"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> <Grid Background="Transparent">
<StackPanel Margin="120 0 0 0"> <Image x:Name="imgOriginal" Stretch="Uniform" Width="300" Height="200" HorizontalAlignment="Left" /> <Image x:Name="imgTransformed" Stretch="Uniform" Width="300" Height="200" HorizontalAlignment="Left" Margin="0 10 0 0" /> </StackPanel>
</Grid>
</Page>

Image/ImageTransform.xaml.cs

/*
* 演示如何对图片文件做“缩放/旋转/编码”操作,并保存操作后的结果
*/ using System;
using Windows.Graphics.Imaging;
using Windows.Storage;
using Windows.Storage.Pickers;
using Windows.Storage.Streams;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Imaging;
using Windows.UI.Xaml.Navigation;
using XamlDemo.Common; namespace XamlDemo.Image
{
public sealed partial class ImageTransform : Page
{
public ImageTransform()
{
this.InitializeComponent();
} protected async override void OnNavigatedTo(NavigationEventArgs e)
{
if (Helper.EnsureUnsnapped())
{
// 选择一个 .jpg 图片文件
FileOpenPicker picker = new FileOpenPicker();
picker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
picker.FileTypeFilter.Add(".jpg"); StorageFile fileRead = await picker.PickSingleFileAsync(); if (fileRead != null)
{
// 显示用户选中的图片文件
BitmapImage src = new BitmapImage();
src.SetSource(await fileRead.OpenAsync(FileAccessMode.Read));
imgOriginal.Source = src; // 定义一个转换后的图片文件
StorageFile fileWrite = await ApplicationData.Current.TemporaryFolder.CreateFileAsync(@"webabcdTest\imageTransformDemo.png", CreationCollisionOption.ReplaceExisting); using (IRandomAccessStream inputStream = await fileRead.OpenAsync(FileAccessMode.Read), outputStream = await fileWrite.OpenAsync(FileAccessMode.ReadWrite))
{
// 将用户选择的图片文件转换为一个 BitmapDecoder 对象
BitmapDecoder decoder = await BitmapDecoder.CreateAsync(inputStream); // 通过 BitmapTransform 来配置图片的宽度、高度和顺时针旋转角度
BitmapTransform transform = new BitmapTransform();
transform.ScaledWidth = ;
transform.ScaledHeight = ;
transform.Rotation = BitmapRotation.Clockwise180Degrees; // 获取图片的 PixelDataProvider 对象
PixelDataProvider pixelProvider = await decoder.GetPixelDataAsync(
decoder.BitmapPixelFormat,
decoder.BitmapAlphaMode,
transform,
ExifOrientationMode.RespectExifOrientation,
ColorManagementMode.ColorManageToSRgb
); // 获取经过了 BitmapTransform 转换后的图片的像素数据
byte[] pixels = pixelProvider.DetachPixelData(); // 创建一个 BitmapEncoder 对象,可以指定图片的编码格式(PngEncoderId, JpegEncoderId, JpegXREncoderId, GifEncoderId, TiffEncoderId)
BitmapEncoder encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, outputStream); // 转码像素数据到指定的图片编码格式(本例会转吗为 png 格式),并将转码后的数据写入 stream 缓冲区
encoder.SetPixelData(
decoder.BitmapPixelFormat,
decoder.BitmapAlphaMode,
,
,
decoder.DpiX,
decoder.DpiY,
pixels
); // 提交 stream 缓冲区中的所有内容
await encoder.FlushAsync();
} // 显示经过“缩放/旋转/编码”操作后的图片文件
imgTransformed.Source = new BitmapImage(new Uri("ms-appdata:///temp/webabcdTest/imageTransformDemo.png", UriKind.Absolute));
}
}
}
}
}

OK
[源码下载]

重新想象 Windows 8 Store Apps (29) - 图片处理的更多相关文章

  1. 重新想象 Windows 8 Store Apps 系列文章索引

    [源码下载][重新想象 Windows 8.1 Store Apps 系列文章] 重新想象 Windows 8 Store Apps 系列文章索引 作者:webabcd 1.重新想象 Windows ...

  2. 重新想象 Windows 8 Store Apps (40) - 剪切板: 复制/粘贴文本, html, 图片, 文件

    [源码下载] 重新想象 Windows 8 Store Apps (40) - 剪切板: 复制/粘贴文本, html, 图片, 文件 作者:webabcd 介绍重新想象 Windows 8 Store ...

  3. 重新想象 Windows 8 Store Apps (34) - 通知: Toast Demo, Tile Demo, Badge Demo

    [源码下载] 重新想象 Windows 8 Store Apps (34) - 通知: Toast Demo, Tile Demo, Badge Demo 作者:webabcd 介绍重新想象 Wind ...

  4. 重新想象 Windows 8 Store Apps (35) - 通知: Toast 详解

    [源码下载] 重新想象 Windows 8 Store Apps (35) - 通知: Toast 详解 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 通知 Toa ...

  5. 重新想象 Windows 8 Store Apps (39) - 契约: Share Contract

    [源码下载] 重新想象 Windows 8 Store Apps (39) - 契约: Share Contract 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之  ...

  6. 重新想象 Windows 8 Store Apps (56) - 系统 UI: Scale, Snap, Orientation, High Contrast 等

    [源码下载] 重新想象 Windows 8 Store Apps (56) - 系统 UI: Scale, Snap, Orientation, High Contrast 等 作者:webabcd ...

  7. 重新想象 Windows 8 Store Apps (57) - 本地化和全球化

    [源码下载] 重新想象 Windows 8 Store Apps (57) - 本地化和全球化 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 本地化和全球化 本地化 ...

  8. 重新想象 Windows 8 Store Apps (58) - 微软账号

    [源码下载] 重新想象 Windows 8 Store Apps (58) - 微软账号 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 微软账号 获取微软账号的用户 ...

  9. 重新想象 Windows 8 Store Apps (59) - 锁屏

    [源码下载] 重新想象 Windows 8 Store Apps (59) - 锁屏 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 锁屏 登录锁屏,获取当前程序的锁 ...

随机推荐

  1. ThinkPHP多应用/项目配置技巧(使用同一配置文件)--(十六)

    原文:ThinkPHP多应用/项目配置技巧(使用同一配置文件)--(十六) ThinkPHP多应用配置技巧(没有使用分组,这是通过入口文件产生的Home.Admin)----很实用! 比如:现在有Ho ...

  2. android设置中的Preferencescreen使用方法介绍与分析

    今天主要研究了一下设置中的Preferencescreen应用,它不仅可以作为设置界面显示,并且还可以启动activity,以下主要是对启动activity的介绍 1. Preferencescree ...

  3. Codeforces Round #296 (Div. 2) A. Playing with Paper

    A. Playing with Paper One day Vasya was sitting on a not so interesting Maths lesson and making an o ...

  4. JavaScript 中的事件流和事件处理程序(读书笔记思维导图)

    JavaScript 程序采用了异步事件驱动编程模型.在这种程序设计风格下,当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web 浏览器就会产生事件(event). JavaScript ...

  5. c#中的jQuery——HtmlAgilityPack

    原文:c#中的jQuery--HtmlAgilityPack c#中是否有javascript中的jQuery类库? jQuery在访问和操作HTML 的DOM的便捷是前端开发工程师的一种福音,在c# ...

  6. [转]解决get方法传递URL参数中文乱码问题

    来自:http://www.javaeye.com/topic/483158 应用一:解决tomcat下中文乱码问题(先来个简单的) 在tomcat下,我们通常这样来解决中文乱码问题: 过滤器代码: ...

  7. 关于java堆内存溢出的几种情况(转)

    [情况一]: java.lang.OutOfMemoryError: Java heap space:这种是java堆内存不够,一个原因是真不够,另一个原因是程序中有死循环: 如果是java堆内存不够 ...

  8. Linux目录文件详解FHS标准(2013.09.05)

    Linux 目录配置的依据FHS(Filesystem Hierarchy Standard)标准,将目录分成为四种交互作用的形态: 四种形态的具体解释: 可分享的:可以分享给其他系统挂载使用的目录, ...

  9. php学习之道:php中soap的使用实例以及生成WSDL文件,提供自己主动生成WSDL文件的类库——SoapDiscovery.class.php类

    1. web service普及: Webservice soap wsdl差别之个人见解 Web Service实现业务诉求:  Web Service是真正"办事"的那个,提供 ...

  10. Session为空的一种原因

    在维护一份比较老的代码,想改为ajax调用,然后就添加了一个一般处理程序文件,也就是以.ashx结尾的文件,一切都正常,但发现session一直为空,很奇怪 基本的代码如下: public class ...