c# 编写 WebAssembly
创建一个.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 的 官方工具 ...
随机推荐
- 【Python】【OpenCV】视频帧和摄像头帧操作 and 窗口显示
一.读取写入视频文件 1 import cv2 2 3 # 创建一个视屏捕获对象 4 videoCapture = cv2.VideoCapture('AVI.avi') 5 6 # 获取视频的属性值 ...
- IPTV SQM的项目总结
本文于2015年底完成,发布在个人博客网站上,标题为<项目总结--纪念我参与过的IPTV SQM项目>. 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来. 时 ...
- java后端工具类之从0到1生成数字证书（RSA）
开放签电子签章系统-开源版这周(2023-12-15)就要上线发布了,为了让开源版能够更好的服务广大研发工程师,接下来会详细的说说开源版从代码层面的具体实现,以便大家在工作过程中更好使用开放签电子签章 ...
- Zookeeper 的基本使用
维基百科对 Zookeeper 的介绍如下所示: Apache ZooKeeper是 Apache 软件基金会的一个软件项目,它为大型分布式计算提供开源的分布式配置服务.同步服务和命名注册 ZooKe ...
- 快速批量升级 NugetPackage 版本
批量升级项目中的 Nuget 有时候我们需要升级整个解决方案中的某些Nuget版本,如果每个手动使用NuGet Package Manager 会很麻烦.经过一个周末的踩坑,我找到一个解决方案. Na ...
- 文心一言 VS 讯飞星火 VS chatgpt （59）-- 算法导论6.4 3题
文心一言 VS 讯飞星火 VS chatgpt (59)-- 算法导论6.4 3题 三.对于一个按升序排列的包含 n 个元素的有序数组 A 来说,HEAPSORT 的时间复杂度是多少?如果 A 是降序 ...
- CUDA C编程权威指南：1.1-CUDA基础知识点梳理
主要整理了N多年前(2013年)学习CUDA的时候开始总结的知识点,好长时间不写CUDA代码了,现在LLM推理需要重新学习CUDA编程,看来出来混迟早要还的. 1.CUDA 解析:2007年,NV ...
- 13个QA带你了解线上压测的知识点
摘要:设计一个线上压测系统能让我们学习到多少东西?这13个问题看你能否搞定. 本文分享自华为云社区<设计一个线上压测系统能让我们学习到多少东西?13个问题看你能否搞定>,作者:breakD ...
- What？构造的查询语句会导致堆栈溢出
摘要:本文归纳了Neo4j和Nebula两个开源图数据库的两个pull request修复的堆栈溢出问题,并试着写写通过阅读pr中的问题而得到的一些启发 本文分享自华为云社区<巧妙构造的查询语句 ...
- HOCON：nginx配置文件后缀conf是什么格式类型文件夹？intellij如何编辑
nginx的配置为*.conf ,这个conf是么子文件?之前确实不清楚. HOCON 简介HOCON(Human-Optimized Config Object Notation)是一个易于使用的配 ...