Blazor Wasm加载本地位图并解码为SKBitmap的问题求助

核心问题分析 #

之前代码失效的主要原因是Http请求返回的流位置默认处于末尾，导致SkiaSharp无法读取有效数据；同时WASM运行在浏览器沙箱中，无法像Xamarin那样直接通过文件路径解码图片。

修正后的实现代码 #

public async Task LoadBkImagesAsync()
{
    var dirName = "Images/BkImages/";
    var skyIDs = new string[] { 
        "Blue3.jpg", "BlueSky2.jpg", "BlueSky2.jpg", "BlueWave.png", 
        "Green12.jpg", "GreenRain.jpg", "GreenYellow2.jpg", "Hsky1.jpg", "nSky.jpg"
    };
    BkImages = new SKBitmap[skyIDs.Length];

    for (int n = 0; n < skyIDs.Length; n++)
    {
        var bkName = $"{dirName}{skyIDs[n]}";
        
        // 将Http流转换为可重置位置的MemoryStream
        using var stream = await Http.GetStreamAsync(bkName);
        using var memoryStream = new MemoryStream();
        await stream.CopyToAsync(memoryStream);
        memoryStream.Position = 0; // 重置流到起始位置

        // 解码为SKBitmap
        BkImages[n] = SKBitmap.Decode(memoryStream);
    }
}

额外注意事项 #

• 确保图片文件已放置在wwwroot/Images/BkImages/目录下，且文件属性设置为复制到输出目录（如果较新则复制）
• 项目需安装匹配版本的SkiaSharp包：SkiaSharp和SkiaSharp.Views.Blazor（如2.88.6版本）
• 处理大图片时，可通过SKCodec调整尺寸降低内存占用：

using var codec = SKCodec.Create(memoryStream);
var info = codec.Info;
// 示例：将图片缩小为原尺寸的一半
info = info.WithSize(info.Width / 2, info.Height / 2);
BkImages[n] = SKBitmap.Decode(codec, info);

内容的提问来源于stack exchange，提问作者王興業