webassembly - 如何将库编译成可以从 JavaScript 代码调用的 WebAssembly？

Question

我正在试验 WASM，我想将图片编码为 WebP 以学习 WASM。

我正在尝试编译 libwebp到单个 mjs 文件中。具体来说，encoding utility .我正在使用 Emscripten，因为我想在 WebAssembly 的 Web 应用程序中运行它。我正在编译它作为 <script src=foobar> 导入文件。

这是我目前所拥有的:

two@develop ...libwebp/src/enc (main)
% emcc src/enc/webp_enc.c -o src/foo.mjs -s ENVIRONMENT='web' -s SINGLE_FILE=1  -s USE_ES6_IMPORT_META=0 -O3 

但我认为输入文件src/enc/webp_enc.c不是正确的输入文件。有谁知道我应该使用哪个导入文件？另外，我可能还缺少其他任何我可能需要做的事情吗？

Answer 1

您将很难尝试通过在单个翻译单元上调用 Emscripten 编译器来编译整个库；编码器并不完全包含在一个文件中。您需要使用构建系统来构建完整的库。

幸运的是，将库移植到 WebAssembly 的大部分工作已经完成；甚至还有a README file with instructions on building a demo program ，它使用 SDL 解码文件并将其呈现为 <canvas> .您可以在 CMakeLists.txt 中查看演示是如何设置的，并根据自己的喜好对其进行修改，以便从库中导出编码器而不是解码器。

不过，您最好创建自己的 CMake 项目 imports the encoder library并导出您希望从 JavaScript 代码调用的函数。假设您将库放在 libwebp/ 中子目录，创建一个 CMakeLists.txt像这样:

project(mywebpenc)
cmake_minimum_required(VERSION 3.22)

add_subdirectory(${CMAKE_CURRENT_SOURCE_DIR}/libwebp)

add_executable(mywebpenc ${CMAKE_CURRENT_SOURCE_DIR}/mywebpenc.c)
target_include_directories(mywebpenc PRIVATE ${CMAKE_CURRENT_BINARY_DIR})
target_include_directories(mywebpenc PUBLIC ${CMAKE_CURRENT_SOURCE_DIR}/libwebp/src)
target_compile_definitions(mywebpenc PUBLIC EMSCRIPTEN)
target_link_libraries(mywebpenc webpencode webpdsp webputils)

set_target_properties(mywebpenc
    PROPERTIES LINK_FLAGS "-s WASM=1 \
        -s EXPORTED_FUNCTIONS='[\"_mywebpenc_encode\"]' -s INVOKE_RUN=0 \
        -s EXPORTED_RUNTIME_METHODS='[\"cwrap\"]'")

然后把上面的函数命名为mywebpenc_encode用你想导出到 JS 的界面进入 mywebpenc.c .作为概念验证，我尝试了一个简单的 stub :

#include <webp/encode.h>

extern size_t mywebpenc_encode(
    const uint8_t* rgb, int width, int height, int stride,
    float quality_factor, uint8_t** output)
{
    return WebPEncodeRGB(rgb, width, height, stride, quality_factor, output);
}

使用 emcmake cmake . && make mywebpenc 构建项目.您将获得两个文件，mywebpenc.js和 mywebpenc.wasm ，你应该能够interface with like with any other Emscripten library .