Blazor Hybrid (Blazor混合开发)更好的读取本地图片

简介: Blazor Hybrid (Blazor混合开发)更好的读取本地图片

在 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包

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

修改项目文件的属性

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

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

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

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

创建wwwroot文件夹

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WinFormsBlazor</title>
    <base href="/" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="WinFormsBlazor.styles.css" rel="stylesheet" />
</head>

<body>

    <div id="app">加载中...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <!--引用blazor.webview.js Server和web assembly,hybrid的js都不一样-->
    <script src="_framework/blazor.webview.js"></script>

</body>

</html>

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

html, body {
   
   
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
   
   
    outline: none;
}

a, .btn-link {
   
   
    color: #0071c1;
}

.btn-primary {
   
   
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.valid.modified:not([type=checkbox]) {
   
   
    outline: 1px solid #26b050;
}

.invalid {
   
   
    outline: 1px solid red;
}

.validation-message {
   
   
    color: red;
}

#blazor-error-ui {
   
   
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
   
   
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

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

<Router AppAssembly="@typeof(MainLayout).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

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

@inherits LayoutComponentBase
<div>
    @Body
</div>

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

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

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

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

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

效果如图

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

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

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

@using Microsoft.JSInterop;
@inject IJSRuntime JSRuntime

@page "/"

@if (!string.IsNullOrEmpty(Img)){
    <img src="@Img" />
}

<input @bind="ImgPath" />

<button @onclick="OnLoad">加载图片</button>

<button @onclick="Revoke">释放图片</button>
@code {
    public string? ImgPath { get; set; }

    private string? Img;

    private async Task OnLoad()
    {
        // 加载目录中的图片获取到byte 通过byteToUrl转换URL对象 可以直接通过url获取到图片 它存在与本地
        var file = await File.ReadAllBytesAsync(ImgPath);
        Img = await JSRuntime.InvokeAsync<string>("byteToUrl", file);
    }

    private async Task Revoke()
    {
        if (!string.IsNullOrEmpty(Img)){
            await JSRuntime.InvokeVoidAsync("revokeUrl", Img);
            Img = string.Empty;
        }
    }
}

<style>
    button {
    
    
        background-color: cornflowerblue;
        height: 30px;
        font-size: 15px;
        width: auto;
    }
    img{
    
    
        height:auto;
        width:auto;
    }

</style>

最终效果:

结尾

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

Blazor技术交流:452761192

来自token的分享

目录
相关文章
|
4月前
|
JavaScript 前端开发 C#
在winform blazor hybrid中绘图
在winform blazor hybrid中绘图
53 1
|
4月前
|
前端开发 C# 开发工具
在winform中使用blazor hybrid构建页面
在winform中使用blazor hybrid构建页面
69 0
|
7月前
|
前端开发 Android开发 开发者
【Flutter前端技术开发专栏】Flutter中的混合应用(Hybrid Apps)开发
【4月更文挑战第30天】本文探讨了使用Flutter开发混合应用的方法。混合应用结合Web技术和原生容器,提供快速开发和低成本维护。Flutter,一款现代前端框架,以其插件系统和高性能渲染引擎支持混合应用开发。通过创建Flutter项目、添加平台代码、使用WebView、处理平台间通信以及发布应用,开发者可构建跨平台混合应用。虽然混合应用有性能和用户体验的局限,但Flutter的跨平台兼容性和丰富的插件生态降低了开发成本。开发者应根据项目需求权衡选择。
184 0
【Flutter前端技术开发专栏】Flutter中的混合应用(Hybrid Apps)开发
|
7月前
|
移动开发 前端开发 JavaScript
说一说你对混合开发(Hybrid Development)的了解。
混合开发(Hybrid App)结合Web和Native技术,实现跨平台应用开发,降低工作量和时间。使用JavaScript等Web技术提升开发效率,通过优化提供接近原生体验。混合应用可即时更新,维护灵活,成本效益高。React Native和Flutter等框架支持混合开发,丰富的社区资源加速开发进程。网易云音乐等成功案例证明其可行性。随着技术进步,混合开发前景广阔。
121 1
|
7月前
|
移动开发 前端开发 JavaScript
移动端 Hybrid 开发:RN、Flutter与Webview的抉择与融合
【4月更文挑战第6天】本文对比了移动端Hybrid开发的三种主流方案——React Native (RN),Flutter和Webview。RN基于JavaScript,适合React熟练的团队,适用于性能要求高、跨平台的中大型应用。Flutter,使用Dart语言,以其高性能和自定义UI适用于追求极致体验的项目。Webview适合快速移植Web应用至移动端,开发成本低但性能受限。选择时要考虑项目规模、性能需求、团队技术栈等因素,实际应用中常采用混合策略,如RN/Flutter+Webview、原生模块集成等,以实现最佳开发效果和长期技术规划。
494 0
|
Web App开发 JavaScript 测试技术
工银e生活开发脱坑日志(4)工行页面及jsAPI交互接口hybrid_app.js登录情况说明
工银e生活开发脱坑日志(4)工行页面及jsAPI交互接口hybrid_app.js登录情况说明
253 0
|
C# 计算机视觉 开发者
在Winform中一分钟入门使用好看性能还好的Blazor Hybrid
在Winform中一分钟入门使用好看性能还好的Blazor Hybrid
278 0
在Winform中一分钟入门使用好看性能还好的Blazor Hybrid
|
监控 Ubuntu C#
Blazor HyBrid在香橙派(Ubuntu Arm)运行的效果
Blazor HyBrid在香橙派(Ubuntu Arm)运行的效果
166 0
|
4月前
|
SQL 网络协议 数据库连接
【Azure 应用服务】遇见“无法创建hybrid connection for App Service”的解决办法
【Azure 应用服务】遇见“无法创建hybrid connection for App Service”的解决办法