locked
Getting Pixels of an Element (WriteableBitmap)

    Question

  • I need to get the pixels of an element. In Silverlight, we had WriteableBitmap but WinRT is missing WriteableBitmap.Render(). In WPF, we had CopyPixels, but WinRT is missing that as well.

    This seems like a pretty straightforward thing. Any ideas?

    Friday, September 16, 2011 1:20 AM

Answers

  • For image resizing, see Windows.Graphics.Imaging.BitmapEncoder and Windows.Graphics.Imaging.BitmapDecoder (e.g. BitmapDecoder.CreateAsync() or BitmapDecoder.GetThumbnailAsync()).

    Andy - would those APIs work for your scenarios?

    Also - we recognize the opportunities with a more general WB.Render() but there's no way to do that with Build bits.

    Joe

     

     

    • Proposed as answer by Robert_Levy Friday, September 16, 2011 7:49 PM
    • Marked as answer by Andy Beaulieu Sunday, September 18, 2011 12:17 AM
    Friday, September 16, 2011 6:31 PM
  • While working on a Fractal test app I ran into this exact problem and while may be not ideal I ended using the PixelBuffer directly.

    WriteableBitmap bmp = new WriteableBitmap(1024, 768);
    Stream stream = bmp.PixelBuffer.AsStream();

    Then for each of your pixels write them like:

    stream.WriteByte(c.B);
    stream.WriteByte(c.G);
    stream.WriteByte(c.R);
    stream.WriteByte(c.A);

    Hopefully this will at least help you play around with some of your scenarios in the BUILD bits.


    Blog: http://weblogs.asp.net/whaggard
    • Marked as answer by Greg Binkerd Friday, September 16, 2011 11:20 PM
    Friday, September 16, 2011 10:08 PM

All replies

  • At present, there is no equivalent to WriteableBitmap.Render().

    What is it you need to do?

    Joe

    Friday, September 16, 2011 3:01 AM
  • First, let me say it's awesome to see you're watching these forums Joe - it's great to see such commitment from someone at a high level in the team!

    In my particular case, I need to do a shoot a ray from the center of an image outward and analyze the pixels to do an edge detection.

    but more broadly, when WriteableBitmap was added in Silverlight 3, it opened up LOTS of great possibilities such as -

    - adding effects to bitmap images, such as a black+white photo effect

    - modifying the contents of a bitmap, such as adding in a new image on top of an existing image

    Is there another API I can or should use?

    Thanks!

    -Andy

    Friday, September 16, 2011 12:04 PM
  • First, let me say it's awesome to see you're watching these forums Joe - it's great to see such commitment from someone at a high level in the team!

    In my particular case, I need to do a shoot a ray from the center of an image outward and analyze the pixels to do an edge detection.

    but more broadly, when WriteableBitmap was added in Silverlight 3, it opened up LOTS of great possibilities such as -

    - adding effects to bitmap images, such as a black+white photo effect

    - modifying the contents of a bitmap, such as adding in a new image on top of an existing image

    Is there another API I can or should use?

    Thanks!

    -Andy


    I second that.

    On Windows Phone I'm currently using WriteableBitmap to allow users to resize an image before uploading it.

    It's not hard to imagine an entire class of apps where users would legitimately want to modify the contents of a bitmap. I hope there'll be something in WinRT that allows this.

    Friday, September 16, 2011 12:19 PM
  • I may have over-stated the limitation here.

    We just can't use the Render() method to get the pixels of a UI element on screen.

    As far as modifying pixels of an image - looks like that should still be possible, it's just different.

    Friday, September 16, 2011 12:31 PM
  • You can use WIC to load images (http://msdn.microsoft.com/en-us/library/ee719655(v=VS.85).aspx) and get to the pixels. WIC also has API to read and modify EXIF data of images.

    You can use D2D to draw vector graphics and text into them: http://msdn.microsoft.com/en-us/library/dd372337(v=VS.85).aspx

    This sample shows how to apply effects: http://code.msdn.microsoft.com/windowsapps/Direct2D-Image-Effects-2979be08

     



    Friday, September 16, 2011 3:26 PM
  • This is for a C#/XAML app, not DirectX.

    Are you suggesting I create a Windows Runtime Component in C++ which uses these DirectX methods, and then call that from my C# Metro style app?

     

    Friday, September 16, 2011 4:46 PM
  • For image resizing, see Windows.Graphics.Imaging.BitmapEncoder and Windows.Graphics.Imaging.BitmapDecoder (e.g. BitmapDecoder.CreateAsync() or BitmapDecoder.GetThumbnailAsync()).

    Andy - would those APIs work for your scenarios?

    Also - we recognize the opportunities with a more general WB.Render() but there's no way to do that with Build bits.

    Joe

     

     

    • Proposed as answer by Robert_Levy Friday, September 16, 2011 7:49 PM
    • Marked as answer by Andy Beaulieu Sunday, September 18, 2011 12:17 AM
    Friday, September 16, 2011 6:31 PM
  • While working on a Fractal test app I ran into this exact problem and while may be not ideal I ended using the PixelBuffer directly.

    WriteableBitmap bmp = new WriteableBitmap(1024, 768);
    Stream stream = bmp.PixelBuffer.AsStream();

    Then for each of your pixels write them like:

    stream.WriteByte(c.B);
    stream.WriteByte(c.G);
    stream.WriteByte(c.R);
    stream.WriteByte(c.A);

    Hopefully this will at least help you play around with some of your scenarios in the BUILD bits.


    Blog: http://weblogs.asp.net/whaggard
    • Marked as answer by Greg Binkerd Friday, September 16, 2011 11:20 PM
    Friday, September 16, 2011 10:08 PM
  • I am just going to shelve my current boundary detection for now, will come back to it - thanks for considering WB.Render() as a future fix.
    Sunday, September 18, 2011 12:17 AM
  • it seems ok, but I can't invoke AsStream on PixelBuffer. Am I missing an import?
    Sunday, September 18, 2011 1:08 PM
  • It's an extension method.  Add:

    using System.Runtime.InteropServices.WindowsRuntime;
    

    Joe

    Sunday, September 18, 2011 6:48 PM
  • While working on a Fractal test app I ran into this exact problem and while may be not ideal I ended using the PixelBuffer directly.

    WriteableBitmap bmp = new WriteableBitmap(1024, 768);
    Stream stream = bmp.PixelBuffer.AsStream();

    Then for each of your pixels write them like...

    It looks like PixelBuffer does not provide random access (ideally, this should be just int[]). The ability to directly manipulate pixels with minimal overhead is a must, IMO.
    Monday, January 23, 2012 9:37 PM
  • I am trying to develop a Metro version of our existing application. Unfortunately our app deals a lot with pixel(image processing , image warping ,color space altering etc).

    I agree with Skalkin a lot , this is a must.

    Thursday, March 29, 2012 8:13 AM
  • You can work around this by keeping a separate int[] buffer for manipulation and copying it over in its entirety via the stream when necessary. This however can become impractical if you're dealing with a lot and/or large bitmaps, due to the additional memory pressure both in usage and IO.
    • Edited by Tom Servo Saturday, April 28, 2012 11:58 PM
    Saturday, April 28, 2012 11:58 PM
  • What is the C++ / CX equivalent?

    I need to do per pixel processing in C++ WinRT component.

    Thursday, May 31, 2012 2:08 PM
  • In C++ you could just query the IBuffer for IBufferByteAccess, and retrieve the Buffer property. That gives you a raw byte pointer which will be valid until you Release the IBufferByteAccess that you obtained. Since working with raw pointers is the norm in C++, you don't really need any wrappers, unlike in .NET.
    Sunday, July 08, 2012 4:11 PM
  • For what its worth all - I desperately need the Render call also - specifically - the ability to the bitmap for a visual in c#.  Our product has a major feature that relies on it!

    Any news on this for the next release or a patch MS insiders?  Much appreciation in advance...

    best! Richard


    • Edited by EString1 Monday, July 30, 2012 3:24 PM
    Monday, July 30, 2012 3:23 PM
  • For what its worth all - I desperately need the Render call also

    +1 on that. I too really really need the Render() API. For me, I need a way to flatten the Canvas content to a bitmap image.

    Monday, October 01, 2012 6:22 AM