I am working on a Windows 8 Metro app that applies filters to images. I have a web version of the app and wanted to port it. But as we all know WinRT doesn't have all the good things .NET provides otherwise :/
Currently I am applying the filters on a byte array and I want to keep it that way, because it's super fast! So for the past few days I have been searching for ways to convert a StorageFile to byte[] and then byte[] to BitmapImage.
So far I have managed to do the first one (StorageFile to byte[]). Here is how I do it:
public async Task<Byte[]> ImageFileToByteArray(StorageFile file)
{
IRandomAccessStream stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);
PixelDataProvider pixelData = await decoder.GetPixelDataAsync();
return pixelData.DetachPixelData();
}
This piece of code returns a byte[] that contains the pixel data as BGRA.
And here comes the tricky part. I cannot successfully convert the byte array into a BitmapImage. I have searched all over the places and many people suggest using WriteableBitmap but that doesn't do much good to me. I have also found some pieces of code that should be working... but they don't.
One of the solutions I have tried is using InMemoryRandomAccessStream like this:
public async Task<BitmapImage> ByteArrayToBitmapImage(Byte[] pixels)
{
var stream = new InMemoryRandomAccessStream();
await stream.WriteAsync(pixels.AsBuffer());
stream.Seek(0);
var image = new BitmapImage();
await image.SetSourceAsync(stream);
return image;
}
This one throws the following exception:
An exception of type 'System.Exception' occurred in mscorlib.dll but was not handled in user code
Additional information: The component cannot be found. (Exception from HRESULT: 0x88982F50)
I tried using this line instead:
PixelDataProvider pixelData = await decoder.GetPixelDataAsync(
BitmapPixelFormat.Bgra8,
BitmapAlphaMode.Ignore,
new BitmapTransform(),
ExifOrientationMode.IgnoreExifOrientation,
ColorManagementMode.DoNotColorManage);
But it did me no good since I keep getting that exception.
I have also tried this:
var bitmapImage = new BitmapImage();
var pixels = await ImageFileToByteArray(file);
ImageSource imgSource;
using (InMemoryRandomAccessStream ms = new InMemoryRandomAccessStream())
{
using (DataWriter writer = new DataWriter(ms.GetOutputStreamAt(0)))
{
writer.WriteBytes(pixels);
await writer.StoreAsync();
}
await bitmapImage.SetSourceAsync(ms);
imgSource = bitmapImage;
}
And get the same exception as the first piece of code.
I have also tried several other ways that include using a normal Stream then converting into a IRandomAccessStream but they didn't work either.
All of the above code seems fine to me. So my guess at the moment is that the problem is in the byte[]. I'm guessing that the format of the pixelData inside is not valid, so I tried changing it to RGBA but that didn't help either. Also the PixelHeight and PixelWidth of the BitmapImage are 0.
This is working for me,
private async Task<BitmapImage> ByteArrayToBitmapImage(byte[] byteArray)
{
var bitmapImage = new BitmapImage();
var stream = new InMemoryRandomAccessStream();
await stream.WriteAsync(byteArray.AsBuffer());
stream.Seek(0);
bitmapImage.SetSource(stream);
return bitmapImage;
}
this is my first answer..hope it will help.
I had the exact same problem and I spand more then 6 hours trying to figur this out.
this is what i came up with:
what you said was right. there are 2 waye to convert image to byteArray:
First aproach(yours)
public async Task<byte[]> ImageFileToByteArrayAsync(StorageFile file)
{
IRandomAccessStream stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);
PixelDataProvider pixelData = await decoder.GetPixelDataAsync();
return pixelData.DetachPixelData();
}
Second aproach
public async Task<byte[]> ImageFileToByteArrayAsync(StorageFile file)
{
var inputStream = await file.OpenSequentialReadAsync();
var readStream = inputStream.AsStreamForRead();
var buffer = new byte[readStream.Length];
await readStream.ReadAsync(buffer, 0, buffer.Length);
return buffer;
}
if youll use the second aproach to decode the pic, with no Pixel, this converter will work:
public class ByteArrayToImageConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (value == null || !(value is byte[]))
return null;
using (InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream())
{
using (DataWriter writer = new DataWriter(stream.GetOutputStreamAt(0)))
{
writer.WriteBytes((byte[])value);
writer.StoreAsync().GetResults();
}
BitmapImage image = new BitmapImage();
image.SetSource(stream);
return image;
}
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
for the first aproach youll need to work with WriteableBitmap as you said.
Related
I want to get a BitmapImage when capture view's screenshot. So I start to get byte array data first, then convert to BitmapImage.
RenderTargetBitmap renderTarget = new RenderTargetBitmap();
await renderTarget.RenderAsync(swapChainPanel);
IBuffer pixelBuffer = await renderTarget.GetPixelsAsync();
await GetBitmapAsync(pixelBuffer.ToArray());
...
public static async Task<BitmapImage> GetBitmapAsync(byte[] data)
{
var bitmapImage = new BitmapImage();
try
{
using (var stream = new InMemoryRandomAccessStream())
{
using (var writer = new DataWriter(stream))
{
writer.WriteBytes(data);
await writer.StoreAsync();
await writer.FlushAsync();
writer.DetachStream();
}
stream.Seek(0);
await bitmapImage.SetSourceAsync(stream); // throw Exception
}
return bitmapImage;
}
catch (Exception e)
{
return null;
}
}
But it give error :
The component cannot be found. (Exception from HRESULT: 0x88982F50)
Please help me to find the problem.
Error when convert byte array to BitmapImage in UWP
The problem is you have not specific BitmapEncoder for BitmapImage when convertering. In general, we often use the following code to get BitmapImage from bytes.
_backAction = new Action<byte[]>(async (bytes) =>
{
InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream();
BitmapImage img = new BitmapImage();
var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream);
encoder.SetPixelData(
BitmapPixelFormat.Bgra8,
BitmapAlphaMode.Straight,
(uint)48,
(uint)32,
DisplayInformation.GetForCurrentView().LogicalDpi,
DisplayInformation.GetForCurrentView().LogicalDpi,
bytes);
await encoder.FlushAsync();
await img.SetSourceAsync(stream);
});
I'm using this code to write a Byte Array inside a file BMP:
private async void ScriviBMP()
{
using (Stream stream = immagineBitmap.PixelBuffer.AsStream())
{
await stream.WriteAsync(arrayImmagine, 0, arrayImmagine.Length);
}
StorageFolder folder = KnownFolders.PicturesLibrary;
if (folder != null)
{
StorageFile file = await folder.CreateFileAsync("area2_128x128" + ".bmp", CreationCollisionOption.ReplaceExisting);
using (var storageStream = await file.OpenAsync(FileAccessMode.ReadWrite))
{
var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.BmpEncoderId, storageStream);
var pixelStream = immagineBitmap.PixelBuffer.AsStream();
var pixels = new byte[pixelStream.Length];
await pixelStream.ReadAsync(pixels, 0, pixels.Length);
encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore, (uint)immagineBitmap.PixelWidth, (uint)immagineBitmap.PixelHeight, 48, 48, pixels);
await encoder.FlushAsync();
}
}
}
Then i'm using this code to display the BMP image in a Image object
private async void VisBMP()
{
var file = await KnownFolders.PicturesLibrary.GetFileAsync("area2_128x128.bmp");
using (var fileStream = (await file.OpenAsync(Windows.Storage.FileAccessMode.Read)))
{
var bitImg = new BitmapImage();
//bitImg.UriSource = new Uri(file.Path);
bitImg.SetSource(fileStream);
image.Source = bitImg;
}
}
these functions take about 400 milliseconds to complete the process, that's a lot of time.
Is there a way to avoid the usage of a BMP file and use only a stream to display the image on the image object?
It can be that debugging the program can slow the processes? I'm using Visual Studio 2015.
You can transfer the data buffer(arrayImmagine) to image in InMemoryRandomAccessStream.These codes take about 200ms.I tested with following pieces of code. In addition, you can reference this article to get more information.
BitmapImage biSource = new BitmapImage();
using (InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream())
{
await stream.WriteAsync(bytes.AsBuffer());
stream.Seek(0);
await biSource.SetSourceAsync(stream);
}
image.Source = biSource;
I have a list of Bitmap images. I need to save them to local folder.
This doesn't work on windows 10 Universal application.
var serializer = new DataContractSerializer(typeof(List<BitmapImage>));
using (var stream = await ApplicationData.Current.LocalCacheFolder.OpenStreamForWriteAsync(fileName, CreationCollisionOption.ReplaceExisting)) {
serializer.WriteObject(stream, collection);
}
WriteObject method throws the following error
Exception thrown: 'System.Runtime.Serialization.InvalidDataContractException' in System.Private.DataContractSerialization.dll
BitmapImage is not serializable. Convert that to a byte array and write that to disk instead:
public static byte[] ConvertToBytes(BitmapImage bitmapImage)
{
using (var ms = new MemoryStream())
{
var btmMap = new WriteableBitmap(bitmapImage.PixelWidth, bitmapImage.PixelHeight);
btmMap.SaveJpeg(ms, bitmapImage.PixelWidth, bitmapImage.PixelHeight, 0, 100);
return ms.ToArray();
}
}
var serializer = new DataContractSerializer(typeof(byte[]));
using (var stream = await ApplicationData.Current.LocalCacheFolder.OpenStreamForWriteAsync(fileName, CreationCollisionOption.ReplaceExisting)) {
serializer.WriteObject(stream, ConvertToBytes(collection));
}
You cannot extract the bitmap from a BitmapImage. There is no way to save a BitmapImage to file directly. The only way is to remember the original source and save that out. For more details about save BitmapImage to file please reference this thread.
If you know the original source, for example, you read the BitmapImage from the file picked by a FileOpenPicker, then you can read the image file to a WriteableBitmap then you can extract the PixelBuffer, encode it with a BitmapEncoder, and then save the resulting stream to a StorageFile as Rob said. Sample code as follows:
private async void btncreate_Click(object sender, RoutedEventArgs e)
{
FileOpenPicker openpicker = new FileOpenPicker();
openpicker.FileTypeFilter.Add(".jpg");
openpicker.FileTypeFilter.Add(".png");
StorageFile originalimage = await openpicker.PickSingleFileAsync();
WriteableBitmap writeableimage1;
using (IRandomAccessStream stream = await originalimage.OpenAsync(FileAccessMode.Read))
{
SoftwareBitmap softwareBitmap;
BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);
softwareBitmap = await decoder.GetSoftwareBitmapAsync();
writeableimage1 = new WriteableBitmap(softwareBitmap.PixelWidth, softwareBitmap.PixelHeight);
writeableimage1.SetSource(stream);
}
StorageFolder folder = ApplicationData.Current.LocalFolder;
StorageFile newimage = await folder.CreateFileAsync(originalimage.Name, CreationCollisionOption.ReplaceExisting);
using (IRandomAccessStream ras = await newimage.OpenAsync(FileAccessMode.ReadWrite))
{
BitmapEncoder encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, ras);
var stream = writeableimage1.PixelBuffer.AsStream();
byte[] buffer = new byte[stream.Length];
await stream.ReadAsync(buffer, 0, buffer.Length);
encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore, (uint)writeableimage1.PixelWidth, (uint)writeableimage1.PixelHeight, 96.0, 96.0, buffer);
await encoder.FlushAsync();
}
}
For list of images, you may need save them one by one.
I need to convert an image into a byte array to store it in a database. and also I need to convert that array back to the image. I did google research but I couldn't find a solution because in UWP platform some api doesn't available.
I found the solution from these articles as theoutlander says.
To convert a image into a byte[] i'm going to use the 'OpenSequentialReadAsyn()' method of a storage file.
lets assume that our image is 'file'. to convert it into a byte array do the below
using (var inputStream = await file.OpenSequentialReadAsync())
{
var readStream = inputStream.AsStreamForRead();
var byteArray = new byte[readStream.Length];
await readStream.ReadAsync(byteArray, 0, byteArray.Length);
return byteArray;
}
To convert the byte[] back into a image do the following,
using (InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream())
{
using (DataWriter writer = new DataWriter(stream.GetOutputStreamAt(0)))
{
writer.WriteBytes(this.byteArray);
await writer.StoreAsync();
}
var image = new BitmapImage();
await image.SetSourceAsync(stream);
return image;
}
you can find more in this article.
With the following code I can get a IRandomAccessStreamWithContentType representing the Thumbal of a contact
var contactPicker = new ContactPicker();
contactPicker.SelectionMode = ContactSelectionMode.Contacts;
var contact = await contactPicker.PickSingleContactAsync();
var thumb = await contact.GetThumbnailAsync();
But what is the best way to handle the IRandomAccessStreamWithContentType to get a image instance and a imagefile ?
You should just handle it as an ordinary IRandomAccessStream containing the image:
using (var stream = await contact.GetThumbnailAsync())
{
BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);
BitmapFrame frame = await decoder.GetFrameAsync(0);
var bitmap = new WriteableBitmap((int)frame.PixelWidth, (int)frame.PixelHeight);
stream.Seek(0);
await bitmap.SetSourceAsync(stream);
}
From here on you can set the WriteableBitmap as asource to Image control or use it in any other way.
The Seek call is required because the stream is already read to get the image size so the position needs to be reset before reading the image itself.