前言
好久没写文章了，水一篇
关于MAUI Blazor 显示本地图片这个问题，有大佬发过了。
就是 token 大佬的那篇
Blazor Hybrid （Blazor混合开发）更好的读取本地图片
主要思路就是读取本地图片，通过C#与JS互操作，将byte[]传给js，生成blob，图片的src中填写根据blob生成的url。
我之前一直使用这个办法，简单的优化了一下，无非也就是增加缓存。
但是这种方法的弊端也是很明显的：
-
img的src每一次并不固定，需要替换
-
Android端加载体积比较大的图片的速度，特别特别慢
所以有没有一种办法能够解决这两个问题
思考了很久，终于有了思路，
拦截网络请求/响应，读取本地文件并返回响应
搜索了一下，C#/MAUI中没有太好的拦截办法，只能从Webview下手
理论已有，实践开始
准备工作
新建一个MAUI Blazor项目
参考 配置基于文件名的多目标 ，更改项目文件（以.csproj结尾的文件），添加以下代码
<!-- Android -->
<ItemGroup Condition="$(TargetFramework.StartsWith('net7.0-android')) != true">
<Compile Remove="**\**\*.Android.cs" />
<None Include="**\**\*.Android.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
</ItemGroup>
<!-- Both iOS and Mac Catalyst -->
<ItemGroup Condition="$(TargetFramework.StartsWith('net7.0-ios')) != true AND $(TargetFramework.StartsWith('net7.0-maccatalyst')) != true">
<Compile Remove="**\**\*.MaciOS.cs" />
<None Include="**\**\*.MaciOS.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
</ItemGroup>
<!-- iOS -->
<ItemGroup Condition="$(TargetFramework.StartsWith('net7.0-ios')) != true">
<Compile Remove="**\**\*.iOS.cs" />
<None Include="**\**\*.iOS.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
</ItemGroup>
<!-- Mac Catalyst -->
<ItemGroup Condition="$(TargetFramework.StartsWith('net7.0-maccatalyst')) != true">
<Compile Remove="**\**\*.MacCatalyst.cs" />
<None Include="**\**\*.MacCatalyst.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
</ItemGroup>
<!-- Windows -->
<ItemGroup Condition="$(TargetFramework.Contains('-windows')) != true">
<Compile Remove="**\*.Windows.cs" />
<None Include="**\*.Windows.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
</ItemGroup>
分别添加MainPage.xaml.Android.cs，MainPage.xaml.MaciOS.cs，MainPage.xaml.Windows.cs
MainPage.xaml.cs
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
blazorWebView.BlazorWebViewInitializing += BlazorWebViewInitializing;
blazorWebView.BlazorWebViewInitialized -= BlazorWebViewInitialized;
}
private partial void BlazorWebViewInitializing(object sender, BlazorWebViewInitializingEventArgs e);
private partial void BlazorWebViewInitialized(object sender, BlazorWebViewInitializedEventArgs e);
}
MainPage.xaml.Android.cs，MainPage.xaml.MaciOS.cs，MainPage.xaml.Windows.cs
public partial class MainPage
{
private partial void BlazorWebViewInitializing(object sender, BlazorWebViewInitializingEventArgs e)
{
}
private partial void BlazorWebViewInitialized(object sender, BlazorWebViewInitializedEventArgs e)
{
}
}
Android
https://github.com/dotnet/maui/issues/11382
从这个issue中找到了拦截请求的办法
在ShouldInterceptRequest中添加请求不到时的一些处理。
因为这里填写的，是图片文件的本机绝对路径，安卓中的文件路径是符合浏览器url格式的，所以会被视为基于 https://0.0.0.0 这个基地址的相对路径去发起请求。
当然，它是请求不到的，因为压根就不存在。
所以我们去判断该路径的文件是否存在，存在就读取文件，返回一个新的响应。
注意，不是任意文件都可以的，你的App要对这个文件有访问权限。
MainPage.xaml.Android.cs
using Android.Webkit;
using Microsoft.AspNetCore.Components.WebView;
using Microsoft.AspNetCore.Components.WebView.Maui;
namespace MauiBlazorLocalImage
{
public partial class MainPage
{
private partial void BlazorWebViewInitializing(object sender, BlazorWebViewInitializingEventArgs e)
{
}
private partial void BlazorWebViewInitialized(object sender, BlazorWebViewInitializedEventArgs e)
{
e.WebView.SetWebViewClient(new MyWebViewClient(e.WebView.WebViewClient));
}
private class MyWebViewClient : WebViewClient
{
private WebViewClient WebViewClient { get; }
public MyWebViewClient(WebViewClient webViewClient)
{
WebViewClient = webViewClient;
}
public override bool ShouldOverrideUrlLoading(Android.Webkit.WebView view, IWebResourceRequest request)
{
return WebViewClient.ShouldOverrideUrlLoading(view, request);
}
public override WebResourceResponse ShouldInterceptRequest(Android.Webkit.WebView view, IWebResourceRequest request)
{
var resourceResponse = WebViewClient.ShouldInterceptRequest(view, request);
if (resourceResponse == null)
return null;
if (resourceResponse.StatusCode == 404)
{
var path = request.Url.Path;
if (File.Exists(path))
{
string mime = MimeTypeMap.Singleton.GetMimeTypeFromExtension(Path.GetExtension(path));
string encoding = "UTF-8";
Stream stream = File.OpenRead(path);
return new(mime, encoding, stream);
}
}
//Debug.WriteLine("路径：" + request.Url.ToString());
return resourceResponse;
}
public override void OnPageFinished(Android.Webkit.WebView view, string url)
=> WebViewClient.OnPageFinished(view, url);
protected override void Dispose(bool disposing)
{
if (!disposing)
return;
WebViewClient.Dispose();
}
}
}
}
下面做一个小例子
用MAUI的 MediaPicker.Default.PickPhotoAsync 去选择图片
这里不做过多的处理，Android中选择图片得到的路径实际上是复制到App的Cache文件夹下的图片文件路径
App对自己的FileSystem.Current.AppDataDirectory和FileSystem.Current.CacheDirectory这两个文件夹是有完全的读写权限的。
这里不做过多解释
Pages/Index.razor
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<div>
<img src="@photoPath" style="max-width: 100%;" />
</div>
<div style="word-wrap: break-word;">
@photoPath
</div>
<div>
<button @onclick="PickPhoto">PickPhoto</button>
</div>
@code
{
string photoPath;
private async Task PickPhoto()
{
var fileResult = await MediaPicker.Default.PickPhotoAsync();
var path = fileResult?.FullPath;
if (path is null)
{
return;
}
photoPath = path;
await InvokeAsync(StateHasChanged);
}
}
看一下效果
（下面调试工具这个截图是后补的，所以路径不一致，忽略这些细节）
由此可以看到，已经成功拦截，并且把响应换成了我们自己创建的。
换一张大一点的图片，看看速度
特意选了一张13.28 MB的4k图片，速度还可以
Windows
在之前那个issue https://github.com/dotnet/maui/issues/11382 中，并没有关于Windows如何拦截Webview请求的方法。
Windows上的Webview是使用的微软自家的WebView2。
于是我在Webview2的官方文档中找到了这个
但有个难题，Windows上的文件路径不符合浏览器url格式，它会被视为文件请求自动变成file:///开头的路径
file:///开头的路径是请求不到的，这里不过多解释。
所以我们在使用Windows上的文件路径之前，先把它转义一下 Uri.EscapeDataString()
等到拦截请求后，再变回去 Uri.UnescapeDataString()
MainPage.xaml.Windows.cs
using Microsoft.AspNetCore.Components.WebView;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Storage.Streams;
namespace MauiBlazorLocalImage
{
public partial class MainPage
{
private partial void BlazorWebViewInitializing(object sender, BlazorWebViewInitializingEventArgs e)
{
}
private partial void BlazorWebViewInitialized(object sender, BlazorWebViewInitializedEventArgs e)
{
var webview2 = e.WebView.CoreWebView2;
webview2.WebResourceRequested += async (sender, args) =>
{
string path = new Uri(args.Request.Uri).AbsolutePath.TrimStart('/');
path = Uri.UnescapeDataString(path);
if (File.Exists(path))
{
using var contentStream = File.OpenRead(path);
IRandomAccessStream stream = await CopyContentToRandomAccessStreamAsync(contentStream);
var response = webview2.Environment.CreateWebResourceResponse(stream, 200, "OK", null);
args.Response = response;
}
};
//为什么这么写？我也不知道，Maui源码就是这么写的
async Task<IRandomAccessStream> CopyContentToRandomAccessStreamAsync(Stream content)
{
using var memStream = new MemoryStream();
await content.CopyToAsync(memStream);
var randomAccessStream = new InMemoryRandomAccessStream();
await randomAccessStream.WriteAsync(memStream.GetWindowsRuntimeBuffer());
return randomAccessStream;
}
}
}
}
例子中的路径也要处理一下
Pages/Index.razor
var fileResult = await MediaPicker.Default.PickPhotoAsync();
var path = fileResult?.FullPath;
if (path is null)
{
return;
}
#if WINDOWS
path = Uri.EscapeDataString(path);
#endif
看一下效果
（这个截图也是后补的，所以路径不一致，忽略这些细节）
iOS / mac OS
在这篇文章最开始写的时候，笔者并没有找到iOS / mac OS中如何拦截请求
本来已经要放弃了，但天无绝人之路
抱着严谨的态度，又做了一些努力，看 Maui 源码，看 issue
克服了种种困难之后，终于有办法了
MainPage.xaml.Windows.cs
using Foundation;
using Microsoft.AspNetCore.Components.WebView;
using System.Runtime.Versioning;
using WebKit;
namespace MauiBlazorLocalImage
{
public partial class MainPage
{
private partial void BlazorWebViewInitializing(object sender, BlazorWebViewInitializingEventArgs e)
{
e.Configuration.SetUrlSchemeHandler(new MySchemeHandler(), "myfile");
}
private partial void BlazorWebViewInitialized(object sender, BlazorWebViewInitializedEventArgs e)
{
}
private class MySchemeHandler : NSObject, IWKUrlSchemeHandler
{
[Export("webView:startURLSchemeTask:")]
[SupportedOSPlatform("ios11.0")]
public void StartUrlSchemeTask(WKWebView webView, IWKUrlSchemeTask urlSchemeTask)
{
if (urlSchemeTask.Request.Url == null)
{
return;
}
var path = urlSchemeTask.Request.Url?.Path ?? "";
if (File.Exists(path))
{
byte[] bytes = File.ReadAllBytes(path);
using var response = new NSHttpUrlResponse(urlSchemeTask.Request.Url, 200, "HTTP/1.1", null);
urlSchemeTask.DidReceiveResponse(response);
urlSchemeTask.DidReceiveData(NSData.FromArray(bytes));
urlSchemeTask.DidFinish();
}
}
[Export("webView:stopURLSchemeTask:")]
public void StopUrlSchemeTask(WKWebView webView, IWKUrlSchemeTask urlSchemeTask)
{
}
}
}
}
iOS / mac OS中不能拦截 http 和 https 协议，但是可以拦截自定义协议
所以我们这里添加一个自定义协议 myfile
(不能用file，因为已经被注册过了，被注册过的协议在这里是不能设置的)
实际上，iOS / mac OS中，页面的协议头也是自定义的 app协议，而不是像windows或Android中的https
例子中的路径也要处理一下
Pages/Index.razor
var fileResult = await MediaPicker.Default.PickPhotoAsync();
var path = fileResult?.FullPath;
if (path is null)
{
return;
}
#if WINDOWS
path = Uri.EscapeDataString(path);
#elif IOS || MACCATALYST
path = "myfile://" + path;
#endif
看一下效果
mac OS
iOS
mac上的浏览器开发者工具最近有bug，用不了，所以就没有开发者工具的截图了
cannot use developer tools to debug blazor hybrid MAUI application in Mac OS
后记
虽然已经基本实现了最开始的目标，不过受限于笔者水平，可能还是不够完美。
文章到这里就结束了，感谢你的阅读
源码地址
本文中的例子的源码放到 Github 和 Gitee 了
有需要的可以去看一下