Trong bài viết WebAssembly là gì và bắt nguồn từ đâu?, Tôi đã giải thích cách chúng tôi kết thúc sự kiện WebAssembly của ngày hôm nay. Trong bài viết này, tôi sẽ giới thiệu cho bạn phương pháp biên dịch một chương trình C hiện có (mkbitmap
) lên WebAssembly. Nó phức tạp hơn ví dụ hello world, vì nó bao gồm làm việc với các tệp, giao tiếp giữa các vùng WebAssembly và JavaScript, cũng như vẽ trên canvas, nhưng vẫn đủ để bạn dễ dàng quản lý.
Bài viết này dành cho các nhà phát triển web muốn tìm hiểu WebAssembly và hướng dẫn từng bước cách bạn có thể thực hiện nếu muốn biên dịch một nội dung nào đó như mkbitmap
thành WebAssembly. Xin lưu ý rằng việc không biên dịch ứng dụng hoặc thư viện trong lần chạy đầu tiên là hoàn toàn bình thường. Đó là lý do tại sao một số bước được mô tả bên dưới lại không hoạt động, vì vậy tôi cần phải quay lại và thử lại theo cách khác. Bài viết này không trình bày lệnh biên dịch thần kỳ như thể lệnh đã rơi xuống từ trên trời xuống mà mô tả tiến trình thực tế của tôi, bao gồm cả một số trở ngại.
Khoảng mkbitmap
Chương trình C mkbitmap
đọc một hình ảnh và áp dụng một hoặc nhiều thao tác sau cho hình ảnh đó theo thứ tự: đảo ngược, lọc thông cao, chia tỷ lệ và đặt ngưỡng. Bạn có thể kiểm soát và bật hoặc tắt từng thao tác riêng lẻ. Mục đích sử dụng chính của mkbitmap
là chuyển đổi hình ảnh màu hoặc thang màu xám thành định dạng phù hợp làm dữ liệu đầu vào cho các chương trình khác, đặc biệt là chương trình theo dõi potrace
tạo thành cơ sở của SVGcode. Là một công cụ tiền xử lý, mkbitmap
đặc biệt hữu ích trong việc chuyển đổi hình vẽ đường kẻ được quét (chẳng hạn như phim hoạt hình hoặc văn bản viết tay) thành hình ảnh hai chiều có độ phân giải cao.
Bạn sử dụng mkbitmap
bằng cách truyền vào đó một số tuỳ chọn và một hoặc nhiều tên tệp. Để biết tất cả chi tiết, hãy xem trang hướng dẫn của công cụ này:
$ mkbitmap [options] [filename...]
![Hình ảnh hoạt hình có màu.](https://web.developers.google.cn/static/articles/compiling-mkbitmap-to-webassembly/image/cartoon-image-color.png?authuser=5&hl=vi)
![Hình ảnh hoạt hình được chuyển đổi sang thang màu xám sau khi xử lý trước.](https://web.developers.google.cn/static/articles/compiling-mkbitmap-to-webassembly/image/cartoon-image-converted-97142bc66e12e.png?authuser=5&hl=vi)
mkbitmap -f 2 -s 2 -t 0.48
(Nguồn).Lấy mã
Bước đầu tiên là lấy mã nguồn của mkbitmap
. Bạn có thể tìm thấy thông tin này trên trang web của dự án. Tại thời điểm chúng tôi viết bài này, potrace-1.16.tar.gz là phiên bản mới nhất.
Biên dịch và cài đặt trên máy
Bước tiếp theo là biên dịch và cài đặt công cụ này trên máy để cảm nhận cách hoạt động của công cụ. Tệp INSTALL
chứa các hướng dẫn sau:
cd
vào thư mục chứa mã nguồn của gói rồi nhập./configure
để định cấu hình gói đó cho hệ thống của bạn.Quá trình chạy
configure
có thể mất chút thời gian. Trong khi chạy, thiết bị này sẽ in một số thông báo cho biết những tính năng đang được kiểm tra.Nhập
make
để biên dịch gói.Bạn có thể nhập
make check
để chạy mọi quy trình tự kiểm thử đi kèm với gói, thường bằng cách sử dụng các tệp nhị phân vừa mới gỡ cài đặt.Nhập
make install
để cài đặt các chương trình cũng như mọi tệp dữ liệu và tài liệu. Khi cài đặt vào một tiền tố thuộc sở hữu của thư mục gốc, bạn nên định cấu hình và tạo gói dưới dạng người dùng thông thường, đồng thời chỉ giai đoạnmake install
được thực thi bằng đặc quyền gốc.
Bằng cách làm theo các bước này, bạn sẽ có 2 tệp thực thi là potrace
và mkbitmap
. Tệp sau là trọng tâm của bài viết này. Bạn có thể xác minh rằng mã này hoạt động đúng cách bằng cách chạy mkbitmap --version
. Đây là kết quả của tất cả bốn bước từ máy của tôi, đã được cắt bớt nhiều để cho ngắn gọn:
Bước 1, ./configure
:
$ ./configure
checking for a BSD-compatible install... /usr/bin/install -c
checking whether build environment is sane... yes
checking for a thread-safe mkdir -p... ./install-sh -c -d
checking for gawk... no
checking for mawk... no
checking for nawk... no
checking for awk... awk
checking whether make sets $(MAKE)... yes
[…]
config.status: executing libtool commands
Bước 2, make
:
$ make
/Applications/Xcode.app/Contents/Developer/usr/bin/make all-recursive
Making all in src
clang -DHAVE_CONFIG_H -I. -I.. -g -O2 -MT main.o -MD -MP -MF .deps/main.Tpo -c -o main.o main.c
mv -f .deps/main.Tpo .deps/main.Po
[…]
make[2]: Nothing to be done for `all-am'.
Bước 3, make check
:
$ make check
Making check in src
make[1]: Nothing to be done for `check'.
Making check in doc
make[1]: Nothing to be done for `check'.
[…]
============================================================================
Testsuite summary for potrace 1.16
============================================================================
# TOTAL: 8
# PASS: 8
# SKIP: 0
# XFAIL: 0
# FAIL: 0
# XPASS: 0
# ERROR: 0
============================================================================
make[1]: Nothing to be done for `check-am'.
Bước 4, sudo make install
:
$ sudo make install
Password:
Making install in src
.././install-sh -c -d '/usr/local/bin'
/bin/sh ../libtool --mode=install /usr/bin/install -c potrace mkbitmap '/usr/local/bin'
[…]
make[2]: Nothing to be done for `install-data-am'.
Để kiểm tra xem mã có hoạt động hay không, hãy chạy mkbitmap --version
:
$ mkbitmap --version
mkbitmap 1.16. Copyright (C) 2001-2019 Peter Selinger.
Nếu nhận được thông tin chi tiết về phiên bản, tức là bạn đã biên dịch và cài đặt thành công mkbitmap
. Tiếp theo, hãy làm cho các bước tương đương trong số này hoạt động với WebAssembly.
Biên dịch mkbitmap
sang WebAssembly
Emscripten là một công cụ biên dịch các chương trình C/C++ sang WebAssembly. Tài liệu về Xây dựng dự án của Emscripten nêu rõ như sau:
Việc tạo các dự án lớn bằng Emscripten rất dễ dàng. Emscripten cung cấp 2 tập lệnh đơn giản giúp định cấu hình các tệp makefile của bạn dùng
emcc
để thay thế chogcc
. Trong hầu hết các trường hợp, phần còn lại của hệ thống xây dựng hiện tại của dự án vẫn không thay đổi.
Sau đó, tài liệu sẽ được chỉnh sửa cho ngắn gọn:
Hãy xem xét trường hợp bạn thường dùng các lệnh sau để tạo bản dựng:
./configure
make
Để tạo bản dựng bằng Emscripten, bạn có thể dùng các lệnh sau:
emconfigure ./configure
emmake make
Vì vậy, về cơ bản, ./configure
trở thành emconfigure ./configure
và make
trở thành emmake make
. Sau đây là ví dụ minh hoạ cách thực hiện việc này bằng mkbitmap
.
Bước 0, make clean
:
$ make clean
Making clean in src
rm -f potrace mkbitmap
test -z "" || rm -f
rm -rf .libs _libs
[…]
rm -f *.lo
Bước 1, emconfigure ./configure
:
$ emconfigure ./configure
configure: ./configure
checking for a BSD-compatible install... /usr/bin/install -c
checking whether build environment is sane... yes
checking for a thread-safe mkdir -p... ./install-sh -c -d
checking for gawk... no
checking for mawk... no
checking for nawk... no
checking for awk... awk
[…]
config.status: executing libtool commands
Bước 2, emmake make
:
$ emmake make
make: make
/Applications/Xcode.app/Contents/Developer/usr/bin/make all-recursive
Making all in src
/opt/homebrew/Cellar/emscripten/3.1.36/libexec/emcc -DHAVE_CONFIG_H -I. -I.. -g -O2 -MT main.o -MD -MP -MF .deps/main.Tpo -c -o main.o main.c
mv -f .deps/main.Tpo .deps/main.Po
[…]
make[2]: Nothing to be done for `all'.
Nếu mọi thứ diễn ra suôn sẻ thì giờ đây sẽ có tệp .wasm
ở đâu đó trong thư mục. Bạn có thể tìm thấy chúng bằng cách chạy find . -name "*.wasm"
:
$ find . -name "*.wasm"
./a.wasm
./src/mkbitmap.wasm
./src/potrace.wasm
Hai lớp cuối có vẻ đầy hứa hẹn, vì vậy hãy cd
vào thư mục src/
. Hiện tại cũng có hai tệp mới tương ứng là mkbitmap
và potrace
. Đối với bài viết này, chỉ có mkbitmap
là phù hợp. Thực tế là các tệp này không có phần mở rộng .js
hơi khó hiểu, nhưng thực tế là các tệp JavaScript, có thể xác minh bằng một lệnh gọi head
nhanh:
$ cd src/
$ head -n 20 mkbitmap
// include: shell.js
// The Module object: Our interface to the outside world. We import
// and export values on it. There are various ways Module can be used:
// 1. Not defined. We create it here
// 2. A function parameter, function(Module) { ..generated code.. }
// 3. pre-run appended it, var Module = {}; ..generated code..
// 4. External script tag defines var Module.
// We need to check if Module already exists (e.g. case 3 above).
// Substitution will be replaced with actual code on later stage of the build,
// this way Closure Compiler will not mangle it (e.g. case 4. above).
// Note that if you want to run closure, and also to use Module
// after the generated code, you will need to define var Module = {};
// before the code. Then that object will be used in the code, and you
// can continue to use Module afterwards as well.
var Module = typeof Module != 'undefined' ? Module : {};
// --pre-jses are emitted after the Module integration code, so that they can
// refer to Module (if they choose; they can also define Module)
Đổi tên tệp JavaScript thành mkbitmap.js
bằng cách gọi mv mkbitmap mkbitmap.js
(và mv potrace potrace.js
tương ứng nếu bạn muốn).
Bây giờ là lúc kiểm thử đầu tiên để xem có hoạt động hay không bằng cách thực thi tệp bằng Node.js trên dòng lệnh bằng cách chạy node mkbitmap.js --version
:
$ node mkbitmap.js --version
mkbitmap 1.16. Copyright (C) 2001-2019 Peter Selinger.
Bạn đã biên dịch thành công mkbitmap
thành WebAssembly. Bây giờ, bước tiếp theo là làm cho thẻ hoạt động trong trình duyệt.
mkbitmap
với WebAssembly trong trình duyệt
Sao chép các tệp mkbitmap.js
và mkbitmap.wasm
vào một thư mục mới có tên là mkbitmap
rồi tạo một tệp nguyên mẫu HTML index.html
để tải tệp JavaScript mkbitmap.js
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>mkbitmap</title>
</head>
<body>
<script src="mkbitmap.js"></script>
</body>
</html>
Khởi động một máy chủ cục bộ phân phát thư mục mkbitmap
rồi mở thư mục đó trong trình duyệt. Bạn sẽ thấy một thông báo yêu cầu bạn nhập thông tin. Đây là điều bình thường, vì theo trang man của công cụ này, "[i]nếu không có đối số tên tệp nào được cung cấp, thì mkbitmap hoạt động như một bộ lọc, đọc từ dữ liệu đầu vào tiêu chuẩn", mà theo mặc định, Emscripten là prompt()
.
Ngăn thực thi tự động
Để ngăn mkbitmap
thực thi ngay lập tức và khiến nó đợi hoạt động đầu vào của người dùng, bạn cần tìm hiểu đối tượng Module
của Emscripten. Module
là một đối tượng JavaScript toàn cục có các thuộc tính mà mã do Emscripten tạo gọi ở nhiều thời điểm trong quá trình thực thi.
Bạn có thể cung cấp phương thức triển khai Module
để kiểm soát việc thực thi mã.
Khi khởi động, ứng dụng Emscripten sẽ xem xét các giá trị trên đối tượng Module
và áp dụng các giá trị đó.
Trong trường hợp mkbitmap
, hãy đặt Module.noInitialRun
thành true
để ngăn lần chạy ban đầu khiến lời nhắc xuất hiện. Tạo tập lệnh có tên là script.js
, đưa tập lệnh này trước <script src="mkbitmap.js"></script>
trong index.html
rồi thêm mã sau vào script.js
. Bây giờ, khi bạn tải lại ứng dụng, lời nhắc sẽ biến mất.
var Module = {
// Don't run main() at page load
noInitialRun: true,
};
Tạo một bản dựng mô-đun với một số cờ bản dựng khác
Để cung cấp dữ liệu đầu vào cho ứng dụng, bạn có thể sử dụng tính năng hỗ trợ hệ thống tệp của Emscripten trong Module.FS
. Phần Bao gồm hỗ trợ hệ thống tệp của tài liệu nêu rõ:
Emscripten quyết định có tự động thêm tính năng hỗ trợ hệ thống tệp hay không. Nhiều chương trình không cần tệp và chức năng hỗ trợ hệ thống tệp không phải là không đáng kể về kích thước, vì vậy Emscripten tránh sử dụng tính năng này khi không thấy có lý do. Điều đó có nghĩa là nếu mã C/C++ của bạn không truy cập vào tệp, thì đối tượng
FS
và các API hệ thống tệp khác sẽ không được đưa vào dữ liệu đầu ra. Mặt khác, nếu mã C/C++ của bạn có sử dụng tệp, thì hỗ trợ hệ thống tệp sẽ tự động được bao gồm.
Rất tiếc, mkbitmap
là một trong những trường hợp mà Emscripten không tự động bao gồm tính năng hỗ trợ hệ thống tệp, vì vậy bạn cần chỉ định rõ ràng việc này. Điều này có nghĩa là bạn cần làm theo các bước emconfigure
và emmake
được mô tả trước đó, với một vài cờ nữa được đặt qua đối số CFLAGS
. Những cờ sau cũng có thể hữu ích cho các dự án khác.
- Thiết lập
-sFILESYSTEM=1
để bao gồm tính năng hỗ trợ hệ thống tệp. - Thiết lập
-sEXPORTED_RUNTIME_METHODS=FS,callMain
để xuấtModule.FS
vàModule.callMain
. - Đặt
-sMODULARIZE=1
và-sEXPORT_ES6
để tạo mô-đun ES6 hiện đại. - Đặt
-sINVOKE_RUN=0
để ngăn lần chạy ban đầu khiến lời nhắc xuất hiện.
Ngoài ra, trong trường hợp cụ thể này, bạn cần đặt cờ --host
thành wasm32
để thông báo cho tập lệnh configure
mà bạn đang biên dịch cho WebAssembly.
Lệnh emconfigure
cuối cùng có dạng như sau:
$ emconfigure ./configure --host=wasm32 CFLAGS='-sFILESYSTEM=1 -sEXPORTED_RUNTIME_METHODS=FS,callMain -sMODULARIZE=1 -sEXPORT_ES6 -sINVOKE_RUN=0'
Đừng quên chạy lại emmake make
và sao chép các tệp mới tạo vào thư mục mkbitmap
.
Sửa đổi index.html
để chỉ tải mô-đun ES script.js
mà sau đó bạn sẽ nhập mô-đun mkbitmap.js
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>mkbitmap</title>
</head>
<body>
<!-- No longer load `mkbitmap.js` here -->
<script src="script.js" type="module"></script>
</body>
</html>
// This is `script.js`.
import loadWASM from './mkbitmap.js';
const run = async () => {
const Module = await loadWASM();
console.log(Module);
};
run();
Bây giờ, khi mở ứng dụng trong trình duyệt, bạn sẽ thấy đối tượng Module
được ghi vào bảng điều khiển Công cụ cho nhà phát triển và lời nhắc sẽ biến mất vì hàm main()
của mkbitmap
không còn được gọi ngay từ đầu.
Thực thi hàm chính theo cách thủ công
Bước tiếp theo là gọi hàm main()
của mkbitmap
theo cách thủ công bằng cách chạy Module.callMain()
. Hàm callMain()
nhận một mảng các đối số phù hợp với từng đối số mà bạn sẽ truyền vào dòng lệnh. Nếu trên dòng lệnh, bạn chạy mkbitmap -v
, bạn sẽ gọi Module.callMain(['-v'])
trong trình duyệt. Thao tác này sẽ ghi lại số phiên bản mkbitmap
vào bảng điều khiển Công cụ cho nhà phát triển.
// This is `script.js`.
import loadWASM from './mkbitmap.js';
const run = async () => {
const Module = await loadWASM();
Module.callMain(['-v']);
};
run();
Chuyển hướng đầu ra chuẩn
Theo mặc định, đầu ra chuẩn (stdout
) là bảng điều khiển. Tuy nhiên, bạn có thể chuyển hướng nó đến một hàm khác, chẳng hạn như một hàm lưu trữ dữ liệu đầu ra cho một biến. Tức là bạn có thể thêm đầu ra vào HTML bằng cách đặt thuộc tính Module.print
.
// This is `script.js`.
import loadWASM from './mkbitmap.js';
const run = async () => {
let consoleOutput = 'Powered by ';
const Module = await loadWASM({
print: (text) => (consoleOutput += text),
});
Module.callMain(['-v']);
document.body.textContent = consoleOutput;
};
run();
Đưa tệp đầu vào vào hệ thống tệp bộ nhớ
Để đưa tệp đầu vào vào hệ thống tệp bộ nhớ, bạn cần có mã tương đương với mkbitmap filename
trên dòng lệnh. Để hiểu cách tôi tiếp cận việc này, trước tiên, hãy tìm hiểu một số thông tin cơ bản về cách mkbitmap
yêu cầu dữ liệu đầu vào và tạo ra kết quả.
Các định dạng đầu vào được hỗ trợ của mkbitmap
là PNM (PBM, PGM, PPM) và BMP. Các định dạng đầu ra là PBM cho bitmap và PGM cho bản đồ màu xám. Nếu bạn cung cấp đối số filename
, thì theo mặc định, mkbitmap
sẽ tạo một tệp đầu ra có tên được lấy từ tên tệp đầu vào bằng cách thay đổi hậu tố của tệp đó thành .pbm
. Ví dụ: đối với tên tệp đầu vào example.bmp
, tên tệp đầu ra sẽ là example.pbm
.
Emscripten cung cấp một hệ thống tệp ảo mô phỏng hệ thống tệp cục bộ, nhờ đó, mã gốc sử dụng API tệp đồng bộ có thể được biên dịch và chạy mà không cần thay đổi hoặc thực hiện rất ít thay đổi.
Để mkbitmap
đọc tệp đầu vào như thể tệp được truyền dưới dạng đối số dòng lệnh filename
, bạn cần dùng đối tượng FS
mà Emscripten cung cấp.
Đối tượng FS
được một hệ thống tệp trong bộ nhớ hỗ trợ (thường gọi là MEMFS) và có một hàm writeFile()
mà bạn dùng để ghi tệp vào hệ thống tệp ảo. Bạn sử dụng writeFile()
như trong mã mẫu sau.
Để xác minh rằng thao tác ghi tệp có hoạt động, hãy chạy hàm readdir()
của đối tượng FS
với tham số '/'
. Bạn sẽ thấy example.bmp
và một số tệp mặc định luôn được tạo tự động.
Xin lưu ý rằng lệnh gọi trước đó đến Module.callMain(['-v'])
để in số phiên bản đã bị xoá. Lý do là Module.callMain()
là một hàm thường chỉ chạy một lần.
// This is `script.js`.
import loadWASM from './mkbitmap.js';
const run = async () => {
const Module = await loadWASM();
const buffer = await fetch('https://example.com/example.bmp').then((res) => res.arrayBuffer());
Module.FS.writeFile('example.bmp', new Uint8Array(buffer));
console.log(Module.FS.readdir('/'));
};
run();
Lần thực thi thực tế đầu tiên
Với mọi thứ đã sẵn sàng, hãy thực thi mkbitmap
bằng cách chạy Module.callMain(['example.bmp'])
. Ghi lại nội dung thư mục '/'
của MEMFS và bạn sẽ thấy tệp đầu ra example.pbm
mới tạo bên cạnh tệp đầu vào example.bmp
.
// This is `script.js`.
import loadWASM from './mkbitmap.js';
const run = async () => {
const Module = await loadWASM();
const buffer = await fetch('https://example.com/example.bmp').then((res) => res.arrayBuffer());
Module.FS.writeFile('example.bmp', new Uint8Array(buffer));
Module.callMain(['example.bmp']);
console.log(Module.FS.readdir('/'));
};
run();
Lấy tệp đầu ra khỏi hệ thống tệp bộ nhớ
Hàm readFile()
của đối tượng FS
cho phép tạo example.pbm
ở bước cuối cùng của hệ thống tệp bộ nhớ. Hàm này trả về một Uint8Array
mà bạn chuyển đổi thành đối tượng File
và lưu vào ổ đĩa, vì các trình duyệt thường không hỗ trợ các tệp PBM để xem trực tiếp trong trình duyệt.
(Có nhiều cách tinh tế hơn để lưu tệp, nhưng <a download>
được tạo động là cách được hỗ trợ rộng rãi nhất.) Sau khi lưu tệp, bạn có thể mở tệp trong trình xem ảnh yêu thích.
// This is `script.js`.
import loadWASM from './mkbitmap.js';
const run = async () => {
const Module = await loadWASM();
const buffer = await fetch('https://example.com/example.bmp').then((res) => res.arrayBuffer());
Module.FS.writeFile('example.bmp', new Uint8Array(buffer));
Module.callMain(['example.bmp']);
const output = Module.FS.readFile('example.pbm', { encoding: 'binary' });
const file = new File([output], 'example.pbm', {
type: 'image/x-portable-bitmap',
});
const a = document.createElement('a');
a.href = URL.createObjectURL(file);
a.download = file.name;
a.click();
};
run();
Thêm giao diện người dùng tương tác
Đến đây, tệp đầu vào được mã hoá cứng và mkbitmap
sẽ chạy với tham số mặc định. Bước cuối cùng là cho phép người dùng tự động chọn tệp đầu vào, điều chỉnh các tham số mkbitmap
rồi chạy công cụ này với các lựa chọn đã chọn.
// Corresponds to `mkbitmap -o output.pbm input.bmp -s 8 -3 -f 4 -t 0.45`.
Module.callMain(['-o', 'output.pbm', 'input.bmp', '-s', '8', '-3', '-f', '4', '-t', '0.45']);
Định dạng hình ảnh PBM không đặc biệt khó phân tích cú pháp, vì vậy, với một số mã JavaScript, bạn thậm chí có thể hiển thị bản xem trước của hình ảnh đầu ra. Hãy xem mã nguồn của bản minh hoạ được nhúng bên dưới để biết cách thực hiện việc này.
Kết luận
Xin chúc mừng, bạn đã biên dịch thành công mkbitmap
thành WebAssembly và làm cho ứng dụng hoạt động trong trình duyệt! Có một số trường hợp cụ thể nhưng bạn phải biên dịch công cụ này nhiều lần cho đến khi công cụ hoạt động, nhưng như tôi đã viết ở trên, đó là một phần trong trải nghiệm này. Ngoài ra, hãy nhớ thẻ webassembly
của StackOverflow nếu bạn gặp khó khăn. Chúc bạn biên dịch thành công!
Xác nhận
Bài viết này do Sam Clegg và Rachel Andrew đánh giá.