C#使用Blazor编译WebAssembly供前端调用（一），关于SkiaSharp相关问题

目前信创热潮开始掀起，而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