Windows Phone 實用開發技巧（28）：圖片緩衝

在之前的文章中，我講到了一些關於Windows Phone中處理圖片的知識，Windows Phone 中編輯圖片 、Windows Phone 中處理圖片的技巧 、在Windows Phone顯示GIF圖片 、儲存圖片及載入圖片 ，可以看出圖片處理在Windows Phone 開發中佔了比較大的比例，今天我介紹一個簡單的圖片緩衝機制。

David Anson 發表一個LowProfileImageLoader , 用來下載圖片而不影響UI線程（Mango中已經將圖片處理從UI線程中抽離處理了，所以不會有這個影響，大家也可以參考這篇文章）.

LowProfileImageLoader 的思路是將圖片的Uri都放入到一個隊列中，然後依次遍曆這個隊列去請求圖片資源，下載好後通知UI將流返回，每當有新UI插入進來後都會喚醒背景工作執行緒，並且我們可以設定背景工作執行緒一次可以同時對幾個Uri進行處理，預設是5個。

理解了 LowProfileImageLoader 的思路後，我們依據 LowProfileImageLoader 定製一個簡單的圖片緩衝，即如果我們已經下載過這張圖片了，我們就把圖片儲存到本地，等到下次啟動程式的時候，判斷本地是否已經緩衝過該圖片，如果緩衝過該圖片，就從本地讀取圖片返回；如果沒有緩衝過該圖片，則下載完後通知UI，然後將圖片儲存至本地。

線上程工作的主方法WorkerThreadProc中的請求網路之前增加判斷，判斷該圖片是否緩衝

if (pendingRequest.Uri.IsAbsoluteUri){    //load from isolated storage if has been cached    if (IsImageCached(pendingRequest.Uri))    {        if (null!=LoadCachedImage(pendingRequest.Uri))        {            pendingCompletions.Enqueue(new PendingCompletion(pendingRequest.Image, pendingRequest.Uri, LoadCachedImage(pendingRequest.Uri)));        }    }    else    {        // Download from network        var webRequest = HttpWebRequest.CreateHttp(pendingRequest.Uri);        webRequest.AllowReadStreamBuffering = true; // Don't want to block this thread or the UI thread on network access        webRequest.BeginGetResponse(HandleGetResponseResult, new ResponseState(webRequest, pendingRequest.Image, pendingRequest.Uri));    }                        }

如果已經緩衝了，直接推入到完成隊列中，也就是準備向UI回調了。

在回調中增加處理，如果沒有緩衝的，需要將圖片進行緩衝

// Decode the image and set the sourcevar pendingCompletion = pendingCompletions.Dequeue();if (GetUriSource(pendingCompletion.Image) == pendingCompletion.Uri){    //if has been cached,do not cache    if (!IsImageCached(pendingCompletion.Uri))    {        CacheImage(pendingCompletion.Stream, pendingCompletion.Uri);    }    try    {        ImageSource bitmap;        var bitmapImage = new BitmapImage();        bitmapImage.SetSource(pendingCompletion.Stream);        bitmap = bitmapImage;        pendingCompletion.Image.Source = bitmap;    }    catch(Exception ex)    {        // Ignore image decode exceptions (ex: invalid image)    }}

下面的方法是判斷圖片有沒有緩衝的

private static bool IsImageCached(Uri u){    string filePath = Path.Combine(Constants.CACHE_DIR_IMAGES, GetParsePath(u.ToString()));    using (var store=IsolatedStorageFile.GetUserStoreForApplication())    {        if (store.FileExists(filePath))        {            return true;        }    }    return false;}

其中涉及到將圖片的uri解析的問題，因為一般圖片的uri都是http://….jpg之類的，為了避免不必要的麻煩，需要將uri進行相應的轉碼：

private static string GetParsePath(string url){    return url.Replace("://", "").Replace("/","_");}

下面的方法是從緩衝中讀取圖片流的

private static Stream LoadCachedImage(Uri u){    string filePath = Path.Combine(Constants.CACHE_DIR_IMAGES, GetParsePath(u.ToString()));    using (var store = IsolatedStorageFile.GetUserStoreForApplication())    {        if (!store.FileExists(filePath))        {            return null;        }        return store.OpenFile(filePath, FileMode.Open, FileAccess.Read);    }}

以及將圖片緩衝的方法：

private static bool CacheImage(Stream source,Uri u){    string filePath = Path.Combine(Constants.CACHE_DIR_IMAGES, GetParsePath(u.ToString()));    using (var store = IsolatedStorageFile.GetUserStoreForApplication())    {        try        {            if (!store.DirectoryExists(Constants.CACHE_DIR_IMAGES))            {                store.CreateDirectory(Constants.CACHE_DIR_IMAGES);            }            using (var stream = store.OpenFile(filePath, FileMode.OpenOrCreate, FileAccess.Write))            {                byte[] bytes = new byte[source.Length];                source.Read(bytes, 0, (int)source.Length);                stream.Write(bytes, 0, (int)source.Length);            }            return true;        }        catch (Exception)        {            return false;            throw;        }    }}

調用方法是這樣的

<Image delay:LowProfileImageLoader.UriSource="{Binding logo}" Grid.Column="0" Height="100" Width="100" />

在XAML中的Image中添加如上的代碼即可，這樣只要圖片一被下載，就會被緩衝到本地，以便下次使用。

當然你可以加上一個相依性屬性，判斷當前是否啟動緩衝。另外一個需要考慮的是，何時刪除圖片緩衝，那由你的app決定！

修改後的LowProfileImageLoader可以在這裡找到。Hope that helps.