0

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;
     }
  • By "local storage" do you mean `localStorage` for storing key/value pairs, or do you mean local computer storage in general? Can you confirm this is a XAML/WinRT "Windows Store" application or a desktop WPF application? – Dai Jul 10 '14 at 03:58
  • storageFolder(like isolatedstorage in windows phone). This is XAMl/WinRt windows store application. I am developing this app for windows tablet. – user3274778 Jul 10 '14 at 04:04
  • 1
    WriteableBitmapEx create a bitmap image with lot of extention methods on it. so simply make writablebitmap using this library and explore its methods you will get something. – loop Jul 10 '14 at 09:05

1 Answers1

0

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();
}
Rene Schulte
  • 2,962
  • 1
  • 19
  • 26
  • Thank you Rene. But my application should be compatible with windows 8. I am basically targeting Windows 8 tablet. I got a kind of solution by seeing the [link](https://writeablebitmapex.codeplex.com/discussions/437411) . By using this I can save the canvas as an image to local storage. But one of my canvas child is scrollviewer within which image is there. Here I am unable to store the canvas with that image. I have edited my code, please check and reply me. Thanx in advance. – user3274778 Jul 11 '14 at 09:13