Windows Phone笔记(4)图片操作

图片作为应用程序不可或缺，也是程序中最常见的元素之一，那么在windows phone中该如何使用它呢？这就是这篇文章需要解决的问题。在silverlight支持两个格式的图片显示，它们是：jpeg和png，png使用的是无损压缩算法，可以准确重建原始位图；而jpeg使用的是一种有损压缩算法，这种算法会对齐人们肉眼不易察觉到的一些可视信息这种压缩方式对照片这样的图像非常有效，但是却不适用于文本或基于矢量派生的位图，如建筑图和动画。

 

1.image元素
    在silveright中，image元素用来显示位图，但是image元素并不是位图本身。现在我们通过一个简单是示例程序来学习如何在windows phone开发中如何使用image元素。首先新建一个silverlight for windows phone应用程序，在项目根目录下新建文件夹images，在一张silverlight支持格式的图片放到这个文件夹中,然后在页面中添加一个image控件，最后将phoneapplicationpage标记的supportedorientations属性值为portraitorlandscape，使程序能够支持横向显示。

下面是显示页面的mainpage.xaml代码:

 <image name="image1" source="images/superman.jpg"/>编译运行:

  

 

默认的情况，在保持正确的宽高比例的前提之下，image元素会尽量放大或缩小以充满其容器(内容网格)。如果想要按原始像素尺寸显示图片的话，可以将image的stretch属性设置为none:

  <image name="image1" source="images/superman.jpg" stretch="none" />运行效果如下:

  


 

2.通过web获取图像
　　image可以通过web来获取图像，只需要将image的source属性设置为一个可用的url即可，如下面的示例所示:

   <image name="image1" source=""  />运行效果如下:

  


 

这样image元素就可以根据给定的url从web中下载图片并显示，这样就能够控制可执行文件的大小，但是考虑到windows phone设备并不总是与web连接，并且在图片下载过程中还可能遇到其他的问题。为了处理这种情况，我们可以根据image元素的两个事件：imagefailed(出现错误后发生)和imageopened(下载成功后发生)，根据这两个事件来判断下载是否成功，从而使程序根据不同的情况作出相应的选择。
 
3.image和imagesource
　　image元素还有一些需要我们注意的地方，首先image元素不是位图，它只是用来显示位图。从前面给出的示例，image的source属性被设置为一个相对文件路径或者一个可用url，从表象上看，我们可以得出source属性是字符串类型的结论，这并不正确。source实际上是一个imagesource类型，这是由于xaml语法隐藏了一些底层的是实现细节。 imagesource是一个抽象类，派生了bitmapsource，bitmapsource类型是另一个抽象类，他定义了一个名为setsource的方法，该方法可以通过stream对象加载图像。派生自bitmapsource的bitmapimage支持一个可接收uri对象的构造函数，包括一个uri类型的urisource属性。
-->>表示派生
　　　　imagesource-->>bitmapsource(setsource方法，通过stream对象加载图像)-->>bitmapimage(uri类型的urisource属性)
让我们来观察下面的示例程序:
这是mainpage.xmal的代码，添加一个image元素，且没有设置其source属性。
    <image name="image1"/>
这是mainpage.xmal.cs的触摸事件处理程序:
 　　　　protected override void onmanipulationstarted(manipulationstartedeventargs e)
        {
            uri uri = new uri("");
            bitmapimage bmp = new bitmapimage(uri);
            this.image1.source = bmp;

            e.complete();
            e.handled = true;
            base.onmanipulationstarted(e);
        }

程序运行，触摸屏幕后就会触发事件，把图片下载到本地显示出来。

  


 

我们也可以直接使用webclient来操作位图，虽然这并不是通用的方法，但我们依然可以做到。
xmal页面代码和上面的示例一致，这里就不在给出，这是后台处理程序代码:
        protected override void onmanipulationstarted(manipulationstartedeventargs e)
        {
            webclient webclient = new webclient();
            webclient.openreadcompleted += onwebclientreadcompleted;//绑定事件
            webclient.openreadasync(new uri(""));

            e.complete();
            e.handled = true;//表示事件已处理
            base.onmanipulationstarted(e);
        }

        private void onwebclientreadcompleted(object sender, openreadcompletedeventargs args)
        {
            if (!args.cancelled && args.error == null)
            {
                bitmapimage bmp = new bitmapimage();
                bmp.setsource(args.result);//利用setsource通过stream对象创建位图
                this.iamge1.source = bmp;
            }
        }

 
4.本地位图加载
　　前面所有的示例程序中，位图都是作为资源(resource)添加到项目中，并嵌入可执行文件中，这是最常见的做法。那么如何直接加载本地的位图呢？请看下面的这个示例程序。新建一个项目，包含一个image元素，和一个images文件夹，文件夹中存放一张图片。右击图片-->属性-->生成操作-->选择resource。这是示例的运行效果是:运行程序后触摸屏幕，事件处理程序通过application类定义的getresourcestream访问资源。
mainpage.xaml:
  <image name="image1"/>
mainpage.xmal.cs
  　　　 protected override void onmanipulationstarted(manipulationstartedeventargs e)
        {
            uri uri = new uri("/silverlighttaptodownload;component/images/superman.jpg",urikind.relative);//当生成操作为resource时url显得比较复杂
            streamresourceinfo resourceinfo = application.getresourcestream(uri);
            bitmapimage bmp = new bitmapimage();
            bmp.setsource(resourceinfo.stream);
            this.image1.source = bmp;

            e.complete();
            e.handled = true;
            base.onmanipulationstarted(e);
        }

我们可以看到url显得比较复杂，当我们把图片属性的生成操作(build action)改为内容(content)时，语法可以这样简写:
uri uri = new uri("images/superman.jpg", urikind.relative);
我们通过程序bin目录生成xap文件后缀改成zip，解压后来分析二者的区别:
　　①当生成操作为resource时，图片与编译后的程序一同存储在dll文件中。
　　②当生成操作为内容(content)时，图片存储在dll文件的外部，但是依旧还早xap文件中。
二者的使用情境该如何选择呢？微软建议使用在应用程序中将生成操作设置为”内容“，这样可以限制二进制文件(dll)的大小，缩短启动时间。但是如果这些资源存在于程序所引用的silverlgiht库中则最好将生成操作设置为“resource”将其嵌入二进制文件(dll)中。
 
5.从相机中获取图片
　　当用户使用手机拍照后，我们可以通过程序获取用户的照片。要完成这个操作需要使用在microsoft.phone.tasks的命名空间中的选择器(chooser)类和启动器(launcher)类，启动器不返回任何数据，选择器有数据返回。
让我们来看下面给出的示例：
mainpage.xmal
  　　　　<!--contentpanel - 在此处放置其他内容-->
        <grid x:name="contentpanel" grid.row="1" margin="12,0,12,0">
            <image name="image1"/>
        </grid>

这里是完整的后台处理程序:
mainpage.xaml.cs
 1  public partial class mainpage : phoneapplicationpage
 2     {
 3         cameracapturetask camera = new cameracapturetask();
 4         // 构造函数
 5         public mainpage()
 6         {
 7             initializecomponent();
 8             camera.completed += oncameracapturetaskcompleted;//建议在构造函数中绑定事件
 9         }
10
11         protected override void onmanipulationstarted(manipulationstartedeventargs e)
12         {
13                 camera.show();//显示相机程序
14
15                 e.complete();//表示操作已经完成
16                 e.handled = true;//事件完成，停止路由事件转发
17                 base.onmanipulationstarted(e);
18         }
19         private void oncameracapturetaskcompleted(object sender, photoresult args)
20         {
21             if (args.taskresult == taskresult.ok)//选择器操作完成
22             {
23                 bitmapimage bmp = new bitmapimage();
24                 bmp.setsource(args.chosenphoto);//将照片数据的流赋给bmp对象
25                 this.iamge1.source = bmp;
26             }
27         }
28     }

触摸mainpage页面后会触发手机相机程序，模拟器会模拟一个拍照场景，点击拍照后，选择接受，后程序就会把照片显示在image元素中，效果如下：
 

   

6.从手机媒体库中获取图片
　　我们可以也通过photochoosertask类来引导用户进入手机图片库并选择照片，然后将结果返回给程序并显示出来。下面就是具体操作的代码:
mainpage.xmal
    　　　　<!--contentpanel - 在此处放置其他内容-->
        <grid x:name="contentpanel" grid.row="1" margin="12,0,12,0">
            <image name="image1"/>
        </grid>

mainpage.xmal.cs
 1   public partial class mainpage : phoneapplicationpage
 2     {
 3         photochoosertask photochoosertask;//声明任务对象。它必须具有页面范围，因此应在页面中的构造函数之前声明它。
 4 // 构造函数
 5         public mainpage()
 6         {
 7             initializecomponent();
 8             photochoosertask = new photochoosertask();//初始化任务对象
 9             photochoosertask.completed += photochoosertask_completed;//标识要在用户完成任务后运行的方法。
10         }
11
12         protected override void onmanipulationstarted(manipulationstartedeventargs e)
13         {
14             try
15             {
16                 photochoosertask.show();//启动任务
17             }
18             catch (system.invalidoperationexception ex)
19             {
20                 messagebox.show("an error occurred:" + ex.tostring());
21             }
22             e.complete();
23             e.handled = true;
24             base.onmanipulationstarted(e);
25         }
26
27         private void photochoosertask_completed(object sender, photoresult e)
28         {
29             if (e.taskresult == taskresult.ok)//选择器操作完成
30             {
31                 bitmapimage bmp = new bitmapimage();
32                 bmp.setsource(e.chosenphoto);//将照片数据的流赋给bmp对象
33                 this.image1.source = bmp;//将选择的图片显示出来
34             }
35         }
36
37     }

程序运行后，通过触摸mainpage页面就会打开手机图片库，选择好图片之后，程序会负责把图片显示到image元素中，下面是程序运行效果：
 

  

7.图片保存到手机媒体库(medialibrary)中
　　使用手机时，将图片保存到手机的媒体库中也是一种非常常见的操作，在windows phone中该如何完成这个操作呢？在silverlight for windows phone并不支持这个操作，我们需要引用xna库的microsoft.xna.framework.dll的文件需要使用其中的medailibrary类，下面给出示例代码:
mainpage.xmal
1    　　　　<!--contentpanel - 在此处放置其他内容-->
2         <grid x:name="contentpanel" grid.row="1" margin="12,0,12,0">
3             <image  name="image1" source="images/superman.jpg" />
4             <button content="保存" height="72" horizontalalignment="left"  name="btnsave" verticalalignment="bottom" margin="30 0" width="160" click="btnsave_click" />
5             <button content="打开" height="72" horizontalalignment="right"  name="btnopen" verticalalignment="bottom" margin="30 0" width="160" click="btnopen_click" />
6         </grid>

mainpage.xmal.cs
 
 1 /// <summary>
 2 /// 将图片保存到媒体库中
 3 /// </summary>
 4 /// <param name="sender"></param>
 5 /// <param name="e"></param>
 6         private void btnsave_click(object sender, routedeventargs e)
 7         {
 8             // 在独立存储中为jpeg文件创建一个文件名。
 9             string tempjpeg = "superman.jpg";
10
11             // 创建虚拟存储和文件流，确保这个文件唯一。
12             var store = isolatedstoragefile.getuserstoreforapplication();
13             if (store.fileexists(tempjpeg))
14             {
15                 store.deletefile(tempjpeg);
16             }
17
18             isolatedstoragefilestream filestream = store.createfile(tempjpeg);
19             streamresourceinfo sri = null;
20             uri uri = new uri("images/superman.jpg", urikind.relative);
21             sri = application.getresourcestream(uri);//获取需要保存文件的流
22
23             bitmapimage bitmap = new bitmapimage();
24             bitmap.setsource(sri.stream);
25             writeablebitmap wbmp = new writeablebitmap(bitmap);
26
27
28             //将 writeablebitmap 对象编码成jpeg 流。
29             extensions.savejpeg(wbmp, filestream, wbmp.pixelwidth, wbmp.pixelheight, 0, 85);
30             filestream.close();
31
32             // 从独立存储中创建一个新的流，并将该jpeg文件存储到windows phone的meidalibrary中。
33             filestream = store.openfile(tempjpeg, filemode.open, fileaccess.read);
34
35             medialibrary medialibrary = new medialibrary();
36             picture pic = medialibrary.savepicture("superman.jpg", filestream);//将保存在medialibrary中的图片命名为:superman
37             filestream.close();//关闭流
38         }
39
40         /// <summary>
41 　　　 　/// 打开手机medialibrary
42　　　　  /// </summary>
43 　　　　 /// <param name="sender"></param>
44　　　　  /// <param name="e"></param>
45         private void btnopen_click(object sender, routedeventargs e)
46         {
47             photochoosertask photochoosertask = new photochoosertask();
48             photochoosertask.show();//使用照片选择器，打开medialibrary
49         }

运行上面的程序后，触摸“保存”按钮就会将显示的图片保存到手机的媒体库中，触摸“打开”会打开手机媒体库，我们可以看见刚才保存的图片,下面是程序的运行实际效果: 

    


 



摘自 晴天猪の博客