locked
Merge multiple images in windows store application

    Question

  • Hello Everyone,

    I am newer on windows store platform. I am having a query to create one image from multiple images. 

    Let me tell you my scenario what exactly i want,

    There is a product like T-Shirt, there will be a image for t-shirt, now there are multiple parts of that t-shirt, like front , back, right sleeve, left sleeve, neck etc. So i want to combine all parts and want to make a single image from that. Please help me ASAP for that. I tried so many things but did not get exactly.

    Thanks

    Wednesday, July 30, 2014 9:54 AM

Answers

  • Ah, MS's dropped this API from WritableBitMap in WStore. Ok.

    Check this 

    Wednesday, July 30, 2014 10:20 AM
  • You either can go with "RenderTargetBitmap" or WriteableBitmap. With RenderTargetBitmap you just have to layout your controls on your xaml page, give it a Name and save that as an Image.

    Basically it's just this:

    var renderTargetBitmap = new RenderTargetBitmap();
    await renderTargetBitmap.RenderAsync(uielement);

    Here's a snippet that I use:

    public static async Task<RenderTargetBitmap> SaveUIToFileAsync(FrameworkElement uielement, StorageFile file)
            {
                if (file != null)
                {
                    CachedFileManager.DeferUpdates(file);
                    Guid encoderId = GetBitmapEncoder(file.FileType);
                    try
                    {
                        using (var stream = await file.OpenAsync(FileAccessMode.ReadWrite))
                        {
                            return await CaptureToStreamAsync(uielement, stream, encoderId);
                        }
                    }
                    catch (Exception ex)
                    {
                        Debug.WriteLine(ex.Message);
                    }
    
                    var status = await CachedFileManager.CompleteUpdatesAsync(file);
                }
                return null;
            }
    
    
    private static async Task<RenderTargetBitmap> CaptureToStreamAsync(FrameworkElement uielement, IRandomAccessStream stream, Guid encoderId)
            {
                try
                {
                    var renderTargetBitmap = new RenderTargetBitmap();
                    await renderTargetBitmap.RenderAsync(uielement);
    
                    var pixels = await renderTargetBitmap.GetPixelsAsync();
    
                    var logicalDpi = DisplayInformation.GetForCurrentView().LogicalDpi;
                    var encoder = await BitmapEncoder.CreateAsync(encoderId, stream);
                    encoder.SetPixelData(
                        BitmapPixelFormat.Bgra8,
                        BitmapAlphaMode.Ignore,
                        (uint)renderTargetBitmap.PixelWidth,
                        (uint)renderTargetBitmap.PixelHeight,
                        logicalDpi,
                        logicalDpi,
                        pixels.ToArray());
    
                    await encoder.FlushAsync();
    
                    return renderTargetBitmap;
                }
                catch (Exception ex)
                {
                    Debug.WriteLine(ex.Message);
                }
    
                return null;
            }
    public static Guid GetBitmapEncoder(string fileType)
            {
                Guid encoderId = BitmapEncoder.JpegEncoderId;
                switch (fileType)
                {
                    case ".bmp":
                        encoderId = BitmapEncoder.BmpEncoderId;
                        break;
                    case ".gif":
                        encoderId = BitmapEncoder.GifEncoderId;
                        break;
                    case ".png":
                        encoderId = BitmapEncoder.PngEncoderId;
                        break;
                    case ".tif":
                        encoderId = BitmapEncoder.TiffEncoderId;
                        break;
                }
    
                return encoderId;
            }
    


    Please see here for additional Informations:
    http://mariusbancila.ro/blog/2013/11/05/render-the-screen-of-a-windows-store-app-to-a-bitmap-in-windows-8-1/

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.imaging.rendertargetbitmap

    If you want to Combine/merge/blit single imagefiles you can do this also just fine with Writeablebitmap and WriteablebitmapEx (is available as NuGet Package for Windows Store Apps):
    http://writeablebitmapex.codeplex.com/



    Thursday, July 31, 2014 7:52 AM

All replies

  • Hi,

    Thanks for the response. I have checked with that. But

    merge .Clear
    merge.Blit

    are not available in windows store application. So am i doing some thing wrong?

    Let me know.

    Thanks

    Wednesday, July 30, 2014 10:12 AM
  • Ah, MS's dropped this API from WritableBitMap in WStore. Ok.

    Check this 

    Wednesday, July 30, 2014 10:20 AM
  • You either can go with "RenderTargetBitmap" or WriteableBitmap. With RenderTargetBitmap you just have to layout your controls on your xaml page, give it a Name and save that as an Image.

    Basically it's just this:

    var renderTargetBitmap = new RenderTargetBitmap();
    await renderTargetBitmap.RenderAsync(uielement);

    Here's a snippet that I use:

    public static async Task<RenderTargetBitmap> SaveUIToFileAsync(FrameworkElement uielement, StorageFile file)
            {
                if (file != null)
                {
                    CachedFileManager.DeferUpdates(file);
                    Guid encoderId = GetBitmapEncoder(file.FileType);
                    try
                    {
                        using (var stream = await file.OpenAsync(FileAccessMode.ReadWrite))
                        {
                            return await CaptureToStreamAsync(uielement, stream, encoderId);
                        }
                    }
                    catch (Exception ex)
                    {
                        Debug.WriteLine(ex.Message);
                    }
    
                    var status = await CachedFileManager.CompleteUpdatesAsync(file);
                }
                return null;
            }
    
    
    private static async Task<RenderTargetBitmap> CaptureToStreamAsync(FrameworkElement uielement, IRandomAccessStream stream, Guid encoderId)
            {
                try
                {
                    var renderTargetBitmap = new RenderTargetBitmap();
                    await renderTargetBitmap.RenderAsync(uielement);
    
                    var pixels = await renderTargetBitmap.GetPixelsAsync();
    
                    var logicalDpi = DisplayInformation.GetForCurrentView().LogicalDpi;
                    var encoder = await BitmapEncoder.CreateAsync(encoderId, stream);
                    encoder.SetPixelData(
                        BitmapPixelFormat.Bgra8,
                        BitmapAlphaMode.Ignore,
                        (uint)renderTargetBitmap.PixelWidth,
                        (uint)renderTargetBitmap.PixelHeight,
                        logicalDpi,
                        logicalDpi,
                        pixels.ToArray());
    
                    await encoder.FlushAsync();
    
                    return renderTargetBitmap;
                }
                catch (Exception ex)
                {
                    Debug.WriteLine(ex.Message);
                }
    
                return null;
            }
    public static Guid GetBitmapEncoder(string fileType)
            {
                Guid encoderId = BitmapEncoder.JpegEncoderId;
                switch (fileType)
                {
                    case ".bmp":
                        encoderId = BitmapEncoder.BmpEncoderId;
                        break;
                    case ".gif":
                        encoderId = BitmapEncoder.GifEncoderId;
                        break;
                    case ".png":
                        encoderId = BitmapEncoder.PngEncoderId;
                        break;
                    case ".tif":
                        encoderId = BitmapEncoder.TiffEncoderId;
                        break;
                }
    
                return encoderId;
            }
    


    Please see here for additional Informations:
    http://mariusbancila.ro/blog/2013/11/05/render-the-screen-of-a-windows-store-app-to-a-bitmap-in-windows-8-1/

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.imaging.rendertargetbitmap

    If you want to Combine/merge/blit single imagefiles you can do this also just fine with Writeablebitmap and WriteablebitmapEx (is available as NuGet Package for Windows Store Apps):
    http://writeablebitmapex.codeplex.com/



    Thursday, July 31, 2014 7:52 AM