创建一个.net 7.0类库工程，引用下面的nuget包：

    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.5" />

    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.5" />

    <PackageReference Include="SkiaSharp.Views.Blazor" Version="2.88.3" />  如果用到SkiaSharp就引入这个

然后把Project sdk改成这样：

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

然后c#代码可以这样写：

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

using Microsoft.JSInterop;

namespace WebAssemblyTest

{

    public class Program

    {

        private static IJSRuntime js;

        private static async Task Main(string[] args)

        {

            var builder = WebAssemblyHostBuilder.CreateDefault(args);

            var host = builder.Build();

            js = host.Services.GetRequiredService<IJSRuntime>();

            RunInSeconds();

            await host.RunAsync();

        }

        static async void RunInSeconds()

        {

            while (true)

            {

                await Task.Delay(2000);

                //调用javascript里面的test方法

                await js.InvokeVoidAsync("test", new byte[] { 0x1, 0x2 });

            }

        }

        /// <summary>

        /// 给js调用的函数

        /// </summary>

        /// <param name="i"></param>

        /// <param name="j"></param>

        /// <returns></returns>

        [JSInvokable]

        public static byte[] Add(int i, int j)

        {

            return new byte[] { (byte)i,(byte)j};

        }

    }

}

js代码这样写：

<html lang="en">

<head>

    <meta charset="UTF-8" />

</head>

<body>

</body>

<script src="_framework/blazor.webassembly.js" autostart="false"></script>

<script>

    function test(r) {

        console.log(r);

        alert(r);

    }

    window.onload = async function () {

        await Blazor.start();

        const r = await DotNet.invokeMethodAsync(

            'WebAssemblyTest',//程序集的名字

            'Add',//要调用的标注了[JSInvokable]方法的名字

            666,//若干参数

            333

        );

        console.log(r);

    };

</script>

</html>

注意编译生成的_framework文件夹必须放在web服务器，并且设置mimeType以便前端可以顺利下载

var provider = new FileExtensionContentTypeProvider();

provider.Mappings[".dll"] = "application/octet-stream";//配置添加新的映射关系

provider.Mappings[".gz"] = "application/octet-stream";

provider.Mappings[".dat"] = "application/octet-stream";

provider.Mappings[".blat"] = "application/octet-stream";

provider.Mappings[".pdb"] = "application/octet-stream";

provider.Mappings[".wasm"] = "application/octet-stream";

app.UseStaticFiles(new StaticFileOptions

{

    ContentTypeProvider = provider,//应用新的映射关系

});

一个SkiaSharp显示图片到canvas的例子

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

using Microsoft.JSInterop;

using SkiaSharp;

using System;

using System.Drawing;

using System.Drawing.Imaging;

using System.IO;

using System.Runtime.InteropServices;

namespace WebAssemblyTest

{

    public class Program

    {

        private static IJSRuntime js;

        private static async Task Main(string[] args)

        {

            var builder = WebAssemblyHostBuilder.CreateDefault(args);

            var host = builder.Build();

            js = host.Services.GetRequiredService<IJSRuntime>();

            RunInSeconds();

            await host.RunAsync();

        }

        static async void RunInSeconds()

        {

            try

            {

                HttpClient client = new HttpClient();

                using var ret = await client.GetStreamAsync("https://img0.baidu.com/it/u=189915953,3148055061&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800");

                var bs = new byte[ret.Length];

                ret.Read(bs , 0 , bs.Length);

                ret.Dispose();

                while (true)

                {

                    using (var ms = new MemoryStream(bs))

                    {

                        ms.Position = 0;

                        using (var skiaBitmap = SKBitmap.Decode(ms))

                        {

                            // 获取图片的宽度和高度

                            var width = skiaBitmap.Width;

                            var height = skiaBitmap.Height;

                            using (var canvas = new SKCanvas(skiaBitmap))

                            {

                                // 添加文本

                                var paint = new SKPaint

                                {

                                    IsAntialias = true,

                                    Color = SKColors.Blue,

                                    TextAlign = SKTextAlign.Center,

                                    TextSize = 64

                                };

                                canvas.DrawText(DateTime.Now.ToString("测试 HH:mm:ss"), width / 2f, height / 2f, paint);

                            }

                            // 创建一个用于存储像素数据的数组

                            var pixelData = new byte[width * height * 4];

                            // 将像素数据序列化到数组中

                            for (var y = 0; y < height; ++y)

                            {

                                for (var x = 0; x < width; ++x)

                                {

                                    var index = (y * width + x) * 4;

                                    var color = skiaBitmap.GetPixel(x, y);

                                    pixelData[index] = color.Red;

                                    pixelData[index + 1] = color.Green;

                                    pixelData[index + 2] = color.Blue;

                                    pixelData[index + 3] = color.Alpha;

                                }

                            }

                            //调用javascript里面的test方法

                            await js.InvokeVoidAsync("test", pixelData, width, height);

                        }

                    }

                    await Task.Delay(25);

                }

            }

            catch (Exception ex)

            {

                await js.InvokeVoidAsync("showErr", ex.ToString());

            }

        }

        /// <summary>

        /// 给js调用的函数

        /// </summary>

        /// <param name="i"></param>

        /// <param name="j"></param>

        /// <returns></returns>

        [JSInvokable]

        public static byte[] Add(int i, int j)

        {

            return new byte[] { (byte)i,(byte)j};

        }

    }

}

<html lang="en">

<head>

    <meta charset="UTF-8" />

</head>

<body>

    <canvas id="myCanvas" style="width:800px;height:800px;"></canvas>

</body>

<script src="_framework/blazor.webassembly.js" autostart="false"></script>

<script>

    function test(data, width, height) {

        const canvas = document.getElementById('myCanvas');

        canvas.style.width = width + "px";

        canvas.style.height = height + "px";

        canvas.width = width;

        canvas.height = height;

        const context = canvas.getContext('2d');

        context.width = width;

        context.height = height;

        const imageData = context.createImageData(width, height);

        for (let i = 0; i < data.length; i += 4) {

            imageData.data[i] = data[i]; // 红色通道

            imageData.data[i + 1] = data[i + 1]; // 绿色通道

            imageData.data[i + 2] = data[i + 2]; // 蓝色通道

            imageData.data[i + 3] = data[i + 3]; // alpha 通道

        }

        context.putImageData(imageData, 0, 0);

    }

    function showErr(err) {

        console.error(err);

    }

    window.onload = async function () {

        await Blazor.start();

    };

</script>

</html>

c# 编写 WebAssembly的更多相关文章

使用Go编写WebAssembly
I. Install go 1. down https://golang.org/dl/ go1.12.3.windows-amd64.zip 2. set path (1) GOROOTvar na ...
不安分的 Go 语言开始入侵 Web 前端领域了！（ WebAssembly ）
参考:https://blog.csdn.net/csdnnews/article/details/84038848 从 Go 语言诞生以来,它就开始不断侵蚀 Java .C.C++ 语言的领地.今年 ...
webassembly
为什么需要 WebAssembly 自从 JavaScript 诞生起到现在已经变成最流行的编程语言,这背后正是 Web 的发展所推动的.Web 应用变得更多更复杂,但这也渐渐暴露出了 JavaScr ...
WebAssembly学习(三)：AssemblyScript - TypeScript到WebAssembly的编译
虽然说只要高级语言能转换成 LLVM IR,就能被编译成 WebAssembly 字节码,官方也推荐c/c++的方式,但是让一个前端工程师去熟练使用c/c++显然是有点困难,那么TypeScript ...
【webAssembly系列】webAssembly初探究竟
一.前言自从JavaScript诞生开始,到现在开始变成流行的编程语言,背后的是web发展所推动的.web应用的变得更多更复杂,但是渐渐暴露出JavaScript的问题: (1)语法太灵活导致开发大 ...
荷畔微风 - 在函数计算FunctionCompute中使用WebAssembly
WebAssembly 是一种新的W3C规范,无需插件可以在所有现代浏览器中实现近乎原生代码的性能.同时由于 WebAssembly 运行在轻量级的沙箱虚拟机上,在安全.可移植性上比原生进程更加具备优 ...
简单的WebAssembly应用搭建
1 WebAssembly简介 WebAssembly是一种新兴的Web技术,网上的资料并不是很多,简单的可以理解为让C/C++程序运行在浏览器上,官网上用四个词来描述该技术:高效.安全.开 ...
不用Blazor WebAssembly，开发在浏览器端编译和运行C#代码的网站
本文中,我将会为大家分享一个如何用.NET技术开发"在浏览器端编译和运行C#代码的工具",核心的技术就是用C#编写不依赖于Blazor框架的WebAssembly以及Roslyn技 ...
WHAT EXACTLY IS WASM ?!
终于, 我入门了当初很仇视的技术.... 什么是WebAssembly? WebAssembly或WASM是一个编译器目标(由编译器生成的代码),具有二进制格式,允许我们在浏览器上执行C,C ++和R ...
别了，JavaScript；你好，Blazor
Web开发与JavaScript开发向来是同义词.直到WebAssembly的横空出世,WebAssembly (Wasm)是一种在浏览器中可以执行的二进制指令. WebAssembly 的官方工具 ...

随机推荐

C# 如何读取Excel文件
当处理Excel文件时,从中读取数据是一个常见的需求.通过读取Excel数据,可以获取电子表格中包含的信息,并在其他应用程序或编程环境中使用这些数据进行进一步的处理和分析.本文将分享一个使用免费库来实 ...
扩展中国剩余定理（Excrt）笔记
扩展中国剩余定理(excrt) 本来应该先学中国剩余定理的.但是有了扩展中国剩余定理,朴素的 CRT 就没用了. 扩展中国剩余定理用来求解如下形式的同余方程组: \[\begin{cases} x \ ...
Mybatis源码1JDBC->mybatis主要流程->mybatis Excutor简介
=== 一丶mybatis概述 MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射.MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作.My ...
2023-09-20：用go语言，保证一定是n*n的正方形，实现从里到外转圈打印的功能如果n是奇数，中心点唯一，比如 a b c d e f g h i e是中心点，依次打印 : e f i h g
2023-09-20:用go语言,保证一定是n*n的正方形,实现从里到外转圈打印的功能如果n是奇数,中心点唯一,比如 a b c d e f g h i e是中心点,依次打印 : e f i h g ...
记一次uboot编译/经验/教训
记一次uboot编译/经验/教训 - 最近学习uboot移植有关的知识,在了解原理后自己编译uboot,但是出现了好多各式各样的错误,最后换了几次系统环境之后才找到错误来源 1.准备源码与交叉编译工具 ...
日常Bug排查-集群逐步失去响应
前言日常Bug排查系列都是一些简单Bug排查.笔者将在这里介绍一些排查Bug的简单技巧,同时顺便积累素材_ Bug现场最近碰到一个产线问题,表现为某个应用集群所有的节点全部下线了.导致上游调用全部 ...
云图说 | 容器交付流水线ContainerOps，助力企业容器化转型
摘要:华为云容器镜像服务SWR推出容器交付流水线(ContainerOps)可以帮助企业容器化转型. 容器交付流水线(ContainerOps)是华为云容器镜像服务(SWR)推出的面向从源代码到生产上 ...
懂分析、会预测，你见过这样的华为云DAS吗？
摘要:数字化时代下,华为云数据管理服务DAS基于AI技术,于近期推出了智能SQL分析(包括慢SQL发现.SQL透视).workload级别索引推荐.存储空间预测等运维特性,加上原有的数据库运维能力,构 ...
云原生开发者须具备的1+N技能，开启第二曲线
摘要:云的大环境下,意味以云为中心的快速应用开发能力将成为"胜负手".在现如今如此复杂的外部环境,且高速发展的情况下,为了不重蹈覆辙,必须需要开发者的第二曲线来破局! 随着云计算的 ...
互斥锁Mutex：鸿蒙轻内核中处理临界资源独占的“法官”
摘要:本文带领大家一起剖析鸿蒙轻内核的互斥锁模块的源代码,包含互斥锁的结构体.互斥锁池初始化.互斥锁创建删除.申请释放等. 本文分享自华为云社区<鸿蒙轻内核M核源码分析系列十互斥锁Mutex& ...

c# 编写 WebAssembly

注意编译生成的_framework文件夹必须放在web服务器，并且设置mimeType以便前端可以顺利下载

一个SkiaSharp显示图片到canvas的例子

c# 编写 WebAssembly的更多相关文章

随机推荐

热门专题