经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » ASP.net » 查看文章
Blazor Hybrid (Blazor混合开发)更好的读取本地图片
来源:cnblogs  作者:tokengo  时间:2023/1/30 15:23:24  对本文有异议

在 Blazor Hybrid 应用中,Razor 组件在设备上本机运行。 组件通过本地互操作通道呈现到嵌入式 Web View 控件。 组件不在浏览器中运行,并且不涉及 WebAssembly。 Razor 组件可快速加载和执行代码,组件可通过 .NET 平台完全访问设备的本机功能。 Web View 中呈现的组件样式与平台相关,可能需要你使用自定义样式表来说明不同平台之间的呈现差异。

如何在Blazor Hybrid中读取本地图片展示?

在Blazor Hybrid经常遇到一些读取选中的图片并且渲染,但是文件的目录在Blazor中直接src填写是无法读取到的,这个时候就可能需要将文件Copy到wwwroot中,或者将其转换Base64放入到html中,但是base64转换图片是很长的一串字符串,这样可能会导致渲染可能卡扽,所以我们将使用js提供的功能去实现,其实在Blazor Hybrid为了兼容,可以采用js提供的部分功能实现,效果更好,

创建一个Winform项目

示图:

添加 Microsoft.AspNetCore.Components.WebView.WindowsFormsNuGet包

  1. dotnet add package Microsoft.AspNetCore.Components.WebView.WindowsForms

修改项目文件的属性

打开BlazorHybrid.csproj项目文件,将Microsoft.NET.Sdk 修改成Microsoft.NET.Sdk.Razor

  1. <Project Sdk="Microsoft.NET.Sdk.Razor">

创建 _Imports.razor文件,添加以下代码

  1. @using Microsoft.AspNetCore.Components.Web
  2. @using Microsoft.AspNetCore.Components.Routing

创建wwwroot文件夹

创建wwwroot/index.html文件,添加以下代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>WinFormsBlazor</title>
  7. <base href="/" />
  8. <link href="css/app.css" rel="stylesheet" />
  9. <link href="WinFormsBlazor.styles.css" rel="stylesheet" />
  10. </head>
  11. <body>
  12. <div id="app">加载中...</div>
  13. <div id="blazor-error-ui">
  14. An unhandled error has occurred.
  15. <a href="" class="reload">Reload</a>
  16. <a class="dismiss">??</a>
  17. </div>
  18. <!--引用blazor.webview.js Server和web assembly,hybrid的js都不一样-->
  19. <script src="_framework/blazor.webview.js"></script>
  20. </body>
  21. </html>

创建wwwroot/css/app.css添加以下代码

  1. html, body {
  2. font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  3. }
  4. h1:focus {
  5. outline: none;
  6. }
  7. a, .btn-link {
  8. color: #0071c1;
  9. }
  10. .btn-primary {
  11. color: #fff;
  12. background-color: #1b6ec2;
  13. border-color: #1861ac;
  14. }
  15. .valid.modified:not([type=checkbox]) {
  16. outline: 1px solid #26b050;
  17. }
  18. .invalid {
  19. outline: 1px solid red;
  20. }
  21. .validation-message {
  22. color: red;
  23. }
  24. #blazor-error-ui {
  25. background: lightyellow;
  26. bottom: 0;
  27. box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  28. display: none;
  29. left: 0;
  30. padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  31. position: fixed;
  32. width: 100%;
  33. z-index: 1000;
  34. }
  35. #blazor-error-ui .dismiss {
  36. cursor: pointer;
  37. position: absolute;
  38. right: 0.75rem;
  39. top: 0.5rem;
  40. }

创建Shared/App.razor添加以下代码

  1. <Router AppAssembly="@typeof(MainLayout).Assembly">
  2. <Found Context="routeData">
  3. <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
  4. <FocusOnNavigate RouteData="@routeData" Selector="h1" />
  5. </Found>
  6. <NotFound>
  7. <PageTitle>Not found</PageTitle>
  8. <LayoutView Layout="@typeof(MainLayout)">
  9. <p role="alert">Sorry, there's nothing at this address.</p>
  10. </LayoutView>
  11. </NotFound>
  12. </Router>

创建Shared/MainLayout.razor添加以下代码

  1. @inherits LayoutComponentBase
  2. <div>
  3. @Body
  4. </div>

选择Form1.cs打开设计窗口,将BlazorWebView拖到Form1中,并且将BlazorWebView的属性中的Dock修改成Fill

将以下命名空间添加到Form1.cs文件的顶部

  1. using Microsoft.AspNetCore.Components.WebView.WindowsForms;
  2. using Microsoft.Extensions.DependencyInjection;

Form1 构造函数中的 InitializeComponent 方法调用后面,添加以下代码:

  1. var services = new ServiceCollection();
  2. services.AddWindowsFormsBlazorWebView();
  3. blazorWebView1.HostPage = "wwwroot\\index.html";
  4. blazorWebView1.Services = services.BuildServiceProvider();
  5. blazorWebView1.RootComponents.Add<App>("#app");

效果如图

修改wwwroot/index.html代码。添加js方法,将以下代码添加到body里面

  1. <script>
  2. /** 将byte转url对象 */
  3. function byteToUrl(blob) {
  4. // 适配webview和web
  5. var myBlob = new Blob([blob], { type: "image/png" });
  6. return (window.URL || window.webkitURL || window || {}).createObjectURL(myBlob);
  7. }
  8. /**
  9. * 释放url对象,因为createObjectURL创建的对象一直会存在可能会占用过多的内存,请注意释放
  10. */
  11. function revokeUrl(url) {
  12. (window.URL || window.webkitURL || window || {}).revokeObjectURL(url);
  13. }
  14. </script>

创建Pages/Index.razor文件,并添加以下代码

  1. @using Microsoft.JSInterop;
  2. @inject IJSRuntime JSRuntime
  3. @page "/"
  4. @if (!string.IsNullOrEmpty(Img)){
  5. <img src="@Img" />
  6. }
  7. <input @bind="ImgPath" />
  8. <button @onclick="OnLoad">加载图片</button>
  9. <button @onclick="Revoke">释放图片</button>
  10. @code {
  11. public string? ImgPath { get; set; }
  12. private string? Img;
  13. private async Task OnLoad()
  14. {
  15. // 加载目录中的图片获取到byte 通过byteToUrl转换URL对象 可以直接通过url获取到图片 它存在与本地
  16. var file = await File.ReadAllBytesAsync(ImgPath);
  17. Img = await JSRuntime.InvokeAsync<string>("byteToUrl", file);
  18. }
  19. private async Task Revoke()
  20. {
  21. if (!string.IsNullOrEmpty(Img)){
  22. await JSRuntime.InvokeVoidAsync("revokeUrl", Img);
  23. Img = string.Empty;
  24. }
  25. }
  26. }
  27. <style>
  28. button {
  29. background-color: cornflowerblue;
  30. height: 30px;
  31. font-size: 15px;
  32. width: auto;
  33. }
  34. img{
  35. height:auto;
  36. width:auto;
  37. }
  38. </style>

最终效果:

结尾

我们可以通过createObjectURL加载本地文件或者图片,并且渲染,这样对比copy到wwwroot或者转换base64的效果更好,而且更容易管理,实现也超级容易,用于跨平台实现也算是最佳实现了,

Blazor技术交流:452761192

来自token的分享

原文链接:https://www.cnblogs.com/hejiale010426/p/17073079.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号