【WP8.1開發】RenderTargetBitmap類的特殊用途

相信，耍過WPF的人都知道RenderTargetBitmap這個玩意兒，這家伙比較有意思，它可以將用戶界面上呈現的東西寫入到內存的位圖對象，從而開發者可以在應用程序中使用它，或者將其保存為圖像文件。

在Runtime API里面也有這個位圖組件，可以將UI元素呈現到位圖中，當然，它也不是萬能的，首先，要寫入到位圖中的UI對象必須已經在用戶界面上呈現了，也就是說，只要你能看到界面上出現的東東，它才會寫入位圖對象；其次，要呈現到位圖中的UI元素需要位於可視化樹中，我簡單地總結為：只要是放在Page內並且可見的元素，都可以生成位圖。

 

調用RenderTargetBitmap類的RenderAsync方法來將可視化對象呈現到RenderTargetBitmap中，如果只是在應用程序中顯示該生成的位圖，那么，直接把RenderTargetBitmap對象賦值給Image控件的Source屬性即可。

要是希望保存為圖像文件，就要用到BitmapEncoder類，也就是圖像編碼。大家知道，在編碼圖像文件時，是向流中寫入字節數組（byte[]）作為圖像的像素數據的，那么，如何提取RenderTargetBitmap位圖中的像素數據呢。你會發現RenderTargetBitmap類有個GetPixelsAsync方法，對的，通過該方法就可以返回位圖的像素數據，只不過其類型為IBuffer，這樣大家又會疑惑了，如何變成byte[]呢？

勿急，你只要引入System.Runtime.InteropServices.WindowsRuntime命名空間，里面就有相關類型為IBuffer定義了擴展方法——ToArray，調用它可以返回byte[]。

之后的事情就好辦了。

 

理論永遠是抽象的，咱們還是干點實事吧，這里我弄了個不那么美觀的示例。

示例項目中有四張圖片，順便Show一下老周的書法作品。在應用頁面上，把這四張圖片分別作為畫刷來填充圖形。XAML如下：

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Canvas x:Name="cv"> 
            <Ellipse Width="250" Height="200" Canvas.Left="50" Canvas.Top="20">
                <Ellipse.Fill>
                    <ImageBrush ImageSource="/01.png" Stretch="UniformToFill"/>
                </Ellipse.Fill>
            </Ellipse>
            <Rectangle Width="180" Height="250" Canvas.Top="240" Canvas.Left="10" RadiusX="12" RadiusY="20">
                <Rectangle.Fill>
                    <ImageBrush ImageSource="/02.png" Stretch="UniformToFill"/>
                </Rectangle.Fill>
            </Rectangle>
            <Polygon Points="50,0 100,50 50,100 0,50" Width="240" Height="240" Canvas.Left="150" Canvas.Top="230" Stretch="Uniform">
                <Polygon.Fill>
                    <ImageBrush ImageSource="03.png" Stretch="UniformToFill"/>
                </Polygon.Fill>
            </Polygon>
            <Ellipse Width="130" Height="130" Canvas.Left="245" Canvas.Top="80">
                <Ellipse.Fill>
                    <ImageBrush ImageSource="/04.png" Stretch="UniformToFill"/>
                </Ellipse.Fill>
            </Ellipse>
        </Canvas>
        
        <Button Content="保存圖像文件" Grid.Row="1" Click="OnClick"/>
    </Grid>

然后，處理Button的事件，生成圖片，保存到相冊中的“保存的圖片”中。

        private async void OnClick(object sender, RoutedEventArgs e)
        {
            Button b = sender as Button;
            b.IsEnabled = false;
            StorageFolder savedPics = KnownFolders.SavedPictures;
            // 1、在位圖中呈現UI元素
            RenderTargetBitmap rtb = new RenderTargetBitmap();
            await rtb.RenderAsync(this.cv);
            // 提取像素數據
            IBuffer buffer = await rtb.GetPixelsAsync();

            // 創建新文件
            StorageFile newFile = await savedPics.CreateFileAsync("test-3-7-11-5.png", CreationCollisionOption.ReplaceExisting);
            // 獲取文件流
            IRandomAccessStream streamOut = await newFile.OpenAsync(FileAccessMode.ReadWrite);
            // 實例化編碼器
            BitmapEncoder pngEncoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, streamOut);
            // 寫入像素數據
            byte[] data = buffer.ToArray();
            pngEncoder.SetPixelData(BitmapPixelFormat.Bgra8,
                                    BitmapAlphaMode.Straight,
                                    (uint)rtb.PixelWidth,
                                    (uint)rtb.PixelHeight,
                                    96d, 96d, data);
            await pngEncoder.FlushAsync();
            streamOut.Dispose();
            b.IsEnabled = true;
        }

 

運行效果如下圖

 

在寫入像素數據時，最常用的格式是rgba8或bgra8，一般8位夠用了，雖然就是R值和B值的通道順序不同，但這兩種格式所保存的圖片文件效果不太一樣，我覺得bgra8好一點，沒有偏色。

下面是保存后的PNG圖片，左邊的是用RGBA格式的，右邊是用BGRA格式的，大家自行比較吧。

           

 

雖然老周的書法水平不怎么樣，大家將就着看吧，重點是看RenderTargetBitmap類的用法。

示例下載：http://files.cnblogs.com/tcjiaan/RenderUiApp.zip

好，再次感謝您收看老周吹牛節目，再見。