使用Edge.js,在JavaScript中调用C# .Net

Edge.js能够让开发者在JavaScript中调用C#的接口,提高应用的扩展能力。这里介绍如何调用C#接口获取图片数据,并通过Node.js搭建的WebSocket server发送到Web客户端。

参考:How to Use Edge.js to Empower WebSocket Solutions in JavaScript

通过.Net接口获取图片返回给JavaScript

先看下单纯使用JavaScript来load本地图片可以这样:

var fs = require(‘fs‘);
fs.readFile(‘Capture.jpg‘, function(err, data) {
  console.log(data.length); // image data
});

要使用Edge.js,使用下面的命令来安装:

npm install edge

创建C#文件nativeImageLoader.cs

#r "System.Drawing.dll"
using System.Threading.Tasks;
using System.Drawing;
 
public class Startup
{
    public async Task<object> Invoke(object input)
    {   
        byte[] imageBuffer;
        Image image = Image.FromFile("Capture.jpg");
        using (System.IO.MemoryStream stream = new System.IO.MemoryStream())
        {
            image.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg);
            imageBuffer = stream.GetBuffer();
        }
 
        return imageBuffer;
    }
}

在默认情况下,edge加载的系统dll只有mscorlib.dll and System.dll,因此需要通过#r “System.Drawing.dll”手动添加。

现在在JavaScript层就可以获取图像了:

var nativeImageLoader = edge.func(require(‘path‘).join(__dirname, ‘nativeImageLoader.cs‘));
nativeImageLoader(‘load‘, function(error, result) {
            if (error) throw error;
            // result is the loaded image
 });

使用Node.js创建WebSocket解决方案

首先安装WebSocket包:

npm install ws

几行代码搞定server的图像数据发送:

var WebSocketServer = require(‘ws‘).Server,
    wss = new WebSocketServer({
        port: 8080
});
wss.on(‘connection‘, function(ws) {
    ws.on(‘message‘, function(message) {
        console.log(‘Received: %s‘, message);
        nativeImageLoader(‘load‘, function(error, result) {
            if (error) throw error;
            ws.send(result); // send the captured image
        });
    });
});

运行server:

node server.js

在客户端中接收数据:

var ws = new WebSocket("ws://127.0.0.1:8080/");     
ws.binaryType = "arraybuffer";
 
ws.onopen = function() {    
   alert("Opened");    
   ws.send("I‘m Dynamsoft");    
};    
 
ws.onmessage = function (evt) {     
    var bytes = new Uint8Array(evt.data);
    var data = "";
    var len = bytes.byteLength;
    for (var i = 0; i < len; ++i) {
        data += String.fromCharCode(bytes[i]);
    }
    var img = document.getElementById("image");
    img.src = "data:image/png;base64,"+window.btoa(data);   
};    
 
ws.onclose = function() {    
   alert("Closed");    
};    
 
ws.onerror = function(err) {    
   alert("Error: " + err);    
};

打开client.htm可以看到收到的数据:

源码

https://github.com/DynamsoftRD/WebSocket-in-JavaScript

git clone https://github.com/DynamsoftRD/WebSocket-in-JavaScript.git
时间: 2024-11-08 14:27:35

使用Edge.js,在JavaScript中调用C# .Net的相关文章

在自定义的js验证规则中调用magento的VarienForm方法验证表单

js部分<script type="text/javascript"> //<![CDATA[ var loginForm = new VarienForm('login-form', true); $('login-email').observe('keypress', bindLoginPost); $('login-password').observe('keypress', bindLoginPost); function bindLoginPost(evt)

【JS】JavaScript中的执行环境与作用域

JavaScript中的执行环境定义了变量或函数有权访问的数据(每个函数都有自己的执行环境),全局执行环境是最外围的执行环境,在浏览器中,全局执行环境就是window对象,所以所有的全局变量和函数都是作为window对象的属性和方法创建的.当某一个执行环境中所有代码执行完成后,该环境就被销毁,保存在其中的变量和函数也将被销毁,全局执行环境在关闭网页或浏览器时才被销毁. 当代码在一个环境中执行时,会创建变量对象的一个作用域链(保证对执行环境有权访问的变量和函数的有序访问),如果环境是函数,将其活动

【JS】JavaScript中对象的创建与原型模式

 ECMAScript中没有类的概念,因此它的对象与基于类的语言中的对象有所不同. 1.理解对象 创建对象最简单的方式是创建一个Object实例,再为它添加属性和方法,如下: <span style="font-family:SimSun;font-size:12px;">var people = new Object(); people.age = 20; people.sayAge = function(){ alert(this.age); };</span

使用Ajax在javascript中调用后台C#函数

最近一段时间在紧跟一个网站的项目,数据库中用户表的UserName要求是唯一的,所以当用户选定一个用户名进行注册时要首先检查该用户名是否已被占用,并给出提示.起初的实现是:用户填写完注册表单提交后,在后台进行验证.但看到很多网站的设计是当用户填写完用户名,TextBox失去焦点后就会立即给出提示,比如https://passport.csdn.net/account/register,反应很迅速,应该是在前台进行检查的.今天花了些时间针对这一点查了一些资料. js调用后台C#函数检测用户名时需要

[CefSharp] 如何在JavaScript中调用C#代码

本例在WinForms下实现,具体流程与WPF一致. 本例仅供调用示例,不代表正常业务书写流程. 1. 创建WinForms项目,并将项目属性设置为x86平台 此处预先设置,避免引用时报错,再花更多的时间去改平台. 若有其他需求,可参考官方any cpu解决方案. 2. 首先项目中引用 CefSharp.WinForms 3. 创建一个简单的HTML文件 <button onclick="c()">点我</button> <script> // 老式

Hybrid App开发模式中, IOS/Android 和 JavaScript相互调用方式

IOS:Objective-C 和 JavaScript 的相互调用 iOS7以前,iOS SDK 并没有原生提供 js 调用 native 代码的 API.但是 UIWebView 的一个 delegate 方法使我们可以做到让 js 需要调用时,通知 native.在 native 执行完相应调用后,可以用stringByEvaluatingJavaScriptFromString 方法,将执行结果返回给 js.这样,就实现了 js 与 native 代码的相互调用.具体让 js 通知 na

ASP.NET4.0中JavaScript脚本调用Web Service 方法

环境:VS2019  .net 4.0 framework 根据教材使用ScriptManager在JavaScript中调用Web service 时,失败.现将过程和解决方法记录如下: 1.定义Web Service using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; namespace AjaxTest1 { /// <

bug日记之---------js中调用另一个js中的有ajax的方法, 返回值为undefind

今天做一个OCR授权的需求, 需要开发一个OCR弹框, 让用户选择是否授权给第三方识别公司(旷世科技)保存和识别用户个人信息, 照片等. 其中用到了在一个js的方法中调用另外一个js的方法, 其中有一点特别的是另外一个js的方法中会进行一个ajax, 会根据ajax返回的结果来进行返回true或者false. 在测试的过程中我发现不管怎么弄, 最后返回的都是undefind. 下面来模拟一下这个场景 上面这个例子中,flag一直都是undefind,ajax已经是同步的情况下依旧返回undefi

ios开发,javascript直接调用oc代码而非通过改变url回调方式

之前一个ios项目中,需要通过UIWebview来打开一个静态页面,并在静态页面中 调用相关object-c代码. 一.以前使用js调用object-c的方法 关于如何使用javascript调用object-c中的函数和方法,我搜索了好久 网上所有的方法,基本都指明了一个方向,那就是在UIWebview中载入的js代码中 通过改变document.locations="",然后回调UIWebview的 -(BOOL)webView:(UIWebView *)webView shoul