15 | 如何实现一个 WebAssembly 在线多媒体处理应用（一）？
DIP 应用概览
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
本文是一篇关于使用WebAssembly和Emscripten构建在线多媒体处理应用的教程。作者通过实战项目的方式，手把手地教读者构建一个基于WebAssembly的在线数字图像处理（DIP）应用。文章详细介绍了滤镜的基本原理和Emscripten的基础用法，包括安装过程、编译C/C++代码成Wasm格式目标代码，并在Web浏览器中运行的方法。同时，还探讨了Emscripten为我们提供的虚拟主机运行时环境，以及如何通过JavaScript模拟实现C/C++语言中的标准库函数和其他功能。整体而言，本文是一篇技术性较强的教程，涵盖了WebAssembly和Emscripten的基本原理和用法，适合对WebAssembly和多媒体处理感兴趣的读者阅读学习。文章内容涉及到WebAssembly技术、多媒体处理和图像处理等方面的知识，对于想要学习WebAssembly在多媒体处理领域应用的读者来说，是一篇很有价值的教程。
《WebAssembly 入门课》，新⼈⾸单¥29
全部留言(9)
- 最新
- 精选
军秋emscripten的不同版本对编译后的wasm产物性能上会有差异吗？作者回复: 会有一定的差异的，但总体上来看差异可以忽略不计。Emscripten 的编译产物整体是往性能更好的方向上发展的，所以尽量使用最新版。
2020-10-072
张凯作为一个c++领域的web菜鸟，勉力看之，这个wasm是放到服务器上，客户端需要把这个文件一次性的加载到本地？？作者回复: 对的。
2020-11-051
qinsi相比WebGL实现的滤镜有性能优势吗？作者回复: 没有做过详细测试，但就目前来看，WebGL 天然会利用 GPU 进行向量和矩阵计算，相比于暂时还没有 SIMD 支持的 Wasm 来说应该是有着很大优势的。
2020-10-0741- Quickeryi“为了能够支持在 Web 浏览器中“使用”诸如 std::fopen 等 C/C++ 语言中，用于访问本机文件资源的标准库函数，Emscripten 会使用诸如 LocalStorage 之类的浏览器特性，来模拟完整的 POSIX 文件操作和相关的数据结构。当然，只不过这一切都是使用 JavaScript 来模拟实现的” 关于上面的说法有个疑问，难道不是因为浏览器提供了对应的wasm runtime？
作者回复: Wasm Runtime 本身并不提供对 POSIX 相关能力的支持，它仅仅作为一个字节码的“执行机构”来运行。所以如果需要在浏览器中模拟这些文件操作的话，那只能由浏览器本身的能力来实现，比如借助 LocalStorage。这两点并不冲突的。
2022-07-03归属地：上海 
看不山是山,看水是不水。在c中就只写了个malloc n个字节的接口和一个free的接口，并导出这两个接口，在html中先malloc一个大内存，比如100M,之后马上调用free接口，在任务管理器看内存参数，free之后怎么没有看到内存减少是什么现象啊作者回复: 是在浏览器上跑的吗？还是以WASI形式跑的？
2021-07-083- itgouwasm能否实现解码rtsp并在网页上播放呢？目前网页播放rtsp困难重重，几乎都是要在服务器端转码才能播放
作者回复: 理论上是可以的，可以直接将现有的使用 C/C++/Rust 编写的 RTSP 编解码库编译为 Wasm，就可以直接使用在 Web 上。但性能和解码质量还是要看具体产品需求。
2021-03-222 
Jason Yu 于航源码可以参考这里：https://github.com/Becavalier/geektime-wasm-tutorial。2021-04-294
高鹏gaopeng“还记得在今天的 Emscripten 实例中，我们使用到了名为 “EMSCRIPTEN_KEEPALIVE” 的宏，来确保被标记的函数不会被编译器优化掉。那么，你知道它具体是怎样实现的吗？” 用 __attribute__((used)) 来标记，防止链接器会优化删除未被使用的数据。2022-05-312
Yarco注: 1. 第一次编译需要生成各种系统库 感觉会比较慢 2. 我homebrew安装的 emcc (不知道是不是这个原因) 会出错说 “html-minifier-terser was not found! ” 需要手工安装依赖包2020-10-0731