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. TensorFlow的学习

    1.先判断python的版本(因为有些python版本自带pip,可以参考我写的对pip的认识的博客文章),选择是否安装pip,然后安装更新tensorflow如:sudo pip install - ...

  2. 分享一下10个常用jquery片段

      1. 图片预加载 (function($) { var cache = []; // Arguments are image paths relative to the current page. ...

  3. wget---从指定的URL下载文件

    wget命令用来从指定的URL下载文件.wget非常稳定,它在带宽很窄的情况下和不稳定网络中有很强的适应性,如果是由于网络的原因下载失败,wget会不断的尝试,直到整个文件下载完毕.如果是服务器打断下 ...

  4. Extjs, 使用GridPanel出现 Layout run failed

    当GridPanel被加入到容器,且容器的layout为vbox时候, 会出现 Layout run failed 后者GridPanel的尺寸没有撑满父容器 网上找到的解决的方法是.要给父容器设置一 ...

  5. apue和unp的学习之旅07——多种边界条件的讨论

    了解一些边界条件,通过观察这些情形,弄清在网络层次发生什么以及它们怎样反映到套接字api,这将很多其它地理解这些层次的工作原理,体会怎样编写应用程序来处理这些情形. //--------------- ...

  6. ubuntu-date命令的使用

    date命令是关于时间的命令.它可以用来查看.更改系统时间 它的基本格式为 date "+ %H" 注意 "+"是不可以省略的.结果如下 zhangshuli@ ...

  7. GestureDetector- 滑屏手势方式实现

    今天做的项目中,需要使用滑屏来调出一个界面,经过自己的尝试,结合网上的方法,成功实现了. 代码如下 package com.example.text; import android.app.Activ ...

  8. 新手前端笔记之--初识css

    css样式表是为了容纳与html文档分离出来的样式属性而产生的,所以她理所当然的包含两个部分:1.样式的表示,使用{属性1:属性值:属性2:属性值:...},2.样式与标签的对应(如何找的对应标签), ...

  9. map(froeach改变值,map生成新数组)

    http://www.365mini.com/page/jquery-map.htm <input id="n1" name="uid" type=&qu ...

  10. Android Studio使用Mob来获取手机验证码的源码

    本文来自:CSDN 感谢作者:qq_35812301(其实就是我的号!) 查看原文:http://blog.csdn.net/qq_35812301/article/details/79150775 ...