1. Python技术站首页
  2. 其他
  3. JavaScript

WebAssembly初尝试

• JavaScript
yizhihongxing

前言

  • 之前老是听别人提到WebAssembly这个词，一直对其比较模糊，不能理解是个啥东西，后来自己实践了一下，发现其实就是一种提高代码性能的手段。

简介

  • WebAssembly 是一种运行在现代网络浏览器中的新型代码，并且提供新的性能特性和效果。它设计的目的不是为了手写代码而是为诸如 C、C++和 Rust 等低级源语言提供一个高效的编译目标。（解释来自MDN）
  • 通俗一点来讲，就是利用一些C、C++、Rust等偏底层的一些语言去实现部分功能并编译成二进制文件然后暴露给第三方平台（可能是浏览器端，也可能是服务端，还有可能是客户端），可以丰富和优化相关的应用。
  • 当然了，其实也有类似asm.js这种非底层语言去实现，但是它编译后的二进制文件减少了编译的过程，其实也是可以提高代码的性能。

开始尝试

准备工作

开始

  • 使用上面安装好的wasm-pack新建一个空项目，wasm-pack new test-webassembly。
  • 查看目录结构

    test-webassembly

    src

    lib.rc // 主入口
    utils.rs // 依赖的工具方法

    tests

    web.rs // 测试文件

    .appveyor.yml // 项目的前置依赖配置

    .gitignore // git忽略的文件配置

    .travis.yml // 该项目的CI环境配置文件

    cargo.toml // 该项目的配置文件，类似package.json

    README.md // 解释文件

重点文件分析

  • lib.rs，默认自带的这个文件只实现了一个greet方法，并暴露给了浏览器端，里面调用了alert方法。 
    use wasm_bindgen::prelude::*; // 引入wasm_bindgen::prelude下所有的类和方法

#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT; // 一般不需要用，可以选择注释

#[wasm_bindgen]
extern {
    fn alert(s: &str); // 表示第三方环境可以直接用的方法定义，编译的时候会直接去调用第三方环境中的同名方法
}

#[wasm_bindgen] // 类似ts中的装饰器，打上这个标签，表示是需要与第三方环境去交互的，通俗一点，就是这个地方会被打包到第三方环境中。
pub fn greet() {
    alert("Hello, test-webassembly!");
}
  • Cargo.toml，这个文件主要就是一些项目配置信息了。 
    [package]
name = "test-webassembly" // 包名
version = "0.1.0" // 包版本
authors = ["xxx"] // 作者名
edition = "2018" // rust版本

[lib] // target设置，类似webpack种的target，将其打包成什么样的包
crate-type = ["cdylib", "rlib"] // 分别代表动态系统库和rust静态库

[features] // 用来条件编译
default = ["console_error_panic_hook"] // 这个可以删掉不需要

[dependencies]
wasm-bindgen = "0.2.63" // 这个就是主要的处理rust代码转化成webassembly的包

# The `console_error_panic_hook` crate provides better debugging of panics by
# logging them with `console.error`. This is great for development, but requires
# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
# code size when deploying.
# console_error_panic_hook = { version = "0.1.6", optional = true } 这个其实如果不是特别需要也可以不用

# `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size
# compared to the default allocator's ~10K. It is slower than the default
# allocator, however.
# wee_alloc = { version = "0.4.5", optional = true } 这个一般用不上，注释掉就可以

[dev-dependencies]
wasm-bindgen-test = "0.3.13" // 用来测试的包，自己写一般可以不用

[profile.release]
# Tell `rustc` to optimize for small code size.
opt-level = "s"

改造

接下来实现一个简单的图片处理工具，帮助web端更快的处理图片内容。

  1. 会用到image这个rust包。所以先改造它的Cargo.toml。
[dependencies]
wasm-bindgen = "0.2.63"
// 在之前的dependencies下面添加image包
image = "0.24.6"
  1. 就以处理图片的其中内置的一个灰度方法来看一下。接下来改造lib.rs文件。
// 新增一个灰度方法，接受一个字节类型的集合，返回一个新的字节类型的集合
#[wasm_bindgen]
pub fn gray(_array: &mut [u8]) -> Vec<u8> {
    let mut img = image::load_from_memory(_array).unwrap(); // 将传入的u8集合转化成一个image对象
    img = img.grayscale(); // 调用第三方包的灰度方法得到新的图片
    let mut bytes: Vec<u8> = Vec::new(); // 定义一个新的u8集合
    img.write_to(&mut Cursor::new(&mut bytes), image::ImageOutputFormat::Png).unwrap(); // 将变换后的image转化成新的u8集合
    bytes // 将u8集合作为返回值抛出
}
  1. 运行命令wasm-pack build --release --target web，将rust文件打包成目标为web项目的可用二进制文件以及加载的js文件。可以看到项目多了一个pkg文件夹

    pkg

    .gitignore
    package.json
    README.md
    test_webassembly_bg.wasm // 二进制文件
    test_webassembly_bg.wasm.d.ts
    test_webassembly.d.ts
    test_webassembly.js // 这个就是加载这个二进制的文件

// test_webassembly.js这个文件主要看几个重点地方，其实不看也行，这个地方wasm-pack已经帮你处理好了，基本只需要学会用就行
// 加载二进制后的处理，返回暴露出的模块的实例
async function load(module, imports) {
    if (typeof Response === 'function' && module instanceof Response) {
      // 在支持instantiateStreaming的情况下，优先使用instantiateStreaming加载对应的二进制文件
        if (typeof WebAssembly.instantiateStreaming === 'function') {
            try {
                return await WebAssembly.instantiateStreaming(module, imports); 
            } catch (e) {
                if (module.headers.get('Content-Type') != 'application/wasm') {
                    console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
                } else {
                    throw e;
                }
            }
        }

        const bytes = await module.arrayBuffer();
        return await WebAssembly.instantiate(bytes, imports);

    } else {
      // 不支持的时候，就使用instantiate文件来加载
        const instance = await WebAssembly.instantiate(module, imports);

        if (instance instanceof WebAssembly.Instance) {
            return { instance, module };

        } else {
            return instance;
        }
    }
}
// 针对已经解析完的实例，做一些初始化操作，抛出模块实例的exports
function finalizeInit(instance, module) {
    wasm = instance.exports;
    init.__wbindgen_wasm_module = module;
    cachedInt32Memory0 = null;
    cachedUint8Memory0 = null;


    return wasm;
}
// 文件暴露的入口
async function init(input) {
    if (typeof input === 'undefined') {
        input = new URL('test_webassembly_bg.wasm', import.meta.url); // 默认的二进制文件地址
    }
    const imports = getImports();

    if (typeof input === 'string' || (typeof Request === 'function' && input instanceof Request) || (typeof URL === 'function' && input instanceof URL)) {
        input = fetch(input); // 加载对应的二进制文件
    }

    initMemory(imports); // 这个就是之前上面申请空间的，可以注释掉的，不用看

    const { instance, module } = await load(await input, imports); // 调用webassembly的api去加载二进制文件

    return finalizeInit(instance, module); // 得到模块中抛出的exports
}

在html中使用，新建一个index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" multiple="false" id="file">

    <div id="box"></div>
    <div>
        <button id="gray-btn">灰度</button>
    </div>
    <div id="target"></div>

    <script type="module">
        import init, { gray } from './pkg/test_webassembly.js';

        await init();

        const file = document.getElementById('file');
        const grayBtn = document.getElementById('gray-btn');
        let current = null;
        let uint8Array = [];
        file.addEventListener('change', (e) => {
            current = e.target.files[0];
            var reader = new FileReader(); 
            reader.readAsDataURL(current);
            reader.onload = function() {
                const img = new Image();
                img.src = this.result;
                document.querySelector('#box').appendChild(img);
            }
        });
        grayBtn.addEventListener('click', () => {
            var reader = new FileReader();
            reader.readAsArrayBuffer(current);
            reader.onload = function () {
                uint8Array = new Uint8Array(this.result);
                let newUnit8Array = gray(uint8Array); // 调用webassembly提供的灰度方法获取到灰度之后的结果

                const img = new Image();
                let blob = new Blob([newUnit8Array], { type: 'image/png' });
                img.src = window.URL.createObjectURL(blob);
                document.querySelector('#target').appendChild(img);
            }
        })
    </script>
</body>
</html>

使用npx http-server --port 3000启动静态服务器，因为webassembly是不支持本地的文件的，下面就是最终效果，先选择一张图片，之后点击灰度就能快速得到一张灰度的图片

WebAssembly初尝试

小结

  • WebAssembly是一个很有意思的技术方向，它为web应用提供了很多可能，图片处理，视频解析、加密等等一些复杂的场景都可以变得更轻便化。

原文链接：https://www.cnblogs.com/aloneMing/p/17318823.html

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：WebAssembly初尝试 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年4月17日
下一篇 2023年4月17日

相关文章

  • JavaScript对JSON数组简单排序操作示例

    下面是针对“JavaScript对JSON数组简单排序操作”的完整攻略。 一、什么是JSON数组 JSON数组（JavaScript Object Notation Array）是一种数据格式，是JavaScript语言中的一种数据结构，它用于存储一组相关类型的数据，这些数据以键值对的形式存储，基本格式为：[key:value]。其中，键表示属性名称，值表示…

    JavaScript 2023年5月27日
    00

  • js删除数组元素、清空数组的简单方法(必看)

    JavaScript删除数组元素和清空数组的简单方法 在JavaScript中，删除数组元素和清空数组的操作并不像其他编程语言那样简单。不过，在掌握了一些技巧和方法后，我们就能够轻松实现这些操作了。 删除数组元素 splice方法 JavaScript提供了splice()方法，该方法可以用于删除数组元素。 array.splice(start, delet…

    JavaScript 2023年5月27日
    00

  • js选择并转移导航菜单示例代码

    下面是js选择并转移导航菜单的攻略。首先我们需要明确一下我们需要做的事情，即从一个导航菜单中选择若干个元素，并将这些元素转移至另一个导航菜单中。具体实现步骤如下： 1. 准备工作 首先在HTML文档中，我们需要准备两个导航菜单的容器元素，以及一个按钮元素用于触发选中操作。例如，我们可以按照以下代码编写容器元素： <div class="con…

    JavaScript 2023年6月11日
    00

  • JAVASCRIPT对象及属性

    JAVASCRIPT 对象及属性攻略 什么是JAVASCRIPT对象？ JavaScript 对象 通常是指“拥有属性和方法的数据”。一个 JavaScript 对象可以被创建为一个单独的对象，但也可以通过构造函数来创建多个对象。每一个 JavaScript 对象都包含了键值对。 对象属性通常是一些字符串，也被称为对象的键。它们与键相关联的值可以是任何数据类…

    JavaScript 2023年5月27日
    00

  • javascript学习随笔(使用window和frame)的技巧

    JavaScript学习随笔：使用Window和Frame的技巧 在本文中，我们将深入了解JavaScript中Window和Frame对象的使用技巧。这些对象是JavaScript中最基本的对象之一，也是Web开发必不可少的一部分。本文将涵盖以下内容： Window对象和Frame对象的区别 如何访问和操作窗口对象 如何访问和操作框架(Frame)对象 示…

    JavaScript 2023年6月11日
    00

  • JavaScript正则表达式exec/g实现多次循环用法示例

    一、JavaScript正则表达式exec/g基础语法 JavaScript正则表达式是用来匹配字符模式的。exec/g是JavaScript正则表达式测量效率上优秀的方法，可以实现多次循环用法。下面是exec/g语法的具体用法： RegExp对象.exec(字符串); RegExp对象是指正则表达式对象。 执行exec()方法时需要输入要匹配的字符串作为参…

    JavaScript 2023年6月10日
    00

  • js进行表单验证实例分析

    下面就来详细讲解“js进行表单验证实例分析”的完整攻略。 1. 前言 在web开发中，表单验证是非常重要的一部分。它能够让用户输入合法的数据、提升网站的可用性、增强用户体验。而JavaScript是现代Web开发中应用最为广泛的脚本语言之一，提供了很多方法和工具用于表单验证。 2. 表单验证的实现 为了实现表单验证，我们需要使用HTML和JavaScript…

    JavaScript 2023年6月10日
    00

  • js实现文件上传功能 后台使用MultipartFile

    当我们需要在网站中实现文件上传的功能时，可以使用JavaScript来实现前端的交互效果，同时后台使用Spring框架提供的MultipartFile类来处理文件上传。 具体实现步骤如下： 1.在前端HTML页面中，需要提供一个文件上传的表单，并且绑定一个JavaScript的事件，用来监听用户上传的文件。HTML代码示例： <form action=…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部