I am trying to display an image from a StorageFile after selecting it from a FilePicker. Since the Source of an Image has to be either a URI or an ImageSource, I am trying to get either of those from the StorageFile.
I am having a hard time getting data binding to work on an Image in XAML. I have tried the following:
<Image Width="300"
Height="300"
x:Name="LogoImage">
<Image.Source>
<BitmapImage UriSource="{Binding ImagePath}" />
</Image.Source>
</Image>
This way doesn't work, as the Path property of a StorageFile is not a URI. Also, I can't bind directly to the StorageFile itself, as it is not an ImageSource.
I tried to use this method:
public async Task<Image> GetImageAsync(StorageFile storageFile)
{
BitmapImage bitmapImage = new BitmapImage();
FileRandomAccessStream stream = (FileRandomAccessStream)await storageFile.OpenAsync(FileAccessMode.Read);
bitmapImage.SetSource(stream);
Image image = new Image();
image.Source = bitmapImage;
return image;
}
But, it returns a Task<Image>, which is also not an ImageSource or URI. It seems like it should be something more straightforward than what I am trying to do, but I am just not seeing it. Also, I have tried just specifying a file in the XAML for the Image.Source and it works fine. I just haven't been able to link it up based on the selected file from the FilePicker.
My ultimate goal is: select a file from FilePicker, update the ImageSource of the displayed Image, encode to base64 for storage in database. Then later, load existing base64 string from database, convert back to Image to be displayed.
Edit:
I was able to accomplish this task using the solution I posted below. Thanks in great part to Jerry Nixon's blog post: http://blog.jerrynixon.com/2014/11/reading-and-writing-base64-in-windows.html
The best solution would be to set the source in code behind instead of using a binding as it would let you handle things like cancellation in case the ImagePath gets updated while the previous image is still loading.
Alternatively, you could create a bitmap, start a task of loading it and return before that task is complete, e.g.
public Image GetImage(StorageFile storageFile)
{
var bitmapImage = new BitmapImage();
GetImageAsync(bitmapImage, storageFile);
// Create an image or return a bitmap that's started loading
var image = new Image();
image.Source = bitmapImage;
return image ;
}
private async Task GetImageAsync(BitmapImage bitmapImage, StorageFile storageFile)
{
using (var stream = (FileRandomAccessStream)await storageFile.OpenAsync(FileAccessMode.Read))
{
await bitmapImage.SetSource(stream);
}
}
If anyone else comes across this question looking for an answer, what I ultimately ended up doing for my situation, is take the StorageFile that is selected from the FilePicker, encode that as a base64 string (which I will save to my database for later retrieval).
Once I have the base64 string, I can decode that string into an ImageSource to set in code-behind. Here is my full ButtonClick event handler:
private async void ChooseImage_Click(object sender, RoutedEventArgs e)
{
var filePicker = new FileOpenPicker();
filePicker.FileTypeFilter.Add(".jpg");
filePicker.ViewMode = PickerViewMode.Thumbnail;
filePicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
filePicker.SettingsIdentifier = "picker1";
filePicker.CommitButtonText = "Open File to Process";
var files = await filePicker.PickMultipleFilesAsync();
if (files.Count > 0)
{
// encode the storage file to base64
var base64 = await Encoding.ToBase64(files[0]);
// asynchronously save base64 string to database
// ...
// decode the base64 and set the image source
LogoImage.Source = await Encoding.FromBase64(base64);
}
}
The base64 encoding/decoding I found at the great Jerry Nixon's blog here: http://blog.jerrynixon.com/2014/11/reading-and-writing-base64-in-windows.html
Related
Now I am working on edit operation in my app. So in edit operation there is an ability to change image and in the same time name of the file that keep image of the contact can not be renamed(during one session of operation image files will be changing but all this file will take same name).
And I used overload of CopyAsync method (docs to this method here) that as I have understand must to replace file to the existing file with the same name.
I get imageFile variable by FileOpenPicker. Code below runs every time I have choosed image by FileOpenPicker. And when I re-choose image at the result Image UI control show me previous chosen image. I expect that Image will view last image that I have choosed but this does not occurred.
public BitmapImage Image { set; get; }
//Copy of the file that saved in temporary storage
StorageFile fileForView = await imageFile.CopyAsync
(ApplicationData.Current.TemporaryFolder,
fileName,
NameCollisionOption.ReplaceExisting);
Image = new BitmapImage(new Uri(fileForView.Path));
Maybe I understand logic of CopyAsync method not correctly if I am in this case please show me how make my plan working with this method if it is possible. Otherwise offer your solution cause I have no idea now how to do this.
Also I tried to do this with CopyAndReplaceAsync method. But still no result. I do it in this way:
if (null != await ApplicationData.Current.TemporaryFolder.TryGetItemAsync(fileName))
{
StorageFile storageFile = await ApplicationData.Current.TemporaryFolder.GetFileAsync(fileName);
await storageFile.CopyAndReplaceAsync(imageFile);
}
I expect that Image will view last image that I have choosed but this does not occurred.
The above CopyAsync method is correct, and I have tested with the following code, it works well.
private async void ListOption_ItemClick(object sender, ItemClickEventArgs e)
{
FileOpenPicker openPicker = new FileOpenPicker();
openPicker.ViewMode = PickerViewMode.Thumbnail;
openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
openPicker.FileTypeFilter.Add(".jpg");
openPicker.FileTypeFilter.Add(".jpeg");
openPicker.FileTypeFilter.Add(".png");
StorageFile file = await openPicker.PickSingleFileAsync();
if (file != null)
{
StorageFile fileForView = await file.CopyAsync(ApplicationData.Current.TemporaryFolder, file.Name, NameCollisionOption.ReplaceExisting);
Image = new BitmapImage(new Uri(fileForView.Path));
TestImg.Source = Image;
}
else
{
}
}
I am working on a UWP app that supports both Windows 8.1 and 10. There I have a WebView to which I set some html generated in the code using NavigateToString. There I need to show some images which are in the Appdata folder e.g. AppData\Local\Packages\1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg\LocalState\c9dfd4d5-d8a9-41c6-bd08-e7f4ae70e423\4f31f54f-1b5b-4812-9463-ba23ea7988a0\Images
I have tried using ms-appdata:///local/ , file:/// , forward slashes, back slashes everything in the img src. But none of them are loading the images.
Since the above path is too long, I have a sample image at AppData\Local\Packages\1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg\LocalState\1.png and trying to access it in different ways and none of them are showing that image in the web view. But I can access that from a browser.
And if I give a http url for the img src in the below code it works.
Please let me know how I can show images in the LocalState folder in a WebView.
e.g 1.
string figures = "<figure><img src=\"ms-appdata:///local/1.png\" alt =\"aaa\" height=\"400\" width=\"400\"/><figcaption>Figure : thumb_IMG_0057_1024</figcaption></figure>";
procedureWebView.NavigateToString(figures);
e.g. 2
string figures = "<figure><img src='file:///C://Users//xxx//AppData//Local//Packages//1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg//LocalState//1.png' alt=\"thumb_IMG_0057_1024\" height=\"100\" width=\"100\"/><figcaption>Figure : thumb_IMG_0057_1024</figcaption></figure>";
Since the above path is too long, I have a sample image at AppData\Local\Packages\1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg\LocalState\1.png and trying to access it in different ways and none of them are showing that image in the web view.
WebView holds a web context,which won't have access to WinRT API or using WinRT Scheme.
But you can convert the Image to Base64 DataUri and pass it to your webview. For details about converting a picture to Base64 DataUri you can refer to Reading and Writing Base64 in the Windows Runtime.
After reading the Blog, I made a basic demo and successfully pass the image to webview.
MainPage.xaml.cs:
private async Task<String> ToBase64(byte[] image, uint height, uint width, double dpiX = 96, double dpiY= 96)
{
var encoded = new InMemoryRandomAccessStream();
var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, encoded);
encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Straight, height, width, dpiX, dpiY, image);
await encoder.FlushAsync();
encoded.Seek(0);
var bytes = new byte[encoded.Size];
await encoded.AsStream().ReadAsync(bytes, 0, bytes.Length);
return Convert.ToBase64String(bytes);
}
private async Task<String> ToBase64(WriteableBitmap bitmap)
{
var bytes = bitmap.PixelBuffer.ToArray();
return await ToBase64(bytes, (uint)bitmap.PixelWidth, (uint)bitmap.PixelHeight);
}
private async void myBtn_Click(object sender, RoutedEventArgs e)
{
StorageFile myImage = await GetFileAsync();
ImageProperties properties = await myImage.Properties.GetImagePropertiesAsync();
WriteableBitmap bmp = new WriteableBitmap((int)properties.Width, (int)properties.Height);
bmp.SetSource(await myImage.OpenReadAsync());
String dataStr=await ToBase64(bmp);
String fileType = myImage.FileType.Substring(1);
String str = "<figure><img src=\"data:image/"+myImage.FileType+";base64,"+dataStr+"\" alt =\"aaa\" height=\"400\" width=\"400\"/><figcaption>Figure : thumb_IMG_0057_1024</figcaption></figure>";
myWebView.NavigateToString(str);
}
private async Task<StorageFile> GetFileAsync()
{
StorageFile myImage = await ApplicationData.Current.LocalFolder.GetFileAsync("myImage.jpg");
return myImage;
}
MainPage.xaml:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel VerticalAlignment="Center">
<WebView Name="myWebView" Width="500" Height="500" ></WebView>
<Button Name="myBtn" Click="myBtn_Click">Click Me to Load WebView</Button>
</StackPanel>
</Grid>
And here is the output:
I have a WinRT app that takes pictures and displays them in an Image. The first picture correctly takes and displays the Image. However, subsequent pictures, which are set to overwrite the original picture, throw an UnauthorizedAccessException with ACCESSDENIED. I'm also binding the Image source to the Uri of the student. I'm also positive the binding is what is causing the issue in that WinRT doesn't like me replacing a file that is currently in use. I've tried setting the source to null before the file replace, etc, but that is not working. What is an elegant way to handle this? Also note that I bind this file on the page before this one also and I needed to remove the binding on that page also in order to avoid the error.
private async void btnTakePic_Click(object sender, RoutedEventArgs e)
{
await CameraCapture();
}
private async Task CameraCapture()
{
CameraCaptureUI camUI = new CameraCaptureUI();
camUI.PhotoSettings.AllowCropping = true;
camUI.PhotoSettings.MaxResolution = CameraCaptureUIMaxPhotoResolution.MediumXga;
camUI.PhotoSettings.CroppedAspectRatio = new Size(4, 3);
Windows.Storage.StorageFile imageFile = await camUI.CaptureFileAsync(CameraCaptureUIMode.Photo);
if (imageFile != null)
{
IRandomAccessStream stream = await imageFile.OpenAsync(FileAccessMode.Read);
BitmapImage bitmapCamera = new BitmapImage();
bitmapCamera.SetSource(stream);
// Use unique id for image name since name could change
string filename = student.StudentID + "Photo.jpg";
await imageFile.MoveAsync(ApplicationData.Current.LocalFolder, filename, NameCollisionOption.ReplaceExisting);
student.UriPhoto = new Uri(string.Format("ms-appdata:///local/{0}", filename), UriKind.Absolute);
}
}
Here is the binding portion just for fun:
<Image x:Name="imgStudent" Grid.Row="0" Width="400" Height="300" Margin="15" Grid.ColumnSpan="2">
<Image.Source>
<BitmapImage DecodePixelWidth="200" UriSource="{Binding UriPhoto}" />
</Image.Source>
</Image>
Ok, well after several hours of research, I've concluded that it is near impossible to bind to a Uri, and the alternative is to bind a BitmapImage. I couldn't find the exact reason, but it has something to do with the fact that using a Uri leaves the BitmapImage open and binding quickly breaks this paradigm. The solution is to bind the BitmapImage and set the BitmapImage to a stream, which seems to support binding quite well.
I liked the idea of the Uri since its easily seriliazable, while the BitmapImage is more difficult and takes up significantly more space (since you are serializing the picture data as opposed to a link). The solution that I decided on and that works is to serialize the Uri, and use the OnDeserialized attribute to create the BitmapImage on startup. I then needed a method/event to reset the BitmapImage whenever the Uri changed.
Here's the final code to recap:
private async Task CameraCapture()
{
CameraCaptureUI camUI = new CameraCaptureUI();
camUI.PhotoSettings.AllowCropping = true;
camUI.PhotoSettings.MaxResolution = CameraCaptureUIMaxPhotoResolution.MediumXga;
camUI.PhotoSettings.CroppedAspectRatio = new Size(4, 3);
Windows.Storage.StorageFile imageFile = await camUI.CaptureFileAsync(CameraCaptureUIMode.Photo);
if (imageFile != null)
{
// Use unique id for image name since name could change
string filename = student.StudentID + "Photo.jpg";
// Move photo to Local Storate and overwrite existing file
await imageFile.MoveAsync(ApplicationData.Current.LocalFolder, filename, NameCollisionOption.ReplaceExisting);
// Open file stream of photo
IRandomAccessStream stream = await imageFile.OpenAsync(FileAccessMode.Read);
BitmapImage bitmapCamera = new BitmapImage();
bitmapCamera.SetSource(stream);
student.BitmapPhoto = bitmapCamera // BitmapImage
// Save Uri to photo since we can serialize this and re-create BitmapPhoto on startup/deserialization
student.UriPhoto = new Uri(string.Format("ms-appdata:///local/{0}", filename), UriKind.Absolute);
}
}
And the new XAML binding to the student BitmapImage
<Image x:Name="imgStudent" Source="{Binding BitmapPhoto}" Grid.Row="0" Width="400" Height="300" Margin="15" Grid.ColumnSpan="2"/>
I am working on a Windows 8 app. I need to know how to programmatically set the Source of an Image. I assumed that the Silverlight approach would work. However, it doesn't. Does anybody know how to do this? The following will not work:
string pictureUrl = GetImageUrl();
Image image = new Image();
image.Source = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri(pictureUrl, UriKind.Relative));
image.Stretch = Stretch.None;
image.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Left;
image.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Center;
I get an Exception that says: "The given System.Uri cannot be converted into a Windows.Foundation.Uri."
However, I can't seem to find the Windows.Foundation.Uri type.
I just tried
Image.Source = new BitmapImage(
new Uri("http://yourdomain.com/image.jpg", UriKind.Absolute));
And it works without problems... I'm using System.Uri here. Maybe you have a malformed URI or you have to use an absolute URI and use UriKind.Absolute instead?
This is what I use:
string url = "ms-appx:///Assets/placeHolder.png";
image.Source = RandomAccessStreamReference.CreateFromUri(new Uri(url));
Well, Windows.Foundation.Uri is documented like this:
.NET: This type appears as System.Uri.
So the tricky bit isn't converting it into a Windows.Foundation.Uri yourself - it looks like WinRT does that for you. It looks like the problem is with the URI you're using. What is it relative to in this case? I suspect you really just need to find the right format for the URI.
This example uses a FileOpenPicker object to obtain the storage file.
You can use whatever method you need to access your file as a StorageFile object.
Logo is the name of the image control.
Reference the following code:
var fileOpenPicker = new FileOpenPicker();
fileOpenPicker.ViewMode = PickerViewMode.Thumbnail;
fileOpenPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
fileOpenPicker.FileTypeFilter.Add(".png");
fileOpenPicker.FileTypeFilter.Add(".jpg");
fileOpenPicker.FileTypeFilter.Add(".jpeg");
fileOpenPicker.FileTypeFilter.Add(".bmp");
var storageFile = await fileOpenPicker.PickSingleFileAsync();
if (storageFile != null)
{
// Ensure the stream is disposed once the image is loaded
using (IRandomAccessStream fileStream = await storageFile.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
// Set the image source to the selected bitmap
BitmapImage bitmapImage = new BitmapImage();
await bitmapImage.SetSourceAsync(fileStream);
Logo.Source = bitmapImage;
}
}
check your pictureUrl since it was what resulted in the exception.
but this should work as well
img.Source = new BitmapImage(new Uri(pictureUrl, UriKind.Absolute));
it should have nothing to do with Windows.Foundation.Uri. since winrt will handle it for you.
Try this format:
ms-appx:/Images/800x600/BackgroundTile.bmp
The given System.Uri cannot be converted into a Windows.Foundation.Uri
<Image Name="Img" Stretch="UniformToFill" />
var file = await KnownFolders.PicturesLibrary.GetFileAsync("2.jpg");
using(var fileStream = (await file.OpenAsync(Windows.Storage.FileAccessMode.Read))){
var bitImg= new BitmapImage();
bitImg.SetSource(fileStream);
Img.Source = bitImg;
}
I get image URL at runtime from the xml file reader. This image URL is pass to the below method to download it dynamically.
public void Display_Image(string MyURL)
{
BitmapImage bi = new BitmapImage();
bi.UriSource = new Uri(this.BaseUri, MyURL);
Img_Poster.Source = bi;
}
But this doesn't work. I don't get any image source. The above code works fine with static URL provided at compile time. What do I need to do more?
The method I suggested below is obsolete. However, creating a new Bitmap image created dynamically with a Uri determined at runtime IS supported and working on the RTM build of Windows 8. Display_Image(url) should work as you expect.
You can get the image stream using the CreateFromUri helper: http://msdn.microsoft.com/en-us/library/windows/apps/windows.storage.streams.streamreference.createfromuri.aspx#Y0
var stream = RandomAccessStreamReference.CreateFromUri(new Uri(imageUrl))
You should then be able to set the source of your bitmap to the RandomAccessStream that the helper returns
I've had similar problems with previously-working Bitmap code not working on Windows RT, an early attempt convinces me that it refuses to download anything unless it is going to be displayed on the UI (here, I needed to insert a 1ms delay before assigning sources just to get it to trigger the image download):
var image = .... // reference to animage on the UI
var placeholder = ... // a placeholder BitmapImage
var source = ... // uri to download
image.Source = placeholder;
var src = new BitmapImage(new Uri(source));
src.ImageOpened += (s, e) =>
{
var bi = s as BitmapImage;
image.Source = bi;
};
image.Source = src;
// Delay required to trigger download
await Task.Delay(1);
image.Source = placeholder;
Here's another solution I've tried with success:
var image = .... // reference to animage on the UI
var source = ... // uri to download
var placeholder = ... // a placeholder BitmapImage
image.Source = placeholder;
var bytes = await new HttpClient().GetByteArrayAsync(source);
var img = new BitmapImage();
await img.SetSourceAsync(bytes.AsBuffer().AsStream().AsRandomAccessStream());
image.Source = img;