你想要的WebAssembly入门与实践

964次阅读  |  发布于4年以前

写在开头

WebAssembly是什么，可以吃吗？

官网介绍：

webAssembly的特点

高效

安全

开放

标准

正式开始(要凑字数,理解)

// Node.js主进程中调起子进程
 await screen_window();

//function screen_window
import { execFile } from 'child_process';
import path from 'path';
import ipcSend from '../main/utils/ipcSender';
function screen_window() {
  return new Promise((resolve, reject) => {
    const screen_window = execFile(path.resolve($dirname, '../screenshot/PrintScr.exe'));
    screen_window.on('exit', function(code) {
      if (code === 1) {
        ipcSend.insertImage();
      }
      resolve();
    });
  });
}

export default screen_window;

既然Node.js有拓展能力，那么浏览器环境呢？必然也需要

什么情况需要考虑到使用webAssembly?

怎么理解webAssembly这个技术?

在这里，我要强调一件事

如何编写webAssembly模块

WebAssembly.compile(new Uint8Array(`
  00 61 73 6d  01 00 00 00  01 0c 02 60  02 7f 7f 01
  7f 60 01 7f  01 7f 03 03  02 00 01 07  10 02 03 61
  64 64 00 00  06 73 71 75  61 72 65 00  01 0a 13 02
  08 00 20 00  20 01 6a 0f  0b 08 00 20  00 20 00 6c
  0f 0b`.trim().split(/[\s\r\n]+/g).map(str => parseInt(str, 16))
)).then(module => {
  const instance = new WebAssembly.Instance(module)
  const { add, square } = instance.exports

  console.log('2 + 4 =', add(2, 4))
  console.log('3^2 =', square(3))
  console.log('(2 + 5)^2 =', square(add(2 + 5)))

})

这里应该大家能看出来,webAssembly模块，其实就是二进制文件

如何加载/运行webAssembly模块?

使用webAssembly模块示例:

/**
 * @param {String} path wasm 文件路径
 * @param {Object} imports 传递到 wasm 代码中的变量
 */
function loadWebAssembly (path, imports = {}) {
  return fetch(path)
    .then(response => response.arrayBuffer())
    .then(buffer => WebAssembly.compile(buffer))
    .then(module => {
      imports.env = imports.env || {}

      // 开辟内存空间
      imports.env.memoryBase = imports.env.memoryBase || 0
      if (!imports.env.memory) {
        imports.env.memory = new WebAssembly.Memory({ initial: 256 })
      }

      // 创建变量映射表
      imports.env.tableBase = imports.env.tableBase || 0
      if (!imports.env.table) {
        // 在 MVP 版本中 element 只能是 "anyfunc"
        imports.env.table = new WebAssembly.Table({ initial: 0, element: 'anyfunc' })
      }

      // 创建 WebAssembly 实例
      return new WebAssembly.Instance(module, imports)
    })
}
loadWebAssembly('path/to/math.wasm')
  .then(instance => {
    const { add, square } = instance.exports
    // ...
  })

想要更深入了解的，可以参考下webAssembly和ffmpeg实现前端转码

self.importScripts('ffmpeg.js');
onmessage = function(e) {
  console.log('ffmpeg_run', ffmpeg_run);
  var files = e.data;
  console.log(files);
  ffmpeg_run({
    arguments: ['-i', '/input/' + files[0].name, '-b:v', '64k', '-bufsize', '64k', '-vf', 'showinfo', '-strict', '-2', 'out.mp4'],
    files: files,
  }, function(results) {
    console.log('result',results);
    self.postMessage(results[0].data, [results[0].data]);
  });
}

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8