I have an image that's loaded in XAML using a converter. Rather than load this image again, I want to take that image and find the dominant colour to be able to use for other graphics on the page. So far I have this:
var himage = (BitmapImage)image_home.Source;
using (var stream = await himage.OpenReadAsync()) //**can't open himage this way**
{
//Create a decoder for the image
var decoder = await BitmapDecoder.CreateAsync(stream);
//Create a transform to get a 1x1 image
var myTransform = new BitmapTransform { ScaledHeight = 1, ScaledWidth = 1 };
//Get the pixel provider
var pixels = await decoder.GetPixelDataAsync(
BitmapPixelFormat.Rgba8,
BitmapAlphaMode.Ignore,
myTransform,
ExifOrientationMode.IgnoreExifOrientation,
ColorManagementMode.DoNotColorManage);
//Get the bytes of the 1x1 scaled image
var bytes = pixels.DetachPixelData();
//read the color
var myDominantColor = Color.FromArgb(255, bytes[0], bytes[1], bytes[2]);
}
Obviously I can't open the BitmapImage himage using OpenReadAsync, what do I need to do there to be able to achieve this?
BitmapDecoder requires RandomAccessStream object to create a new instance. BitmapImage may not be directly extract as RandomAccessStream unless you know the original source. According to your comment, you are binding image Uri to the image control, so you could know the original source and you can get the RandomAccessStream from the BitmapImage's UriSource property by RandomAccessStreamReference class, you don't need load the Image again. Code as follows:
var himage = (BitmapImage)image_home.Source;
RandomAccessStreamReference random = RandomAccessStreamReference.CreateFromUri(himage.UriSource);
using (IRandomAccessStream stream = await random.OpenReadAsync())
{
//Create a decoder for the image
var decoder = await BitmapDecoder.CreateAsync(stream);
...
//read the color
var myDominantColor = Color.FromArgb(255, bytes[0], bytes[1], bytes[2]);
}
Related
I'm trying to convert mat image to something that I could set as ImageSource on UWP but I could not find any solution.
The only solution I found show me very bad image:
https://i.stack.imgur.com/uB8oT.png
Here's my code:
VideoCapture _capture = new VideoCapture(0);
while (true)
{
using (Mat mat = new Mat())
{
bool ok = _capture.Read(mat);
if (ok)
{
await Dispatcher.RunAsync(CoreDispatcherPriority.High,
async () =>
{
byte[] imageArray = mat.GetRawData();
WriteableBitmap writableBitmap = new WriteableBitmap(mat.Width, mat.Height);
using (MemoryStream memoryStream = new MemoryStream(imageArray))
{
using (Stream stream = writableBitmap.PixelBuffer.AsStream())
{
await memoryStream.CopyToAsync(stream);
}
}
imageCamera.Source = writableBitmap;
});
}
}
how to convert mat to imageSource on UWP
Currently, the Image control only supports images that use BGRA8 encoding and pre-multiplied or no alpha channel. Before attempting to display an image, test to make sure it has the correct format, and if not, use the SoftwareBitmap static Convert method to convert the image to the supported format.
SoftwareBitmap outputBitmap = SoftwareBitmap.CreateCopyFromBuffer(
writeableBitmap.PixelBuffer,
BitmapPixelFormat.Bgra8,
writeableBitmap.PixelWidth,
writeableBitmap.PixelHeight
);
var source = new SoftwareBitmapSource();
await source.SetBitmapAsync(outputBitmap);
I am making a Note application where I can draw with Windows ink and also paste images. I want to save the images and ink in a single file. Therefore I am converting the image to a string in base64 format so that I can easily serialize it. My problem is when I try to recreate the image from the string.
My code to decode the image data into a base64 string:
var decoder = await BitmapDecoder.CreateAsync(imageStream);
var pixels = await decoder.GetPixelDataAsync();
var bytes = pixels.DetachPixelData();
base64String = Convert.ToBase64String(bytes);
My code to encode the base64 string into an image again (This code does NOT work! The image is not added to the redCanvas):
var bytes = Convert.FromBase64String(base64String);
BitmapImage bitmapImage = new BitmapImage();
using (InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream())
{
await stream.WriteAsync(bytes.AsBuffer());
stream.Seek(0);
bitmapImage.SetSource(stream);
}
Image image = new Image();
image.Source = bitmapImage;
// Add the image to a second canvas
redCanvas.Children.Add(image);
Full code for pasting the image and creating the base64 string:
private async Task myButton_ClickAsync(object sender, RoutedEventArgs e)
{
var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.GetContent();
if (dataPackageView.Contains(StandardDataFormats.Bitmap))
{
IRandomAccessStreamReference imageReceived = null;
imageReceived = await dataPackageView.GetBitmapAsync();
if (imageReceived != null)
{
using (var imageStream = await imageReceived.OpenReadAsync())
{
var bitmapImage = new BitmapImage();
bitmapImage.SetSource(imageStream);
var decoder = await BitmapDecoder.CreateAsync(imageStream);
var pixels = await decoder.GetPixelDataAsync();
var bytes = pixels.DetachPixelData();
base64String = Convert.ToBase64String(bytes);
TextBox_Image_Base64.Text = base64;
Image image = new Image();
// Add the image to a list of Images
ListImages.Add(image);
blueCanvas.Children.Add(image);
image.Source = bitmapImage;
TextBlock_Status.Text = "Status : Image is retrieved from the
clipboard and pasted successfully.";
}
}
}
else
{
TextBlock_Status.Text = "Status : Bitmap format is not available in clipboard";
}
}
Anyone have any suggestions as to how I can recreate the image from the string?
Screenshot from my app showing that I am able to paste an image and decode it into a string
How to create Image from string in Base64 (UWP)
We suggest you convet stream buffer to Base64 from imageStream diteactly, but not from PixelData. you could use CryptographicBuffer class to approach.
using (var imageStream = await imageReceived.OpenReadAsync())
{
var buffer = new Windows.Storage.Streams.Buffer((uint)imageStream.Size);
await imageStream.ReadAsync(buffer, (uint)imageStream.Size, InputStreamOptions.None);
String strBase64New = CryptographicBuffer.EncodeToBase64String(buffer);
}
Retrive from base64 string
public static async Task<BitmapImage> LoadBase64(string base64)
{
byte[] bytes = Convert.FromBase64String(base64);
var bitmap = new BitmapImage();
using (MemoryStream ms = new MemoryStream(bytes))
{
await bitmap.SetSourceAsync(ms.AsRandomAccessStream());
}
return bitmap;
}
Hi all I want to convert pixel buffer to image and print it. This is information that I have in my program:
PixelBuffer: int width, int height, IntPtr buffer, stride. This is how I cannot do it because of some assembly errors:
Windows.UI.Xaml.Controls.Image image = new Windows.UI.Xaml.Controls.Image();
System.Windows.Media.Imaging.BitmapFrame frame = System.Windows.Media.Imaging.BitmapFrame.Create(System.Windows.Media.Imaging.BitmapSource.Create(
(int)pr.pixelBuffer.width,
(int)pr.pixelBuffer.height,
96,
96,
System.Windows.Media.PixelFormats.Rgb24,
null,
pr.pixelBuffer.buffer,
(int)(pr.pixelBuffer.stride * pr.pixelBuffer.height),
(int)pr.pixelBuffer.stride));
Windows.UI.Xaml.Media.Imaging.BitmapImage bitmapImage = new Windows.UI.Xaml.Media.Imaging.BitmapImage(frame.BaseUri);
image.Source = bitmapImage;//frame;
stackPanel.Children.Add(image)
Is there any way to do this without System.Windowxs.Media.Imaging? Using only Windows.UI.Xaml ?
Thanks!
I want to convert pixel buffer to image and print it.
I'm not sure what your pixel buffer come from since your code only shows getting from pr obejct. In uwp app
if you got it from WriteableBitmap instance, you may not need to get pixel buffer firstly, just set the WriteableBitmap as the source of image. Both BitmapImage and WriteableBitmap can be the image source, not only BitmapImage.
StorageFile imagefile = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/caffe1.jpg"));
WriteableBitmap writeableimage;
using (IRandomAccessStream stream = await imagefile.OpenAsync(FileAccessMode.Read))
{
SoftwareBitmap softwareBitmap;
BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);
softwareBitmap = await decoder.GetSoftwareBitmapAsync();
writeableimage = new WriteableBitmap(softwareBitmap.PixelWidth, softwareBitmap.PixelHeight);
writeableimage.SetSource(stream);
}
Windows.UI.Xaml.Controls.Image image = new Windows.UI.Xaml.Controls.Image();
image.Source = writeableimage;
stackPanel.Children.Add(image);
If it doesn't from WriteableBitmap, you may need to create a WriteableBitmap with the known width, height, and write pixel data to it.
StorageFile imagefile = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/caffe2.jpg"));
int width;
int height;
byte[] Inptrbuffer;
using (IRandomAccessStream stream = await imagefile.OpenAsync(FileAccessMode.Read))
{
SoftwareBitmap softwareBitmap;
BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);
softwareBitmap = await decoder.GetSoftwareBitmapAsync();
width = softwareBitmap.PixelWidth;
height = softwareBitmap.PixelHeight;
Windows.Graphics.Imaging.PixelDataProvider pixelData = await decoder.GetPixelDataAsync();
Inptrbuffer = pixelData.DetachPixelData();
}
WriteableBitmap newfrompixel=new WriteableBitmap(width,height);
using (Stream stream = newfrompixel.PixelBuffer.AsStream())
{
await stream.WriteAsync(Inptrbuffer, 0, Inptrbuffer.Length);
}
Windows.UI.Xaml.Controls.Image image = new Windows.UI.Xaml.Controls.Image();
image.Source = newfrompixel;
stackPanel.Children.Add(image);
If you need to edit the image before present it, please reference Create, edit, and save bitmap images.
I have an image processing windows 10 application. I am applying filters on that image and showing it on the image element. This is how I am applyting filter and setting it as a source to MainImage element.
ProcessImage processImage = new ProcessImage(sourcePixels, width, height);
byte[] blurEffect = processImage.BlurEffect(width, height);
WriteableBitmap blurImage = new WriteableBitmap((int)width, (int)height);
using (Stream stream = blurImage.PixelBuffer.AsStream())
{
await stream.WriteAsync(blurEffect, 0, blurEffect.Length);
MainImage.Source = blurImage;
}
Up till now I have set the WriteableBitmap image to the source. Now I want to share this image using DataTransferManager's Data requested event as shown
dataTransferManager = DataTransferManager.GetForCurrentView();
dataTransferManager.DataRequested += DataTransferManager_DataRequested;
The body of its event containing this code
DataPackage dataPackage = args.Request.Data;
dataPackage.Properties.Title = "App Name";
dataPackage.Properties.Description = "My description";
dataPackage.SetBitmap();
On the share button click event, i am calling showshareUI like this
DataTransferManager.ShowShareUI();
I am trying to share image using fourth line above that is SetBitmap method, but the problem here is this method want RandomAccessStreamReference value and I have a filtered image of type writeablebitmap. How can I get this thing done?
You can write your WriteableBitmap to an InMemoryRandomAccessStream
I don't have access to my dev machine so I can't test it but here's a quick sample:
private async Task<IRandomAccessStream> Convert(WriteableBitmap writeableBitmap)
{
var stream = new InMemoryRandomAccessStream();
BitmapEncoder encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream);
Stream pixelStream = writeableBitmap.PixelBuffer.AsStream();
byte[] pixels = new byte[pixelStream.Length];
await pixelStream.ReadAsync(pixels, 0, pixels.Length);
encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore, (uint)writeableBitmap.PixelWidth, (uint)writeableBitmap.PixelHeight, 96.0, 96.0, pixels);
await encoder.FlushAsync();
return stream;
}
Since dataPackage.SetBitmap() expects a RandomAccessStreamReference object you will need to obtain one based on the IRandomAccessStream that the above method returns. Fortunately that is pretty easy:
var streamRef = RandomAccessStreamReference.CreateFromStream(stream)
Hope that works.
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.