关于webassembly:初识WebAssembly

近期线上收实验报告的时候，学生们上传的图片乌七八糟的。前期提醒应用扫描王等软件解决后再上传成果好了很多。但无疑这给学生了带来了相应的繁琐。于是：如何在 WEB 能疾速的解决图片，并实时的显示成果成为了新的需要。

首先，咱们能够点击 demo 感受一下它的魅力。

而解决图片往往都在后端执行，间接在 WEB 解决则须要一个叫 WebAssembly 的常识，简略来说就是浏览器容许运行二进制的文件，而这个二进制的文件则是各种原后端语言通过编译器编译进去的。

所以能够用 C ++ 来写一个图片处理程序，并应用 WebAssembly 把它利用到浏览器中便成了解决方案。

本文在 macos 下，演示如何把 Hello world 运行在浏览器中。

要想把 C ++ 源码编译成浏览器能够运行的 WebAssembly , 则须要一些编译器，而 Emscripten 则属于其中的一个。

docker 无疑是最简略的装置形式，官网 image 提供了多个版本供咱们抉择。

咱们在应用前仅仅须要下载相应的 image 即可，比方咱们下载最新的版本：

 % docker  pull emscripten/emsdk

而后咱们进行文件夹映射，并执行容器中的 emcc 命令即可，比方：

docker run --rm -v $(pwd):/src -u $(id -u):$(id -g) \
  emscripten/emsdk emcc helloworld.cpp -o helloworld.js

则示意将以后门路下的 helloworld.cpp 编译成 helloworld.js

装置 Emscripten 须要从 github 下载相当的代码，并执行相应的操作，

环境要求：

macOS 10.14 Mojave 及以上
装置 Xcode Command Line Tools
装置 git
装置 cmake

命令如下：

# 下载代码
$ git clone https://github.com/emscripten-core/emsdk.git --depth=1
# 进入下载的文件夹
$ cd emsdk
# 执行装置命令，因为这个操作会从网下下载相应的第三方安装包，所以这可能须要一个比拟敌对的网络
$ ./emsdk install latest
# 源活咱们刚刚装置的 latest 版本
$ ./emsdk activate latest
# 源活环境变量，每启动一新的 shell，都要执行一次
$ source ./emsdk_env.sh

验证：

创立以下文件：

#include <stdio.h>

int main() {printf("Hello World\n");
    return 0;
}

咱们新建 hello.c 文件

#include <stdio.h>

int main() {printf("Hello World\n");
    return 0;
}

而后执行emcc hello.c -o hello.html

panjie@panjies-Mac-Pro src $ emcc hello.c -o hello.html
shared:INFO: (Emscripten: Running sanity checks)
cache:INFO: generating system asset: symbol_lists/ed436b369ffc02205671a0a9df422f9da2cf641b.txt... (this will be cached in "/Users/panjie/github/emscripten-core/emsdk/upstream/emscripten/cache/symbol_lists/ed436b369ffc02205671a0a9df422f9da2cf641b.txt" for subsequent builds)
cache:INFO:  - ok

而后咱们就失去了一个 html 文件，一个 js 文件以及一个 wasm 文件：

panjie@panjies-Mac-Pro src % ls
hello.c        hello.html    hello.js    hello.wasm

接着咱们起一个 http-server，并在浏览器中查看成果：

panjie@panjies-Mac-Pro src % http-server
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8081
  http://192.168.0.242:8081
Hit CTRL-C to stop the server

如果你是用的 docker，则能够如下执行：

panjie@panjies-Mac-Pro src % docker run --rm -v $(pwd):/src -u $(id -u):$(id -g) emscripten/emsdk emcc hello.c -o hello.html      
cache:INFO: generating system asset: symbol_lists/ed436b369ffc02205671a0a9df422f9da2cf641b.txt... (this will be cached in "/emsdk/upstream/emscripten/cache/symbol_lists/ed436b369ffc02205671a0a9df422f9da2cf641b.txt" for subsequent builds)
cache:INFO:  - ok

最初的成果是统一的。

.c 文件编译后生成了 3 个新的文件，html 文件用于展现页面并且调用 js 文件，js 文件则充当获取二进制文件，装载二进制文件，调用二进制文件并获取返回值的目标，而 wasm 则是浏览器间接执行的二进制文件。该文件由 c 语言编译而来，能够兼顾性能与效率，重要的是本来一些只能反对在应用程序中的性能，能够被移植到浏览器中来了。

Emscripten 的 github 源码中，为咱们提供了自定义的 html 模板，上面咱们将 HelloWorld 输出到这个自定义的模板中。

首先咱们在以后文件夹中建设子文件夹 html_template，并将位于 Emscripten 的 github 源码文件夹中的 /upstream/emscripten/src/shell_minimal.html复制到 html_template 文件夹。

panjie@panjies-Mac-Pro src % tree
.
├── hello.c
├── hello.html
├── hello.js
├── hello.wasm
└── html_template
    └── shell_minimal.html

1 directory, 5 files

接着咱们执行如下命令：

panjie@panjies-Mac-Pro src %  docker run --rm -v $(pwd):/src -u $(id -u):$(id -g) emscripten/emsdk emcc  -o hello1.html hello.c -O3 --shell-file html_template/shell_minimal.html
cache:INFO: generating system asset: symbol_lists/812dbbffa7488aec7a503446fae422688638f439.txt... (this will be cached in "/emsdk/upstream/emscripten/cache/symbol_lists/812dbbffa7488aec7a503446fae422688638f439.txt" for subsequent builds)
cache:INFO:  - ok

留神，下面的命令中 O3 不是03.

此时，便会应用模模板 html_template/shell_minimal.html 来生成hello1.html，应用 http-server 起个服务后查看后果如下：

如果咱们将以后的网络模仿成慢速 3G:

则会发下如下启动过程：

先下载

再筹备

最初才是出现后果

申请的时序如下：

如果咱们开启缓存，那么整体申请将会敌对的多：

通过 shell_minimal.html 模板的学习，咱们简略的把要害的信息拿进去学习一下。首先是 CSS 款式局部，该部门次要用于管制页面显示，咱们临时略过。

上图这个 html 基本上能够分为两个局部，第一局部是图像 UI 输入，第三局部是 sheel 控制台输入。比方咱们的 hello.c，并没有输入任何图像，而是间接打印了 Hello World，所以上述图像就输入了一个黑框框。

在模板中，用于输入图像的标签是canvas:

<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>

而用于输入 shell 信息的是textarea

<textarea class="emscripten" id="output" rows="8"></textarea>

而以下的 script 代码的作用起的是连接的作用：加载.c，运行.c，输入.c 的后果。

    <script type='text/javascript'>
      // 获取三个 dom，别离用于显示 状态、进度，以及 loading 时转圈圈
      var statusElement = document.getElementById('status');
      var progressElement = document.getElementById('progress');
      var spinnerElement = document.getElementById('spinner');

      // 订义一个对象，该对象的各个属性办法都是 WebAssembly 规定好的
      var Module = {
        // 运行前执行的
        preRun: [],
        // 运行后执行的
        postRun: [],
        // 输入后果
        print: (function() {
          // 获取用于输入后果的 textarea DOM
          var element = document.getElementById('output');
          if (element) element.value = ''; // 清空 textarea 中的内容
          // 返回 function 供 hello.js 调用，hello.js 会在执行 hello.c 后调用该函数，并把执行 hello.c 后果做为参考 text 传入
          return function(text) {
            // arguments 的上下文位于 hello.js 中，字段意思看是 调用参数. 如果调用的参数大于 1，则重写 text 的为 arguments 数组
            if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
            // 上面这几行就给出的示例，次要是用于替换 html 中的关键字，比方 < 应用 &lt; 来替换
            //text = text.replace(/&/g, "&amp;");
            //text = text.replace(/</g, "&lt;");
            //text = text.replace(/>/g, "&gt;");
            //text = text.replace('\n', '<br>', 'g');
            console.log(text);
            // 向 textarea 中输入内容，并调焦点设置为 textarea 的底部
            if (element) {
              element.value += text + "\n";
              element.scrollTop = element.scrollHeight; // focus on bottom
            }
          };
        })(),
        // 输入图像
        canvas: (function() {
          // 获取 canvas
          var canvas = document.getElementById('canvas');

          // 浏览器对图像的渲染基于 webgl，所以做一个默认的初始化选项，// 为了保障程序的健壮性，咱们应该在 webgl 上下文失落时，揭示用户从新刷新界面
          // 原文如下：// As a default initial behavior, pop up an alert when webgl context is lost. To make your
          // application robust, you may want to override this behavior before shipping!
          // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
          canvas.addEventListener("webglcontextlost", function(e) {alert('WebGL context lost. You will need to reload the page.'); e.preventDefault();}, false);

          // 将这个 canvas 返回给 hello.js，hello.js 则会将图像输入到这个 canvas 上
          return canvas;
        })(),
        // 设置状态(比方开始下载、下载的百分比，筹备结束)，这个应该不是 WebAssembly 的官网接口，而是自定义的
        setStatus: function(text) {
          // 设置个最初更新工夫
          if (!Module.setStatus.last) Module.setStatus.last = {time: Date.now(), text: '' };
          // 如果更新内容与最初的更新内容雷同，则什么也不做
          if (text === Module.setStatus.last.text) return;
          // 判断传入的是否为下载的百分比（进度）var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
          var now = Date.now();
          // 如果传入的是下载百分比，而且间隔上次传入的工夫小于 30ms，则什么也不做。if (m && now - Module.setStatus.last.time < 30) return; // if this is a progress update, skip it if too soon
          // 设置最初的工夫及最初的文本
          Module.setStatus.last.time = now;
          Module.setStatus.last.text = text;

          if (m) {
            // 传入的是下载百分比，则格式化
            text = m[1];
            progressElement.value = parseInt(m[2])*100;
            progressElement.max = parseInt(m[4])*100;
            progressElement.hidden = false;
            spinnerElement.hidden = false;
          } else {
            // 不是百分比，则清空进度值
            progressElement.value = null;
            progressElement.max = null;
            progressElement.hidden = true;

            // 当 text 为空时，暗藏掉 spinner
            if (!text) spinnerElement.hidden = true;
          }
          // 最初设置状态元素的内容
          statusElement.innerHTML = text;
        },
        // 总依赖数
        totalDependencies: 0,
        // 监督运行依赖项，该办法会被距离调用，用于告诉以后加载的进度
        // @param left 残余依赖项
        monitorRunDependencies: function(left) {// 未加载结束，则设置状态为 Preparing... (已加载数 / 未加载数)；否则显示 All downloads complete
          this.totalDependencies = Math.max(this.totalDependencies, left);
          Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
        }
      };

      // 设置起始状态
      Module.setStatus('Downloading...');
      // 设置下异样的回调
      window.onerror = function() {Module.setStatus('Exception thrown, see JavaScript console');
        spinnerElement.style.display = 'none';
        Module.setStatus = function(text) {if (text) console.error('[post-exception status]' + text);
        };
      };
    </script>

模板最初存在的 {{{SCRIPT}}} 则用于替换为 js 文件的援用。如此，咱们先申明了合乎 WebAssembly 接口的对象 Module，而后引入了 js 文件，而 js 文件则会利用这个刚刚申明的 Module。这样一来，WebAssembly 的 JS 文件更与以后页面联合起来了。

为了验证后面的假如，咱们上面来如下自定义模板并命名为sample.html，同是样存到 html_template 文件夹中：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WebAssembly</title>
</head>
<body>
    <div style="margin-left: auto; margin-right: auto; width: 400px; margin-top:10em; text-align: center;">
        <p id="output"> 这里是输入的内容 </p>
    </div>
    <script type="text/javascript">
      // 订义一个对象，该对象的各个属性办法都是 WebAssembly 规定好的
      var Module = {preRun: [],
        postRun: [],
        // 输入后果
        print: (function() {
          // 获取用于输入后果的 textarea DOM
          var element = document.getElementById('output');
          if (element) element.innerHTML = '';
          return function(text) {if (element) {element.innerHTML += text;}
          };
        })(),
        totalDependencies: 0,
        monitorRunDependencies: function(left) {console.log(left);
        }
      };

      // 设置下异样的回调
      window.onerror = function() {alert('error');
      };
    </script>
    {{{SCRIPT}}}
</body>
</html>

而后咱们运行以下命令来将 hello.c 渲染进来：

docker run --rm -v $(pwd):/src -u $(id -u):$(id -g) emscripten/emsdk emcc  -o sample.html hello.c -O3 --shell-file html_template/sample.html

最初咱们将失去以 sample 打头的 js html 以及 wasm 文件，运行 http-server 并查看：

最初咱们再看看如何调用.cpp 文件中的函数，咱们简略用 c ++ 语言写个求开平方，并把它利用 html 页面中。官网文档指出调用 C 语言中 function 最简略的办法便是应用 ccall 以及 cwrap.

ccall() 应用指定的参数来调用一个编译后的 C 函数，而 cwrap() 则是把 C 中的函数包裹成 js 的函数，而后再像调用一般的 js 函数一样来进行调用。所以如果咱们只想调用一次，那么用 ccall 就好了，如果咱们想屡次调用，则建设应用 cwarp 来封装一下。

创立一个 sqrt.cpp 文件并退出以下代码：

#include <math.h>

// 兼容 C++
extern "C" {int int_sqrt(int x) {return sqrt(x);
    }
}

接下来咱们将其编译为 js wasm 文件，须要留神的是:

本次咱们是先编译，而后再写模板，所以咱们把指标文件设置为 sqrt.js，而非 sqrt.html
咱们须要指定编译的办法，并以 _ 打头
咱们须要指定 ccall、cwarp

docker run --rm -v $(pwd):/src -u $(id -u):$(id -g) emscripten/emsdk emcc sqrt.cpp -o sqrt.js -sEXPORTED_FUNCTIONS=_int_sqrt -sEXPORTED_RUNTIME_METHODS=ccall,cwrap

最终将生成 js 及 wasm 两种类型的文件。

最初，咱们写个 html 代码来尝试调用一下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 加法器 </title>
</head>
<body style="margin-left:auto; margin-right:auto; width: 800px;">
    <div> 请输出:<input type="number" id="num"/></div>
    <div> 后果：<p id="output"></p></div>
    <button onclick="sqrt()"> 运算 </button>

    <script type="text/javascript">
        // 订义一个对象，该对象的各个属性办法都是 WebAssembly 规定好的
        var Module = {};

        // 设置下异样的回调
        window.onerror = function() {alert('error');
        };

        // 获取输出、输入
        var num = document.getElementById("num");
        var output = document.getElementById("output");

        // 定义开平方办法
        var sqrt = function() {
            // 调用 c ++ 中的 int_sqrt 办法
            const result = Module.ccall(
                "int_sqrt",     // 办法名
                "number",       // 返回值类型
                ["number"],     // 参数类型，这是个数组，因为可能是多参数
                [+num.value]    // 参数值，也是个数组，因为可能是多参数
              );
            // 最初将后果给 html 元素
            output.innerHTML = result;
        }
    </script>
    <!-- 手动援用 js 文件 -->
    <script async src=sqrt.js></script>
</body>
</html>

最初咱们再测试下 cwrap :

<script type="text/javascript">
        let intSqrt;
        // 订义一个对象，该对象的各个属性办法都是 WebAssembly 规定好的
        var Module = {monitorRunDependencies: function(left) {
                // 加载结束后初始化 iniSqrt 办法
                if (left === 0 && !intSqrt) {intSqrt = Module.cwrap('int_sqrt', 'number', ['number'])
                }
            }
        };

        // 设置下异样的回调
        window.onerror = function() {alert('error');
        };

        // 获取输出、输入
        var num = document.getElementById("num");
        var output = document.getElementById("output");

        // 定义开平方办法
        var sqrt = function() {
            // 间接调用 intSqrt 办法
            output.innerHTML = intSqrt ? intSqrt(+num.value) : '';
        }
    </script>

最终实现成果雷同。

WebAssembly 是个变革性的货色，有人说它将引领下一代 WEB 开发，它的呈现使得本来仅能装置客户端能力实现在性能，当下能够间接在 WEB 端来应用了。同时因为其编译为 2 进制的个性，在保障了性能的同时能提供了足够的安全性。

关于webassembly:初识WebAssembly

Emscripten

docker（举荐）

macos

验证

剖析

编译至指定模板

自定义模板

学习 DEMO

自定义模板

函数

总结