在Xamarin.Forms中從Web Api加載圖像

Question

我需要從Web api后端將圖片加載到Xamarin.Forms應用程序中。 圖片存儲在Azure Blob存儲中。

這是我的Web Api方法：

[HttpGet("{id}")]
public HttpResponseMessage Get(int id)
{
    // Retrieve storage account from connection string.
    CloudStorageAccount storageAccount = CloudStorageAccount.Parse("ConnectionString");

    // Create the blob client.
    CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

    // Retrieve reference to a previously created container.
    CloudBlobContainer container = blobClient.GetContainerReference("picturecontainer");

    // Retrieve reference to a blob named "photo.jpg".
    CloudBlockBlob blockBlob = container.GetBlockBlobReference("picture");

    var stream = new MemoryStream();

    blockBlob.DownloadToStream(stream);

    Image image = Image.FromStream(stream);
    MemoryStream memoryStream = new MemoryStream();
    image.Save(memoryStream, ImageFormat.Jpeg);

    HttpResponseMessage result = new    HttpResponseMessage(HttpStatusCode.OK);
    result.Content = new ByteArrayContent(memoryStream.ToArray());

    result.Content.Headers.ContentType = new MediaTypeHeaderValue("image/jpeg");

    return result;
}

在我的應用程序中，我嘗試使用以下代碼下載圖像字節：

public App ()
{
    _client = new HttpClient();
    _client.MaxResponseContentBufferSize = 256000;

    Button downloadImageBtn = new Button () {
        Text = "Download Image",
    };
    var image = new Image() {
        Source = ImageSource.FromUri (new Uri ("http://www.engraversnetwork.com/files/placeholder.jpg")),
        Aspect = Aspect.AspectFit
    };
    downloadImageBtn.Clicked += async (object sender, EventArgs e) => {
        var values = await handleClick (sender, e);
        uploadPicButton.Text = values;
        var imageBytes = await downloadPicture();
        image.Source = ImageSource.FromStream(() => new MemoryStream(imageBytes));
    };

    MainPage = new ContentPage {
        Content = new StackLayout {
            VerticalOptions = LayoutOptions.Center,
            Children = {
                image,
                downloadImageBtn
            }
        }
    };
}

private async Task<byte[]> downloadPicture()
{
    var uri = new Uri (string.Format (RestUrl, "5"));
    //return await _client.GetByteArrayAsync (uri);
    var response = await _client.GetAsync (uri);
    if (response.IsSuccessStatusCode) {
        var content = await response.Content.ReadAsByteArrayAsync ();
        return content;
    }
    throw new HttpRequestException ();
}

但是，當我單擊按鈕時，占位符圖像消失了。 從服務器發送圖像或在應用程序中接收圖像時有問題嗎？

Answer 1

我不會實現手動下載圖片。

如果要加載更多圖像和/或允許在加載時顯示占位符，建議使用FFImageLoading庫。 它提供了不錯的功能，例如下載，緩存，顯示占位符和錯誤圖像，最重要的是：將圖像降采樣到目標大小。 這在Android上總是很痛苦。 它可用於本機UI xamarin項目和Xamarin.Froms。

您可以將包含url的字符串直接綁定到源。 該代碼想：

<ffimageloading:CachedImage 
    Source="http://thecatapi.com/?id=MTQ5MzcyNA">
</ffimageloading:CachedImage>

Answer 2

在blockblob.DownloadToStream行之后，嘗試將流的Position設置為0。我不熟悉Azure API，但是我認為這可能會有所幫助。

另外，請嘗試在downloadPicture函數中使用ReadAsStreamAsync而不是ReadAsByteArrayAsync 。 像這樣：

var responseStream = await response.Content.ReadAsStreamAsync();
byte[] buf = new byte[512];
int bufSize;
while((bufSize = (await responseStream.ReadAsync(buf, 0, buf.Length))) > 0)
{
    // store the received bytes to some buffer until the file is fully downloaded
}

您是否以這種方式獲取所有內容？