We Keep Coding

Image smoothing in UWP app

I have a small UWP application that load same image in two ways:
var folder = Package.Current.InstalledLocation;
var file = await folder.GetFileAsync("TestImage.png");
var bitmapImage1 = new BitmapImage();
using (var stream = await file.OpenAsync(FileAccessMode.Read))
{
await bitmapImage1.SetSourceAsync(stream);
}
var bitmapImage2 = new BitmapImage(new Uri(BaseUri, "TestImage.png"));
_image.Source = bitmapImage1;
//_image.Source = bitmapImage2;
The problem is that Image control shows the same image in different ways. For bitmapImage1 image is not smoothed, but for bitmapImage2 it's ok. How it looks like. I need to do some manipulation with image before show (change some pixels) but I also need to have smoothed image after that. Could you please help me with it?
I also used WriteableBitmap to change some pixels and have same result (not smoothed). Looks like I need to tell to Image control how to draw this.
Here is link to project for more information

I tested your code on my side. And you will found if you don't set the Height and Width properties for the image control, the pictures will looks all the same. So the reason for one looks smooth but another looks not is the image control scaling the picture. Without scaling the picture will not looks different. I guess this may be leaded but difference between vector and bitmap image.
You should be able to resolve it by create a smooth picture with the size you just want to show in the app, and set the image control to the same size with the picture or without setting the Height and Width properties, this may resolved.
My result:

I've got solution on another thread.
If change order of code lines it helps:
var folder = Package.Current.InstalledLocation;
var file = await folder.GetFileAsync("TestImage.png");
var bitmapImage1 = new BitmapImage();
_image.Source = bitmapImage1;
using (var stream = await file.OpenAsync(FileAccessMode.Read))
{
await bitmapImage1.SetSourceAsync(stream);
}
So we should assign Image source and than set source stream to Bitmap.
It seems, Image control decodes the picture quite flexibly so that it can suit for acutal UI size. If you set the BitmapImage to Image.Source first, the picture is to be smoothed properly like the second one.

Lumia imaging crop filter

Hi so I'm making an app for Windows 10 that requires a user to choose an image and it's going to crop the image to 310*128. I got the file picker code already. But I want to know how to actually crop and save the image and display in image box. I already have the xaml page done

With Lumia Imaging SDK you can both crop the selected image and resize the image. In this answer I assume you actually want to crop, but from the text I could just as well guess you really just want to resize.
For crop, use the CropEffect from Lumia.Imaging.Transforms. Set the CropArea property on it to the object, and then render it. If you are rendering straight to the XAML page I recommend using a SwapChainPanel object in XAML and a SwapChainPanelRenderer to render on it.
Given that you are loading a StorageFile and rendering to a SwapChainPanel your code might look like something like this:
StorageFile file = ...
using (var source = new StorageFileImageSource(file))
using (var crop = new CropEffect(source, new Rect(0, 0, 310, 128))
using (var renderer = new SwapChainPanelRenderer(crop, YourSwapChainPanel))
{
await renderer.RenderAsync();
}

How to display scaled image without anti-aliasing?

Question
How can I scale an image in XAML quickly without anti-aliasing applied?
Background
I am trying to make a pixel editor as a Windows 8 XAML/C# app. I'm using c#/XAML because most of my experience is with c#/WPF.
Method 1: WriteableBitmap + Image control. Originally, I used a WriteableBitmap to store and edit an image. That image is displayed in a resized XAML Image control. The problem is that the image does not get scaled properly because of anti-aliasing. (XAML does not seem to provide the BitmapScalingOptions that are available in WPF)
Method 2: Redrawn WriteableBitmap + Image control. Next I tried writing my own scaling, where I take my original image and write to a larger WriteableBitmap so that the scaled image is pixelated. The scaled image is then presented inside a XAML Image control. This process is slow and inefficient.
Method 3: SharpDX + Direct2d ?? I am pretty sure a solution exists somewhere between SharpDx, SurfaceImageSource, and Direct2d. Event still, I can't quite figure out how to display a SharpDx.WIC.Bitmap inside a Windows.UI.Xaml Image control, and am generally getting lost in the documentation.
What exactly is a recommended setup for achieving my desired end? Are there c# samples available which might point me in the right direction?

I don't know if you mean by scaling it by resizing it with the mouse or just with a button click to auto scale to a predetermined size.
But the thing you can do is to use an Image panel and then, just set it to image.Stretch = Stretch.Fill; so if you override and create a method for the Resize event of the Image Panel, your image will take the size to fill the Image panel.

Cropping an image stored locally

I'm kind of a greenhorn to Windows Phone development and I've been looking for a way in order to crop an image already built into the project (Maybe even from the camera some day), but every package I've found has either had a fuss with Visual Studio, or throws argument exceptions. So I've decided that I will make my own function to do so.
However, I have not the slightest idea where to start. I'm pretty sure WriteableBitmap has something to do with it, and something to do with the following code:
Application.GetResourceStream(new Uri("/PhoneApp3;component/Assets/Flowers/Daff.jpg"));
So how would one start out with getting the pixel data or creating a new image and apply pixel data. And finally how would one save the result and reference it through the UI's image elements.

Use WriteableBitmapEx to crop images on Windows Phone. The way you solution will have to work is to manipulate the WritableBitmap.Pixels property. You first load in an image, change the Pixels property and transform the raw pixels into a saved image format like JPG or PNG. That's a lot of work so lucky for you WriteableBitmapEx does that for you.
First, install WritebleBitmapEx from NuGet:
Install-Package WriteableBitmapEx
Then you can load any image, crop it and save back to the MediaLibrary. Here's for example how to load a file from the app's XAP, crop to top-left 25% of the image and save to the "Saved Pictures" WP7/8 album.
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
var bmp = new WriteableBitmap(0, 0).FromContent("Assets/ApplicationIcon.png");
var croppedBmp = bmp.Crop(0, 0, bmp.PixelWidth/2, bmp.PixelHeight/2);
croppedBmp.SaveToMediaLibrary("myImage.jpg");
}
When we run this code we can see the new cropped image:

I recently needed to do this and didn't want to use an external lib. Microsoft provide a good example on MSDN on how to do it (and is also very good at not causing memory leaks!)
http://code.msdn.microsoft.com/wpapps/Photos-Sample-a38a2c8e
Cheers,
Will

Re-encoding of Jpeg Image in binary column when saving

I know there are similar questions, but I have a question concerning the storage of images in a binary-column.
I have a small windows forms app that loads an image into a picturebox control from a sql compact db using Linq2SQL. The user can drag any image (jpg,bmp,gif) on a picturebox. On the DragDrop-Event the image is loaded into the picturebox.
When I save the record following code is executed to store the image of the picturebox control:
MemoryStream imgStream = new MemoryStream();
pictureBox1.Image.Save(imgStream, System.Drawing.Imaging.ImageFormat.Jpeg);
myTable.MyImage = imgStream.ToArray();
I have checked the size of the byte array and it didn't change after saving the record.
Is the image re-encoded every time the Save-Method is called? It would be maybe then better to check if the image has changed at all.

JPEG images are decoded as a function of their being displayed by .NET (or really just about anything). So, if you pull a JPEG out as a binary, put it in a PictureBox (which will convert it to a raster format to display), then take that now-uncompressed raster Image and recompress it, you MAY end up making changes to that image.
I would keep the original bytestream for the displayed Image somewhere behind the scenes, and write that back to the DB when the user saves the data. This will not only help preserve the integrity of the image, it will boost performance by reducing the need to recompress the image every time.

If this code is called when you call Save then yes, the PictureBox will "export" itself as a JPEG every time. Are you noticing a performance issue because of this? If you want to avoid it, set a flag on application load and when the drag/drop event occurs raise the flag signaling that the Save method should update the image data.