Using Win2D to apply effects on your files

It’s been a long time since my last post about C# but I’m still using it, mainly for a personal project: UrzaGatherer 3.0.

Version 2.0 was done using WinJS and JavaScript but because I love discovering new things I decided that version 3.0 will be developed using C# and XAML for Windows 10.

One of the feature I’m working on is a blurred lockscreen background. Basically, the idea is to pick a card and use the picture as lockscreen background.

The main problem that I was facing is that the cards scans are in a too low resolution. So to get rid of the inevitable aliasing produced by scaling my pictures up, I decided to add some Gaussian blur.

The first version of my blurred lockscreen background used a kind of brute force approach: Going through all the pixels and applying my filter. On my desktop PC: no problem. But on my phone (Remember, it is a Windows 10 universal application that I’m working on), the operation was too slow.

Then enters Win2D!

Thanks to it I was able to produce a method to blur my files that uses GPU and DirectX. So faster results and in the same time less battery consumption.

Even the code is pretty simple:

var file = await Package.Current.InstalledLocation.GetFileAsync("test.png");
using (var stream = await file.OpenAsync(FileAccessMode.Read))
{
    var device = new CanvasDevice();
    var bitmap = await CanvasBitmap.LoadAsync(device, stream);
    var renderer = new CanvasRenderTarget(device, bitmap.SizeInPixels.Width, bitmap.SizeInPixels.Height, bitmap.Dpi);

    using (var ds = renderer.CreateDrawingSession())
    {
        var blur = new GaussianBlurEffect();
        blur.BlurAmount = 8.0f;
        blur.BorderMode = EffectBorderMode.Hard;
        blur.Optimization = EffectOptimization.Quality;
        blur.Source = bitmap;
        ds.DrawImage(blur);
    }
    var saveFile = await ApplicationData.Current.LocalFolder.CreateFileAsync("temp.jpg", CreationCollisionOption.ReplaceExisting);

    using (var outStream = await saveFile.OpenAsync(FileAccessMode.ReadWrite))
    {
        await renderer.SaveAsync(outStream, CanvasBitmapFileFormat.Png);
    }
}

So basically:

Open the file stream
Create a canvasDevice and a CanvasRenderTarget to have offscreen rendering capabilities
Create the effect you want to use (GaussianBlurEffect here)
Apply the effect
Save your file

Insanely simple, right?

Before: