How to save a grid as a bitmap Image in the local storage in windows 8

Question

I am very new to Windows 8 application development. I am developing an application which requires to save a grid as Bitmap Image in local storage. I have tried by using writable bitmap but i didn't get the solution.

Then I searched for the samples but I got the answer as a 'Not possible'. But in some answers I found that By using 'WriteableBitmapEx' we can do that. But I do not know how to implement this by using this library. If any one knows about that please reply me.

Thanks in advance.

EDITED.

<Canvas Background="Cyan" Name="panelcanvas" Margin="47.5,57,327.5,153"  
     Width="200"  
     Height="400">
        <Image Name="maskimg"  
               Height="100" Width="220"/>
        <ScrollViewer ZoomMode="Enabled" Name="scroll">  
            <Image  Name="img" Stretch="Fill" Canvas.Top="15"
              Height="400" Width="200" Source="mask_image.png">
                <Image.RenderTransform>
                    <CompositeTransform x:Name="Composite_Transform"></CompositeTransform>
                </Image.RenderTransform>
            </Image>
        </ScrollViewer>

    </Canvas>

    <Image Name="maskimg2" HorizontalAlignment="left" Width="200"  
     Height="400"/>
    <Image Name="maskimg3" HorizontalAlignment="Right"  Width="200"  
     Height="400"/>

C# code.

  var destBmp = BitmapFactory.New((int)panelcanvas.ActualWidth, (int)panelcanvas.ActualHeight);        
  foreach (var child in panelcanvas.Children)
        {                
            var img = child as Image;
            if (img != null)
            {
                   var sourceMask = ((BitmapImage)img.Source);
                   var sourceUriMask = sourceMask.UriSource;
                   Uri imageUri = new Uri(strMask.ToString());                       
                    var srcBmp = await new WriteableBitmap(1, 1).FromContent(imageUri);
                    if (srcBmp != null)
                    {
                        var x = Canvas.GetLeft(img);                            
                        var y = Canvas.GetTop(img);                           
                        destBmp.Blit(new Rect(x, y, srcBmp.PixelWidth, srcBmp.PixelHeight),                             srcBmp, new Rect(0, 0, srcBmp.PixelWidth, srcBmp.PixelHeight));
                    }
            }
            await WriteableBitmapToStorageFile(destBmp, FileFormat.Jpeg);

    private async Task<StorageFile> WriteableBitmapToStorageFile(WriteableBitmap WB, FileFormat   fileFormat)
    {
        string FileName = "MyFile.jpeg";
        StorageFolder localFolder = ApplicationData.Current.LocalFolder;
        var file = await localFolder.CreateFileAsync(FileName, CreationCollisionOption.ReplaceExisting);

        using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite))
         {
            BitmapEncoder encoder = await BitmapEncoder.CreateAsync(BitmapEncoderGuid, stream);
            Stream pixelStream = WB.PixelBuffer.AsStream();
            byte[] pixels = new byte[pixelStream.Length];
            await pixelStream.ReadAsync(pixels, 0, pixels.Length);

            encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore,
                                200,
                                200,
                                0,
                                0,
                                pixels);
            await encoder.FlushAsync();
        }
        return file;
     }

Answer 1

This blog posts point out what you need to do using the WriteableBitmapEx lib. Note the required RenderTargetBitmap was introduced with Windows 8.1! For Windows 8.0 this is not possible at all.

http://kodierer.blogspot.de/2013/12/easy-render-writeablebitmapex-with.html http://kodierer.blogspot.de/2013/12/how-to-encode-and-save-writeablebitmap.html

Here's a code snippet:

// Render some UI to a RenderTargetBitmap
var renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(MyGrid);

// Get the pixel buffer and copy it into a WriteableBitmap
var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();
var width = renderTargetBitmap.PixelWidth;
var height = renderTargetBitmap.PixelHeight;
WriteableBitmap wbmp = await new WriteableBitmap(1, 1).FromPixelBuffer(pixelBuffer, width, height);

SaveWriteableBitmapAsJpeg(wbmp, "mygrid.jpg");

private static async Task SaveWriteableBitmapAsJpeg(WriteableBitmap bmp, string fileName)
{
   // Create file in Pictures library and write jpeg to it
   var outputFile = await KnownFolders.PicturesLibrary.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
   using (var writeStream = await outputFile.OpenAsync(FileAccessMode.ReadWrite))
   {
      await EncodeWriteableBitmap(bmp, writeStream, BitmapEncoder.JpegEncoderId);
   }
   return outputFile;
}

private static async Task EncodeWriteableBitmap(WriteableBitmap bmp, IRandomAccessStream writeStream, Guid encoderId)
{         
   // Copy buffer to pixels
   byte[] pixels;
   using (var stream = bmp.PixelBuffer.AsStream())
   {
      pixels = new byte[(uint) stream.Length];
      await stream.ReadAsync(pixels, 0, pixels.Length);
   }

   // Encode pixels into stream
   var encoder = await BitmapEncoder.CreateAsync(encoderId, writeStream);
   encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied,
      (uint) bmp.PixelWidth, (uint) bmp.PixelHeight,
      96, 96, pixels);
   await encoder.FlushAsync();
}