首页 > 编程语言 >C#使用Blazor编译WebAssembly供前端调用(一),关于SkiaSharp相关问题

C#使用Blazor编译WebAssembly供前端调用(一),关于SkiaSharp相关问题

时间:2024-07-05 17:31:10浏览次数:17  
标签:WebAssembly Assembly Web C# SkiaSharp 前端 如下 c#

目前信创热潮开始掀起,而C#很多行业开发的都是桌面端,迁移到网页端常常会因为很多库不支持或者不友好导致项目一直卡着。

最近一直在网上找灵感,偶然发现Web Assembly,一开始我还没不知道这是什么,后面发现目前主流浏览器都支持这一技术。
我们看一下这个Web Assembly简介如下

而后我看了翻阅了众多文档看能不能使用C#来编译Web Assembly,目前C#下Blazor下使用的就是Web Assembly,

但是没看到能单独抽离功能模块出来编译成Web Assembly,随后我请教了一下杨中科老师,杨中科老师分享了一篇他自己写的帖子给我,链接如下
https://www.cnblogs.com/rupeng/p/17107662.html。

随后基于这篇帖子,我开始进行尝试,我是用的前端框架是Vue3+Vite+TypeScript。首先,我们先编写c#代码

  1. 创建一个类库项目

  1. 将项目的csproj文件打开,将Sdk更改为 Microsoft.NET.Sdk.BlazorWebAssembly,如下图所示

  1. 接下来,我们编写两个简单的功能,一个返回当前时间,一个处理加载一张图片处理一下,这里只是简单做测试使用,勿喷

代码编写完成,我们简单生成一下,可以看到在项目的生成目录下有这么一个文件夹

我们将这个文件夹放到前端Vue项目目录中的public下

接下来,我们给Vue项目做一些简单的修改,在index.html中引入blazor.webassembly.js,并添加script代码,启用Blazor,如下图所示

这里我们想要调取C#代码使用的是DotNet这个对象,但是因为我们使用的是Typescript和Vue3,,所以得声明一个这个对象的类型,不然总是会提示红色波浪线,可能会导致后期编译Eslint检测不通过,
所以在src目录下新建Types目录,新建blazor.d.ts文件,代码如下,tsconfig.json也得添加一下你的类型声明文件夹路径

接下来,我们简单调用一下这两个c#方法,如下如所示

调用之后效果如下

这里可以看到获取了当前时间,c#中处理的图片也返回到前端加载出来了,至此,实现了c#编写功能编译成Web Assembly提供给前端调用,
至于为什么会有这样的想法,一个是因为前端很多东西不友好,还有就是喜欢钻研点新东西。

最后,还有一点需要注意,这里C#中使用SkiaSharp来处理图片,添加一下以下两个依赖,不然会报错ShipSharp.SKImageInfo初始化失败。

好了,到这里简单的一次试验就成功了。本篇博客测试引用帖子如下
https://blog.csdn.net/simpleman2000/article/details/134592252,
https://www.cnblogs.com/rupeng/p/17107662.html

标签:WebAssembly,Assembly,Web,C#,SkiaSharp,前端,如下,c#
From: https://www.cnblogs.com/OrdinaryLT/p/18286248

相关文章

  • 纯 CSS 实现文字智能适配背景效果
    还记得2017年,我们响应朋友的邀约从高德离职出来创业的时候,遇到了一个相对来说有点特殊的需求,动态的文字有长有短,但是需要智能适配背景的颜色变成其对比色。大概效果如下: 仔细看会发现,哪怕半个文字存在于两个不同的背景色之间,这个文字也会被分割成两个颜色。看到这样的需......
  • Springboot自定义数据源DruidDataSource
    1、Druid简介Java程序很大一部分要操作数据库,为了提高性能操作数据库的时候,又不得不使用数据库连接池。Druid是阿里巴巴开源平台上一个数据库连接池实现,结合了C3P0、DBCP等DB池的优点,同时加入了日志监控。Druid可以很好的监控DB池连接和SQL的执行情况,天生就是针对监控而......
  • 统一视频接入平台LntonCVS视频监控平台具体功能介绍
    LntonCVS视频监控平台是一款基于H5技术开发的安防视频监控解决方案,专为全球范围内不同品牌、协议及设备类型的监控产品设计。该平台提供了统一接入管理,支持标准的H5播放接口,使其他应用平台能够快速集成视频功能。无论开发环境、操作系统或平台如何,它都具备全兼容、纯WEB、无需......
  • pyinstaller打包onnxruntime-gpu报错找不到CUDA的解决方案
    问题说明:使用onnxruntime-gpu完成了深度学习模型部署,但在打包时发生了报错:找不到CUDA具体问题描述:RuntimeError:D:\a\_work\1\s\onnxruntime\python\onnxruntime_pybind_state.cc:857onnxruntime::python::CreateExecutionProviderInstanceCUDA_PATHissetbutCUDAwas......
  • AbMole精选文献解读——猪瞬时受体电位通道1(TRPC1)通过Wnt信号通路调控肌肉生长的研究
    AbMole以其卓越的品质、与时俱进的产品、专业无忧的服务,不断鼎力支持全球科学家获得重要的突破性成果。AbMole(奥默生物)是ChemBridge在中国的唯一官方指定合作伙伴。由XinHao, YuFu, ShixinLi等人发表的名为“Porcinetransientreceptorpotentialchannel1(TRPC1)r......
  • echarts中Label标签与数据项颜色设置为同一种颜色
    echarts5中默认标签颜色不会跟数据项颜色保持一致,而是全都是黑色。想要实现label颜色和它的数据项颜色一致,需要手动继承颜色,设置label{color:'inherit'}即可解决label标签颜色与数据项颜色一致。  https://echarts.apache.org/examples/zh/editor.html?c=pie-simple注意:......
  • Oracle实例启动阶段的详细解析
    Oracle数据库实例的启动过程是一个多阶段的过程,每个阶段都有特定的操作和目的。以下是每个启动阶段的详细解析:1.启动实例(InstanceStartup)命令:STARTUPNOMOUNT主要操作:(1)分配内存:分配系统全局区(SGA),SGA是一组共享内存结构,用于存储数据库数据和控制信息。(2)启动后台进程:启动各......
  • Openstack服务器平台搭建手册
    PS:本片文章为摘抄文章,仅做学习和记录使用,原创作者不易,请支持原创作者!!谢谢!!原创链接:https://blog.csdn.net/lj2023103338/article/details/133999474Openstack版本:Q版本(chinaskills_cloud_iaas.iso)其他版本也可以配置需求:一台交换机(能通外网的交换机,这里不做网络的配......
  • C++基础语法篇
    一、语法1.定义变量并赋值:数据类型 变量名=值;2.宏常量定义#define会报错,提示转换:constexprauto数据类型常量名=常量值;3.定义普通(局部)常量:const 数据类型常量名=常量值;4.sizeof关键字,查询占用空间 sizeo......
  • Openstack制作Rhel9,使用IOS镜像制作
    转自作者自己的CSDN 拷贝Openstack制作Rhel9,使用IOS镜像制作_redhatopenstack如何使用iso虚机-CSDN博客====================  需要已有环境:   1.Openstack   2.qume-img,kvm,virsh....     (yuminstallqemu-kvmqemu-imgvirt-managerlibvirt......