WP8: Download and save GIF to isolated storage

Question

I want to download a GIF from a URL and save to isolated storage for WP8. I have been trying to use the imagetools library to decode the GIF then convert into a jpeg as silverlight does not support gifs and i want to display the saved image later using the webbrowser control. My code:

        ExtendedImage image = new ExtendedImage();
        image.LoadingFailed += image_LoadingFailed;

        image.LoadingCompleted += (sender, e) =>
        {
            var isoStore = IsolatedStorageFile.GetUserStoreForApplication();


            if (filename.EndsWith(".gif", StringComparison.OrdinalIgnoreCase))
            {
                GifDecoder gifdecoder = new GifDecoder();
                JpegEncoder jpegencoder = new JpegEncoder();

                using (var stream = new IsolatedStorageFileStream("somefolder/" + filename, FileMode.Create, isoStore))
                {
                    gifdecoder.Decode(image, stream);
                    BitmapImage bitmap = new BitmapImage();
                    using (MemoryStream stream2 = new MemoryStream())
                    {
                        jpegencoder.Encode(image, stream2);
                        bitmap.SetSource(stream2);
                    }
                }  
            }

image.UriSource = new Uri(imageurl, UriKind.Absolute);

Ertay Shashko Ertay Shashko · Accepted Answer · 2014-07-13T23:41:48

If you convert a gif to jpeg, you will lose the animation. If you are going to use a web browser control to display the image, you do not need ImageTools at all. What you can do is, download the gif from the remote location, save it to isolated storage and then display it on a web browser controller by injecting the image path into HTML.

So, here's sample code to download the image and save it to isolated storage.

    private string savedImagePath = string.Empty;

    private void SomeButton_Click(object sender, RoutedEventArgs e)
    {
        WebClient client = new WebClient();
        client.OpenReadCompleted += async (s, args) =>
        {
            using (IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForApplication())
            {
                using (
                    IsolatedStorageFileStream fileStream = new IsolatedStorageFileStream("savedGifName.gif",
                        FileMode.Create, storage))
                {
                    await args.Result.CopyToAsync(fileStream);
                    savedImagePath = fileStream.Name;
                }
            }


        };
        client.OpenReadAsync(new Uri("http://www.example.com/someGIF.gif", UriKind.Absolute));
    }

Now, you have the path to the image in isolated storage in savedImagePath. In order to display that image on a web browser control, you can do the following:

    private void ViewImageInWebBrowserControl(string ImageURL)
    {

        string backgroundColor = "<body bgcolor=\"#000000\">"; // enter different hex value for different background color 

        string imageHTML = "<html><head><meta name=\"viewport\" " +
            "content=\"width=440\" id=\"viewport\" />" +
            "</head>" + backgroundColor + "<IMG SRC=\"" +
            ImageURL + "\"height=\"300\" width=\"300\"></body></html>";

        browserControl.NavigateToString(imageHTML); // browserControl is created in XAML which is not shown here
    }

Then call ViewImageInWebBrowserControl(savedImagePath); to build the html and display the gif (now located in isolted storage) in a web browser control.

Hope this helps.

WP8: Download and save GIF to isolated storage

1 Answers