Change Bitmap to different shapes in Windows Phone app

Question

I've been looking for the solution for some time and haven't yet found it. One of the functions of my app is to load an image and then to change its shape - e.g. I load a normal rectangular image, and then there are 2-3 buttons - change the image to a circle, triangular or some other shape. Is sth like that even possible with Bitmaps? I found a lot of interesting things about Nokia imaging SDK, but all the shape stuff i found was LensBlurEffect, which isn't exactly what i need.

If someone could point me in the right direction, I would be really grateful!

Thank You in advance for help!

Best regards, Roman

Answer 1

I'm working on filters that draws shapes using Nokia Imaging SDK. To solve your problem, I created sample project that uses Nokia Imaging SDK's blend filter and my custom shape filters.

Actually you can do the same thing with shape image as David refers (background is black, foreground white) instead of using my custom filters (EllipseShapeFilter above example code).

Here is sample code;

var ellipseImage = new WriteableBitmap(1024, 768);
Rect origin = new Rect(new Point(512, 384), new Size(512, 384));
uint white = 0xff000000 | (255 << 16) | (255 << 8) | 255;

var image = LoadFromResources(new Uri(@"/BlendImageSample;component/Assets/Sample.jpg", UriKind.Relative));

using (var ellipseSource = new BitmapImageSource(ellipseImage.AsBitmap()))
using (var ellipse = new EllipseShapeFilter(ellipseSource, white, origin))
{
    ellipseImage = await new WriteableBitmapRenderer(ellipse, ellipseImage).RenderAsync();
}

ImageViewer.Source = ellipseImage;

using (var backgroundSource = new BitmapImageSource(ellipseImage.AsBitmap()))
using (var foregroundSource = new BitmapImageSource(image.AsBitmap()))
using (var filterEffect = new FilterEffect(backgroundSource))
{
    using (BlendFilter blendFilter = new BlendFilter())
    {
        blendFilter.ForegroundSource = foregroundSource;
        blendFilter.BlendFunction = BlendFunction.Darken;

        filterEffect.Filters = new[] { blendFilter };

        var OutputBitmap = new WriteableBitmap(image.PixelWidth, image.PixelHeight);
        var result = await new WriteableBitmapRenderer(filterEffect, OutputBitmap).RenderAsync();

        ImageViewer.Source = result;
    }
}

Github - BlendImageSample

Answer 2

Well the bitmap is always going to be rectangular, there is nothing you can do about that.

What you can do is make some pixels transparent, thus making the bitmap appear of a different shape.

One way to do this using the Nokia Imaging SDK is to use the BlendFilter to blend a transparent image (I suggest just a ColorImageSource) over the original image. You can provide different masks to create different "shapes."