I am developing a WP 8.1 app, which contains a ListView. In each ListView items there are some text and a picture. The pictures come from a Http GET request, which I have to bind to the xaml. I have got a solution for it earlier, but I have some performance problem with it. The ListView can contain same picture multiple times, so the GetImage task is called multiple times for the the same picture as well. On a WiFi connection it is not a big problem, but with poor connection it is.
The other thing what I would like to implement is the image caching. I don't know where is the best place to store pictures while the app is running. I should store approximately 10-40 pieces pictures, and the image sizes are between 3 and 20 KB. Due to these images are not necessary after closing the application, I think I can store them in the memory, not in the storage folder.
So, what I want: download every images at once and store them while the app is running.
Here is the code what I use to download images:
public class WebPathToImageConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (value == null) return null;
return new TaskCompletionNotifier<BitmapImage>(GetImage((string)value));
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{ throw new NotImplementedException(); }
private async Task<BitmapImage> GetImage(string emailaddress)
{
ApplicationDataContainer localSettings = ApplicationData.Current.LocalSettings;
Uri uri = new Uri((string)localSettings.Values["Server"] + "Image/Downloadavatar?EmailAddress=" + emailaddress + "&Size=NORMAL");
HttpClient webCLient = new HttpClient();
IInputStream responseStream = await webCLient.GetInputStreamAsync(uri);
MemoryStream memoryStream = new MemoryStream();
Stream stream = responseStream.AsStreamForRead();
await stream.CopyToAsync(memoryStream);
memoryStream.Position = 0;
BitmapImage bitmap = new BitmapImage();
await bitmap.SetSourceAsync(memoryStream.AsRandomAccessStream());
return bitmap;
}
}
Well I asked a similar question on regards of how to work with caching data downloading and performing them in parallel.
Take a look at the answer here: Task caching when performing Tasks in parallel with WhenAll
So in short your GetImage should go in a list that holds the tasks instead of the result.
Related
I'm trying to upload an image from xamarin.forms and using restsharp for api service.
RestRequest uploadPostRestRequest = new RestRequest("post/create/", Method.POST);
uploadPostRestRequest.AddJsonBody(uploadPostRequest);
and this is my model UploadPostRequest
public class UploadPostRequest
{
public string content;
public byte[] image;
}
Question - Is it right to set image type as byte[]?
Would server accept this or would restsharp manage it?
If RestSharp has a nice control with this, can I just put MediaFile from Xam.Plugin.Media so I can upload it right over?
Xam.Plugin.Media is used for picking images from mobile device.
Too many options, so, that's why I'm looking for good advice.
Has anyone experienced this same issue before? please help.
For additional info, I cant use System.IO.File, Xamarin.Forms wont let me use it.
When the Xam.Plugin.Media finish loading the media either from the Camera or from the Library it returns a MediaFile. This object can be converter to a byte array with something like this:
byte[] byteArray;
using (var memoryStream = new MemoryStream ())
{
mediaFile.GetStream ().CopyTo (memoryStream);
mediaFile.Dispose ();
byteArray = memoryStream.ToArray ();
}
Now you have the byte array you just need to pass it to the method that will upload the image to your backend.
This is quite vexing.
I am working on an app for image management. Part of the value is the ability to store images in sub-folders based on image properties, eg. creation date.
If I store the image source in a shallow folder (app\images\img.jpg), everything works fine.
If I store the image in KnownFolders.Pictures\source\year\month\day\img.jpg, Image does not render. (Yes, that specific path won't work, I am trying to give you a sense of how the path is constructed)...
The file is actually there. The path is correct (I can open it in a browser, e.g.). The app has access to the file.
But it does not render the bitmap.
I tried to render the bitmap manually using
new BitmapImage(new Uri("KnownFolders.Pictures\source\year\month\day\img.jpg"),UriKind.Absolute))
That does not render anything. (Again, assume the path is valid and has a file at its bottom).
What Am I Missing?
The head scratcher: for GIF anims, I am using Thomas Levesque's useful component: https://github.com/XamlAnimatedGif. That one, unfortunately, does only render gifs... and it does so even when the path is the one given above. So the Standard IMAGE control does not render correctly, but Thomas's control does... infuriating.
An UWP app can't load a BitmapImage from an absolute URL to a file in a folder structure below the Pictures Library Folder.
So this won't work:
var relativePath = #"source\year\month\day\img.jpg";
var imageFile = await KnownFolders.PicturesLibrary.GetFileAsync(relativePath);
var bitmapImage = new BitmapImage(new Uri(imageFile.Path));
However, you could do this:
var relativePath= #"source\year\month\day\img.jpg";
var imageFile = await KnownFolders.PicturesLibrary.GetFileAsync(relativePath);
var bitmapImage = new BitmapImage();
using (var stream = await imageFile.OpenAsync(FileAccessMode.Read))
{
await bitmapImage.SetSourceAsync(stream);
}
So, after way too much time spent on this...
First, link to DataContextChanged of the IMAGE element. In there, parse the DataContext out. If you are using the IMAGE outside of an ItemsControl etc, this is not required...
private async void ImageView_DataContextChanged(FrameworkElement sender, DataContextChangedEventArgs args)
{
if (sender is Image)
{
Image img = (Image)sender;
if (img.DataContext is ImageView)
{
MyViewDataContext dc = (MyViewDataContext)img.DataContext;
img.Source = await dc.bitmap();
}
}
}
And here the implementation of MyViewDataContext.bitmap() which has a property called source that yields, you guessed it, absolute paths:
public async Task<BitmapImage> MyViewDataContext.bitmap()
{
if (_bitmap == null)
{
try
{
StorageFile file = await StorageFile.GetFileFromPathAsync(source);
bool r = Windows.Storage.AccessCache.StorageApplicationPermissions.FutureAccessList.CheckAccess(file);
if (r)
{
using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
// create a new bitmap, coz the old one must be done for...
_bitmap = new BitmapImage();
// And get that bitmap sucked in from stream.
await _bitmap.SetSourceAsync(fileStream);
}
}
}
catch (Exception e)
{
_bitmap = null;
}
}
return _bitmap;
}
BitmapImage _bitmap;
I cache the resulting bitmap until I dispose of this MyViewDataContext.
I am now most concerned about memory. This one worries me:
How to dispose BitmapImage cache?
So, as a tech debt, I am going to address the potential mem leaks later, once this whole thing is on the test bench and I can take a look at its runtime behavior...
To access the folders and libraries represented by the properties of this class, specify the corresponding capabilities in your app manifest. For example, to access KnownFolders.PicturesLibrary, specify the Pictures Library capability in the app manifest.
Hope this will help
KnowFolders
I am getting a list of objects in Windows Phone, and show them in a listbox with databinding.
some image urls are not valid, so after every object is added in the list, i run the following code to check and replace, if not valid
private void CheckLinkUrl(Person p)
{
Uri filePath = new Uri(p.img_url);
string correct = p.img_url;
HttpWebRequest fileRequest = HttpWebRequest.CreateHttp(filePath);
fileRequest.Method = "HEAD";
fileRequest.BeginGetResponse(result =>
{
HttpWebRequest resultInfo = (HttpWebRequest)result.AsyncState;
HttpWebResponse response;
try
{
response = (HttpWebResponse)resultInfo.EndGetResponse(result);
}
catch (Exception e)
{
p.img_url = "http://somethingelse.com/image.jpg";
}
}, fileRequest);
}
the problem is that it is very slow, it takes sometimes 2 minutes+ to load every image (although the UI remains responsive, and everything else is displayed immediately in the listbox, apart from the images)
am I doing something wrong? can i get it to run faster?
EDIT:
I tried using the imagefailed event and replace the link, no improvement at the speed of loading the pics
What I have done to avoid this problem in my application is, I have loaded the items with a default Image, The image source is binded to a property in my result item of type ImageSource. By default it returns the default image. After processing or download completion the imagesource value changes to the new Image triggering the NotifyPropertyChanged event and hence it is automatically reflected on the UI. I hope it helps you.
In windows phone 7 I'm doing a simple async lookup to find an image by uri and set the returned binary as the source for an image control.
public object SetImageFromUri(string uri)
{
var wc = new WebClient();
wc.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);
wc.OpenReadAsync(new Uri(uri), wc);
return null;
}
void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
if (e.Error == null && !e.Cancelled)
{
var image = new BitmapImage();
image.SetSource(e.Result);
//e.Result has a property in the memory stream labeled finalUri
//someImageControl.Source = image;
}
}
My question is- how can I pull out the final uri property from the e.Result so I can see what image control it's associated with
Thank you in advance
Instead of passing the WebClient through as the second parameter, pass the Uri (or some other piece of usefule state information)
wc.OpenReadAsync(new Uri(uri), uri);
You can then access this in your callback
var uri = (string)e.UserState;
Due to specific restrictions implemented in the Reflection mechanism, you cannot access internal content from sandboxed code. Ultimately, you would want to use something like this:
FieldInfo f = e.Result.GetType().GetField("_finalUri", BindingFlags.NonPublic | BindingFlags.DeclaredOnly | BindingFlags.Instance);
Uri n = (Uri)f.GetValue(e.Result);
However, this will cause a FieldAccessException. If you are not using a redirect URI, then you can simply reuse the parameter that is initially passed to your method. If not, you need to check HttpWebRequest and follow the idea I outlined a couple of days ago.
You could also just bind directly to the Image, and use the LowProfileImageLoader, to avoid it blocking the UI thread during the load. (Remember to set a FallBack image)
My script fetches xml via httpConnection and saves to persistent store. No problems there.
Then I loop through the saved data to compose a list of image url's to fetch via queue.
Each of these requests calls the httpConnection thread as so
...
public synchronized void run()
{
HttpConnection connection = (HttpConnection)Connector.open("http://www.somedomain.com/image1.jpg");
connection.setRequestMethod("GET");
String contentType = connection.getHeaderField("Content-type");
InputStream responseData = connection.openInputStream();
connection.close();
outputFinal(responseData, contentType);
}
public synchronized void outputFinal(InputStream result, String contentType) throws SAXException, ParserConfigurationException, IOException
{
if(contentType.startsWith("text/"))
{
// bunch of xml save code that works fine
}
else if(contentType.equals("image/png") || contentType.equals("image/jpeg") || contentType.equals("image/gif"))
{
// how to save images here?
}
else
{
//default
}
}
What I can't find any good documentation on is how one would take the response data and save it to an image stored on the device.
Maybe I just overlooked something very obvious. Any help is very appreciated.
Thanks
I tried following this advise and found the same thing I always find when looking up BB specific issues: nothing.
The problem is that every example or post assumes you know everything about the platform.
Here's a simple question: What line of code writes the read output stream to the blackberry device? What path? How do I retrieve it later?
I have this code, which I do not know if it does anything because I don't know where it is supposedly writing to or if that's even what it is doing at all:
** filename is determined on a loop based on the url called.
FileOutputStream fos = null;
try
{
fos = new FileOutputStream( File.FILESYSTEM_PATRIOT, filename );
byte [] buffer = new byte [262144];
int byteRead;
while ((byteRead = result.read (buffer ))!=- 1)
{
fos.write (buffer, 0, byteRead);
}
fos.flush();
fos.close();
}
catch(IOException ieo)
{
}
finally
{
if(fos != null)
{
fos.close();
}
}
The idea is that I have some 600 images pulled from a server. I need to loop the xml and save each image to the device so that when an entity is called, I can pull the associated image - entity_id.png - from the internal storage.
The documentation from RIM does not specify this, nor does it make it easy to begin figuring it out.
This issue does not seem to be addressed on this forum, or others I have searched.
Thanks
You'll need to use the Java FileOutputStream to do the writing. You'll also want to close the connection after reading the data from the InputStream (move outputFinal above your call to close). You can find all kinds of examples regarding FileOutputStream easily.
See here for more. Note that in order to use the FileOutputStream your application must be signed.