We write a function that converts a string to lowercase in WebAssembly, demonstrating how to set the input string from JavaScript.

WASM Fiddle: https://wasdk.github.io/WasmFiddle/?h1s69

Demo Repo: https://github.com/guybedford/wasm-intro

We want to create a funcrtion 'toLowerCase', which enable JS to write in Memory.

To write data into WASM, we need to variables in C code, one is 'inStr' which get original input (for example 'Hello World'), another is 'outStr' which will transform to lower case string (for example: 'hello world').

C code:

void consoleLog (char* offset, int len);

char inStr[];
char outStr[]; char* getInStrOffset () {
return &inStr[];
} void toLowerCase() {
for (int i = ; i < ; i++ ) {
char c = inStr[i];
if (c > && c < ) {
c = c + ;
}
outStr[i] = c;
}
consoleLog(&outStr[], );
}

JS: Some code to get wasm instance.

var wasmModule = new WebAssembly.Module(wasmCode);
var wasmInstance = new WebAssembly.Instance(wasmModule, {
env: {
consoleLog (offset, len) {
const strBuf = new Uint8Array(mem.buffer, offset, len);
log(new TextDecoder().decode(strBuf));
}
}
});
const mem = wasmInstance.exports.memory;

Now we need to write data from JS to WASM memory, the way to do it is just to put data into 'inStr':

const mem = wasmInstance.exports.memory;

function writeString (str, offset) {
const strBuf = new TextEncoder().encode(str);
const outBuf = new Uint8Array(mem.buffer, offset, strBuf.length); for (let i = 0; i < strBuf.length; i++) {
outBuf[i] = strBuf[i];
}
}
} writeString('Hello Web Assembly', wasmInstance.exports.getInStrOffset());

Because what 'wasmInstance.exports.getInStrOffset()' return us is the first char address of 'inStr', then we use for loop to write data into 'inStr'.

After writting the data, then we can call 'toLowerCase' to see the result:

var wasmModule = new WebAssembly.Module(wasmCode);
var wasmInstance = new WebAssembly.Instance(wasmModule, {
env: {
consoleLog (offset, len) {
const strBuf = new Uint8Array(mem.buffer, offset, len);
log(new TextDecoder().decode(strBuf));
}
}
});
const mem = wasmInstance.exports.memory; function writeString (str, offset) {
const strBuf = new TextEncoder().encode(str);
const outBuf = new Uint8Array(mem.buffer, offset, strBuf.length); for (let i = 0; i < strBuf.length; i++) {
outBuf[i] = strBuf[i];
}
}
} writeString('Hello Web Assembly', wasmInstance.exports.getInStrOffset());
wasmInstance.exports.toLowerCase();

[WASM] Write to WebAssembly Memory from JavaScript的更多相关文章

  1. [WASM] Read WebAssembly Memory from JavaScript

    We use an offset exporting function to get the address of a string in WebAssembly memory. We then cr ...

  2. WebAssembly是解决JavaScript 痼疾的银弹?

    写在前面 <没有银弹>是 Fred Brooks 在 1987 年所发表的一篇关于软件工程的经典论文.该论文的主要论点是,没有任何一项技术或方法可以能让软件工程的生产力在十年内提高十倍. ...

  3. (翻译) How variables are allocated memory in Javascript? | scope chain | lexicial scope

    总结: 阅读下面文章需要15分钟 提问者的问题是JavaScript中内存是怎么分配的,在介绍的过程作者涉及计到了JS中 Scope Chain和调用函数call生成lexicial environm ...

  4. [WASM] Access WebAssembly Memory Directly from JavaScript

    While JavaScript has a garbage-collected heap, WebAssembly has a linear memory space. Nevertheless u ...

  5. ASP.NET Core Blazor WebAssembly 之 .NET JavaScript互调

    Blazor WebAssembly可以在浏览器上跑C#代码,但是很多时候显然还是需要跟JavaScript打交道.比如操作dom,当然跟angular.vue一样不提倡直接操作dom:比如浏览器的后 ...

  6. WebAssembly让你的Javascript计算性能提升70%

    现在的JavaScript代码要进行性能优化,通常使用一些常规手段,如:延迟执行.预处理.setTimeout等异步方式避免处理主线程,高大上一点的会使用WebWorker.即使对于WebWorker ...

  7. WebAssembly完全入门——了解wasm的前世今身

    前言 接触WebAssembly之后,在google上看了很多资料.感觉对WebAssembly的使用.介绍.意义都说的比较模糊和笼统.感觉看了之后收获没有达到预期,要么是文章中的例子自己去实操不能成 ...

  8. [WASM] Set up wasm-bindgen for easy Rust/JavaScript Interoperability

    Interoperability between JavaScript and Rust is limited to numerics and accessing memory directly. S ...

  9. JavaScript与WebAssembly进行比较

    本文由云+社区发表 作者:QQ音乐前端团队 在识别和描述核心元素的过程中,我们分享了构建SessionStack时使用的一些经验法则,这是一个轻量级但健壮且高性能的JavaScript应用程序,以帮助 ...

随机推荐

  1. js -- img 随着鼠标滚轮的变化变化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 【基础篇】EditText的一些属性设置

    设置EditText的背景颜色  private test_editText=null; test_editText= (EditText) findViewById(R.id.EditTextInp ...

  3. 错误日志写入到本地磁盘(lock 队列)

    今天照常在b站上看看编程:看到有讲错误日志处理的,自己没写过日志,就看看了看: 主要是在讲的时候牵扯到了队列和lock的知识点:这方面知识自己了解的更少,那就记录一下.

  4. Mysql数据库调优和性能优化

    1. 简介 在Web应用程序体系架构中,数据持久层(通常是一个关系数据库)是关键的核心部分,它对系统的性能有非常重要的影响.MySQL是目前使用最多的开源数据库,但是mysql数据库的默认设置性能非常 ...

  5. readonly&&declare&&unset &&export&&env环境变量

    readonly命令用于定义只读shell变量和shell函数.readonly命令的选项-p可以输出显示系统中所有定义的只读变量. 选项 -f:定义只读函数: -a:定义只读数组变量: -p:显示系 ...

  6. 如何优雅的写UI——(5)选项卡功能实现

    先在我们的选项卡可以说能用了,每个标签页都能点进去,但是这还远远没到能用的地步,比如说你把窗口最大化后. 立马就露出马脚了,所以这篇我们要先讲讲tabctrl的最基本的功能实现 改变选项卡大小 上图的 ...

  7. GridView-属性大全

    这是个网格控件 他的实现也是通过adapter来实现的,感觉跟listview在使用上并没有多大的区别 常见属性如下 1.android:numColumns=”auto_fit” //GridVie ...

  8. [51Nod]NOIP2018提高组省一冲奖班模测训练(二)

    http://www.51nod.com/contest/problemList.html#!contestId=73&randomCode=4408520896354389006 还是原题大 ...

  9. android图像处理系列之七--图片涂鸦,水印-图片叠加

    图片涂鸦和水印其实是一个功能,实现的方式是一样的,就是一张大图片和一张小点图片叠加即可.前面在android图像处理系列之六--给图片添加边框(下)-图片叠加中也讲到了图片叠加,里面实现的原理是直接操 ...

  10. 22. Node.Js Buffer类(缓冲区)-(二)

    转自:https://blog.csdn.net/u011127019/article/details/52512242