mkbitmap को WebAssembly में कंपाइल करना

Thomas Steiner

WebAssembly क्या है और यह कहां से आया? लेख में, मैंने बताया कि आज के WebAssembly तक हम कैसे पहुंचे. इस लेख में, हम आपको mkbitmap नाम के किसी मौजूदा C प्रोग्राम को WebAssembly में कंपाइल करने का तरीका बताएंगे. यह हैलो वर्ल्ड उदाहरण से ज़्यादा जटिल है, क्योंकि इसमें फ़ाइलों के साथ काम करना, WebAssembly और JavaScript लैंड के बीच कम्यूनिकेट करना, और कैनवस पर ड्रॉ करना शामिल है. हालांकि, यह इतना आसान है कि आपको परेशानी न हो.

यह लेख उन वेब डेवलपर के लिए लिखा गया है जो WebAssembly के बारे में जानना चाहते हैं. इसमें सिलसिलेवार तरीके से बताया गया है कि अगर आपको mkbitmap को WebAssembly में कंपाइल करना है, तो आपको क्या करना होगा. आपको बता दें कि पहली बार चलाने पर, किसी ऐप्लिकेशन या लाइब्रेरी को कंपाइल न होना आम बात है. इसलिए, यहां बताए गए कुछ चरण काम नहीं करते. इसलिए, मुझे पीछे लौटकर अलग तरीके से कोशिश करनी पड़ी. इस लेख में, कंपाइल करने का ऐसा कोई जादुई कमांड नहीं दिखाया गया है जो अचानक से आ गया हो. इसके बजाय, इसमें मेरी असल प्रोग्रेस के बारे में बताया गया है. इसमें कुछ परेशानियां भी शामिल हैं.

mkbitmap के बारे में

mkbitmap C प्रोग्राम, किसी इमेज को पढ़ता है और उस पर इनमें से एक या उससे ज़्यादा ऑपरेशन को इस क्रम में लागू करता है: इनवर्शन, हाईपास फ़िल्टरिंग, स्केलिंग, और थ्रेशोल्डिंग. हर ऑपरेशन को अलग से कंट्रोल किया जा सकता है और उसे चालू या बंद किया जा सकता है. mkbitmap का मुख्य इस्तेमाल, कलर या ग्रेस्केल इमेज को ऐसे फ़ॉर्मैट में बदलने के लिए किया जाता है जो अन्य प्रोग्राम के लिए इनपुट के तौर पर सही हो. खास तौर पर, ट्रैसिंग प्रोग्राम potrace के लिए, जो SVGcode का आधार बनाता है. प्रीप्रोसेसिंग टूल के तौर पर, mkbitmap का इस्तेमाल, स्कैन किए गए लाइन आर्ट को हाई रिज़ॉल्यूशन वाली बिलीवल इमेज में बदलने के लिए किया जाता है. जैसे, कार्टून या हाथ से लिखा गया टेक्स्ट.

mkbitmap का इस्तेमाल करने के लिए, इसमें कई विकल्प और एक या उससे ज़्यादा फ़ाइलों के नाम डालें. पूरी जानकारी के लिए, टूल का मैन पेज देखें:

$ mkbitmap [options] [filename...]
रंगीन कार्टून इमेज.
ओरिजनल इमेज (सोर्स).
प्रीप्रोसेसिंग के बाद, कार्टून इमेज को ग्रेस्केल में बदला गया.
पहले स्केल किया गया, फिर थ्रेशोल्ड लागू किया गया: mkbitmap -f 2 -s 2 -t 0.48 (सोर्स).

कोड प्राप्त करें

पहला कदम, mkbitmap का सोर्स कोड हासिल करना है. यह आपको प्रोजेक्ट की वेबसाइट पर मिलेगा. यह लेख लिखे जाने के समय, potrace-1.16.tar.gz सबसे नया वर्शन है.

स्थानीय तौर पर कंपाइल और इंस्टॉल करना

अगला चरण, टूल को स्थानीय तौर पर कंपाइल और इंस्टॉल करना है, ताकि यह पता चल सके कि यह कैसे काम करता है. INSTALL फ़ाइल में ये निर्देश शामिल हैं:

  1. cd डायरेक्ट्री में पैकेज का सोर्स कोड डालें और अपने सिस्टम के लिए पैकेज को कॉन्फ़िगर करने के लिए, ./configure टाइप करें.

    configure को चलाने में कुछ समय लग सकता है. यह प्रोसेस चलने के दौरान, कुछ मैसेज प्रिंट करती है. इनसे पता चलता है कि किन सुविधाओं की जांच की जा रही है.

  2. पैकेज को कंपाइल करने के लिए, make टाइप करें.

  3. इसके अलावा, पैकेज के साथ मिलने वाले किसी भी सेल्फ़-टेस्ट को चलाने के लिए, make check टाइप करें. आम तौर पर, इसके लिए हाल ही में बने और इंस्टॉल नहीं किए गए बाइनरी का इस्तेमाल किया जाता है.

  4. प्रोग्राम, डेटा फ़ाइलें, और दस्तावेज़ इंस्टॉल करने के लिए, make install टाइप करें. रूट के मालिकाना हक वाले प्रीफ़िक्स में इंस्टॉल करते समय, हमारा सुझाव है कि पैकेज को सामान्य उपयोगकर्ता के तौर पर कॉन्फ़िगर और बिल्ट किया जाए. साथ ही, सिर्फ़ make install चरण को रूट की अनुमतियों के साथ चलाया जाए.

इन चरणों को पूरा करने के बाद, आपको दो एक्सीक्यूटेबल, potrace और mkbitmap मिलेंगे. इस लेख में mkbitmap के बारे में बताया गया है. mkbitmap --version को चलाकर, इस बात की पुष्टि की जा सकती है कि यह सही तरीके से काम कर रहा है या नहीं. यहां मेरी मशीन के चारों चरणों का आउटपुट दिया गया है. इसे छोटा करने के लिए काटा गया है:

पहला चरण, ./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

दूसरा चरण, 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'.

तीसरा चरण, 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'.

चौथा चरण, 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'.

यह देखने के लिए कि यह काम कर रहा है या नहीं, mkbitmap --version चलाएं:

$ mkbitmap --version
mkbitmap 1.16. Copyright (C) 2001-2019 Peter Selinger.

अगर आपको वर्शन की जानकारी मिलती है, तो इसका मतलब है कि mkbitmap को कॉम्पाइल और इंस्टॉल कर लिया गया है. इसके बाद, WebAssembly के साथ इन चरणों को लागू करें.

mkbitmap को WebAssembly में कंपाइल करना

Emscripten, C/C++ प्रोग्राम को WebAssembly में कंपाइल करने के लिए इस्तेमाल किया जाने वाला टूल है. Emscripten के बिल्डिंग प्रोजेक्ट दस्तावेज़ में यह जानकारी दी गई है:

Emscripten की मदद से बड़े प्रोजेक्ट बनाना बहुत आसान है. Emscripten दो आसान स्क्रिप्ट उपलब्ध कराता है. इनकी मदद से, gcc के ड्रॉप-इन रिप्लेसमेंट के तौर पर emcc का इस्तेमाल करने के लिए, मेकफ़ाइलों को कॉन्फ़िगर किया जा सकता है. ज़्यादातर मामलों में, आपके प्रोजेक्ट के बाकी बचे मौजूदा बिल्ड सिस्टम में कोई बदलाव नहीं होता.

इसके बाद, दस्तावेज़ में यह जानकारी दी गई है (थोड़ी काट-छांट की गई है):

मान लें कि आम तौर पर, आपने इन निर्देशों का इस्तेमाल करके बिल्ड किया है:

./configure
make

Emscripten का इस्तेमाल करके बिल्ड करने के लिए, इन निर्देशों का इस्तेमाल करें:

emconfigure ./configure
emmake make

इसलिए, ./configure emconfigure ./configure और make emmake make बन जाता है. यहां mkbitmap के साथ ऐसा करने का तरीका बताया गया है.

पहला चरण, make clean:

$ make clean
Making clean in src
 rm -f potrace mkbitmap
test -z "" || rm -f
rm -rf .libs _libs
[…]
rm -f *.lo

पहला चरण, 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

दूसरा चरण, 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'.

अगर सब कुछ ठीक से हुआ है, तो अब डायरेक्ट्री में .wasm फ़ाइलें होनी चाहिए. find . -name "*.wasm" को चलाकर, उन्हें ढूंढा जा सकता है:

$ find . -name "*.wasm"
./a.wasm
./src/mkbitmap.wasm
./src/potrace.wasm

आखिरी दो विकल्प अच्छे लग रहे हैं. इसलिए, cd को src/ डायरेक्ट्री में डालें. अब इनसे जुड़ी दो नई फ़ाइलें भी हैं, mkbitmap और potrace. इस लेख के लिए, सिर्फ़ mkbitmap काम का है. इन फ़ाइलों में .js एक्सटेंशन नहीं होने की वजह से, इनके बारे में थोड़ा भ्रम हो सकता है. हालांकि, ये असल में JavaScript फ़ाइलें हैं. इनकी पुष्टि, head कॉल की मदद से की जा सकती है:

$ 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)

mv mkbitmap mkbitmap.js को कॉल करके, JavaScript फ़ाइल का नाम mkbitmap.js पर सेट करें. अगर आप चाहें, तो mv potrace potrace.js को कॉल करके भी ऐसा किया जा सकता है. अब पहली जांच करने का समय आ गया है. इससे यह पता चलेगा कि फ़ाइल काम कर रही है या नहीं. इसके लिए, कमांड-लाइन पर Node.js की मदद से फ़ाइल को चलाएं. इसके लिए, node mkbitmap.js --version को चलाएं:

$ node mkbitmap.js --version
mkbitmap 1.16. Copyright (C) 2001-2019 Peter Selinger.

आपने mkbitmap को WebAssembly में कंपाइल कर लिया है. अब अगला चरण, इसे ब्राउज़र में काम कराने का है.

ब्राउज़र में WebAssembly के साथ mkbitmap

mkbitmap.js और mkbitmap.wasm फ़ाइलों को mkbitmap नाम की नई डायरेक्ट्री में कॉपी करें. इसके बाद, index.html एचटीएमएल बॉयलरप्लेट फ़ाइल बनाएं, जो mkbitmap.js JavaScript फ़ाइल को लोड करती हो.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>mkbitmap</title>
  </head>
  <body>
    <script src="mkbitmap.js"></script>
  </body>
</html>

mkbitmap डायरेक्ट्री को दिखाने वाला लोकल सर्वर शुरू करें और उसे अपने ब्राउज़र में खोलें. आपको एक प्रॉम्प्ट दिखेगा, जिसमें आपसे इनपुट मांगा जाएगा. यह उम्मीद के मुताबिक है, क्योंकि टूल के मैन पेज के मुताबिक, "[i]f no filename arguments are given, then mkbitmap acts as a filter, reading from standard input". Emscripten के लिए, यह डिफ़ॉल्ट रूप से prompt() होता है.

mkbitmap ऐप्लिकेशन, जिसमें इनपुट मांगने वाला प्रॉम्प्ट दिख रहा है.

अपने-आप लागू होने से रोकना

mkbitmap को तुरंत लागू होने से रोकने और उसे उपयोगकर्ता के इनपुट के लिए इंतज़ार करने के लिए, आपको Emscripten के Module ऑब्जेक्ट को समझना होगा. Module एक ग्लोबल JavaScript ऑब्जेक्ट है, जिसमें ऐसे एट्रिब्यूट होते हैं जिन्हें Emscripten से जनरेट किया गया कोड, अपने एक्सीक्यूशन के अलग-अलग पॉइंट पर कॉल करता है. कोड के लागू होने को कंट्रोल करने के लिए, Module को लागू किया जा सकता है. Emscripten ऐप्लिकेशन शुरू होने पर, वह Module ऑब्जेक्ट की वैल्यू देखता है और उन्हें लागू करता है.

mkbitmap के मामले में, Module.noInitialRun को true पर सेट करें, ताकि प्रॉम्प्ट दिखने की वजह से शुरुआती रन न हो. script.js नाम की एक स्क्रिप्ट बनाएं और उसे index.html में <script src="mkbitmap.js"></script> से पहले शामिल करें. साथ ही, script.js में यह कोड जोड़ें. अब ऐप्लिकेशन को फिर से लोड करने पर, आपको यह प्रॉम्प्ट नहीं दिखेगा.

var Module = {
  // Don't run main() at page load
  noInitialRun: true,
};

कुछ और बिल्ड फ़्लैग के साथ मॉड्यूलर बिल्ड बनाना

ऐप्लिकेशन को इनपुट देने के लिए, Module.FS में Emscripten के फ़ाइल सिस्टम की सहायता का इस्तेमाल किया जा सकता है. दस्तावेज़ के फ़ाइल सिस्टम के साथ काम करने की सुविधा शामिल करना सेक्शन में बताया गया है:

Emscripten यह तय करता है कि फ़ाइल सिस्टम के साथ काम करने की सुविधा को अपने-आप शामिल करना है या नहीं. कई प्रोग्राम को फ़ाइलों की ज़रूरत नहीं होती. साथ ही, फ़ाइल सिस्टम के साथ काम करने की सुविधा का साइज़ भी कम नहीं होता. इसलिए, Emscripten इसे शामिल करने से तब बचता है, जब उसे ऐसा करने की ज़रूरत नहीं दिखती. इसका मतलब है कि अगर आपका C/C++ कोड फ़ाइलों को ऐक्सेस नहीं करता है, तो FS ऑब्जेक्ट और अन्य फ़ाइल सिस्टम एपीआई, आउटपुट में शामिल नहीं किए जाएंगे. दूसरी ओर, अगर आपके C/C++ कोड में फ़ाइलों का इस्तेमाल किया जाता है, तो फ़ाइल सिस्टम के साथ काम करने की सुविधा अपने-आप शामिल हो जाएगी.

माफ़ करें, mkbitmap एक ऐसा मामला है जहां Emscripten, फ़ाइल सिस्टम के साथ काम करने की सुविधा को अपने-आप शामिल नहीं करता. इसलिए, आपको साफ़ तौर पर इसके लिए कहना होगा. इसका मतलब है कि आपको पहले बताए गए emconfigure और emmake चरणों का पालन करना होगा. साथ ही, CFLAGS आर्ग्युमेंट की मदद से कुछ और फ़्लैग सेट करने होंगे. यहां दिए गए फ़्लैग, दूसरे प्रोजेक्ट के लिए भी काम के हो सकते हैं.

  • -sFILESYSTEM=1 सेट करें, ताकि फ़ाइल सिस्टम के साथ काम करने की सुविधा शामिल की जा सके.
  • -sEXPORTED_RUNTIME_METHODS=FS,callMain सेट करें, ताकि Module.FS और Module.callMain एक्सपोर्ट हो जाएं.
  • नया ES6 मॉड्यूल जनरेट करने के लिए, -sMODULARIZE=1 और -sEXPORT_ES6 सेट करें.
  • प्रॉम्प्ट दिखने की वजह से होने वाले शुरुआती रन को रोकने के लिए, -sINVOKE_RUN=0 सेट करें.

साथ ही, इस खास मामले में, आपको configure स्क्रिप्ट को यह बताने के लिए, --host फ़्लैग को wasm32 पर सेट करना होगा कि आपको WebAssembly के लिए कंपाइल किया जा रहा है.

फ़ाइनल emconfigure कमांड ऐसा दिखता है:

$ emconfigure ./configure --host=wasm32 CFLAGS='-sFILESYSTEM=1 -sEXPORTED_RUNTIME_METHODS=FS,callMain -sMODULARIZE=1 -sEXPORT_ES6 -sINVOKE_RUN=0'

emmake make को फिर से चलाना न भूलें और हाल ही में बनाई गई फ़ाइलों को mkbitmap फ़ोल्डर में कॉपी करें.

index.html में बदलाव करें, ताकि यह सिर्फ़ ES मॉड्यूल script.js लोड करे. इसके बाद, 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();

अब ब्राउज़र में ऐप्लिकेशन खोलने पर, आपको DevTools कंसोल में लॉग किया गया Module ऑब्जेक्ट दिखेगा. साथ ही, प्रॉम्प्ट नहीं दिखेगा, क्योंकि mkbitmap के main() फ़ंक्शन को अब शुरुआत में नहीं बुलाया जाता.

व्हाइट स्क्रीन वाला mkbitmap ऐप्लिकेशन, जिसमें DevTools कंसोल में लॉग किया गया मॉड्यूल ऑब्जेक्ट दिख रहा है.

मुख्य फ़ंक्शन को मैन्युअल तरीके से चलाना

अगला चरण, Module.callMain() को चलाकर mkbitmap के main() फ़ंक्शन को मैन्युअल तरीके से कॉल करना है. callMain() फ़ंक्शन, आर्ग्युमेंट का एक कलेक्शन लेता है. यह कलेक्शन, कमांड लाइन पर डाले गए आर्ग्युमेंट से एक-एक करके मैच होता है. अगर कमांड लाइन पर mkbitmap -v चलाया जाता है, तो ब्राउज़र में Module.callMain(['-v']) को कॉल किया जाएगा. इससे, DevTools कंसोल में mkbitmap वर्शन नंबर लॉग होता है.

// This is `script.js`.
import loadWASM from './mkbitmap.js';

const run = async () => {
  const Module = await loadWASM();
  Module.callMain(['-v']);
};

run();

व्हाइट स्क्रीन वाला mkbitmap ऐप्लिकेशन, जिसमें DevTools कंसोल में लॉग किया गया mkbitmap वर्शन नंबर दिख रहा है.

स्टैंडर्ड आउटपुट को रीडायरेक्ट करना

स्टैंडर्ड आउटपुट (stdout) डिफ़ॉल्ट रूप से कंसोल होता है. हालांकि, इसे किसी दूसरे फ़ंक्शन पर रीडायरेक्ट किया जा सकता है. उदाहरण के लिए, ऐसा फ़ंक्शन जो आउटपुट को किसी वैरिएबल में सेव करता है. इसका मतलब है कि 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();

mkbitmap ऐप्लिकेशन, जिसमें mkbitmap का वर्शन नंबर दिख रहा है.

इनपुट फ़ाइल को मेमोरी फ़ाइल सिस्टम में ले जाना

इनपुट फ़ाइल को मेमोरी फ़ाइल सिस्टम में डालने के लिए, आपको कमांड लाइन पर mkbitmap filename के बराबर की वैल्यू की ज़रूरत होगी. मैंने इस समस्या को कैसे हल किया, यह समझने के लिए पहले यह जानना ज़रूरी है कि mkbitmap को इनपुट के तौर पर क्या चाहिए और वह आउटपुट कैसे बनाता है.

mkbitmap के इनपुट फ़ॉर्मैट में PNM (PBM, PGM, PPM) और BMP शामिल हैं. आउटपुट फ़ॉर्मैट, बिटमैप के लिए PBM और ग्रेमैप के लिए PGM हैं. अगर filename आर्ग्युमेंट दिया जाता है, तो mkbitmap डिफ़ॉल्ट रूप से एक आउटपुट फ़ाइल बनाएगा. इसका नाम, इनपुट फ़ाइल के नाम से लिया जाएगा. इसके लिए, इनपुट फ़ाइल के सफ़िक्स को .pbm में बदला जाएगा. उदाहरण के लिए, इनपुट फ़ाइल के नाम example.bmp के लिए, आउटपुट फ़ाइल का नाम example.pbm होगा.

Emscripten एक वर्चुअल फ़ाइल सिस्टम उपलब्ध कराता है, जो लोकल फ़ाइल सिस्टम की नकल करता है. इससे, सिंक करने वाले फ़ाइल एपीआई का इस्तेमाल करने वाले नेटिव कोड को कम या बिना किसी बदलाव के कंपाइल और चलाया जा सकता है. mkbitmap को किसी इनपुट फ़ाइल को filename कमांड लाइन आर्ग्युमेंट के तौर पर पढ़ने के लिए, आपको Emscripten के FS ऑब्जेक्ट का इस्तेमाल करना होगा.

FS ऑब्जेक्ट, इन-मेमोरी फ़ाइल सिस्टम (आम तौर पर इसे MEMFS कहा जाता है) पर काम करता है. इसमें writeFile() फ़ंक्शन होता है, जिसका इस्तेमाल वर्चुअल फ़ाइल सिस्टम में फ़ाइलें लिखने के लिए किया जाता है. writeFile() का इस्तेमाल, नीचे दिए गए कोड सैंपल में दिखाए गए तरीके से किया जाता है.

फ़ाइल में डेटा लिखने की प्रोसेस काम कर रही है, इसकी पुष्टि करने के लिए FS ऑब्जेक्ट के readdir() फ़ंक्शन को '/' पैरामीटर के साथ चलाएं. आपको example.bmp और कई डिफ़ॉल्ट फ़ाइलें दिखेंगी, जो हमेशा अपने-आप बनती हैं.

ध्यान दें कि वर्शन नंबर को प्रिंट करने के लिए, Module.callMain(['-v']) को किए गए पिछले कॉल को हटा दिया गया है. ऐसा इसलिए होता है, क्योंकि Module.callMain() एक ऐसा फ़ंक्शन है जिसे आम तौर पर सिर्फ़ एक बार चलाया जाता है.

// 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();

मेमोरी फ़ाइल सिस्टम में फ़ाइलों की सूची दिखाने वाला mkbitmap ऐप्लिकेशन. इसमें example.bmp भी शामिल है.

पहली बार असल में लागू करना

सभी चीज़ें सेट अप करने के बाद, Module.callMain(['example.bmp']) चलाकर mkbitmap को लागू करें. MEMFS के '/' फ़ोल्डर के कॉन्टेंट को लॉग करें. इसके बाद, आपको example.bmp इनपुट फ़ाइल के बगल में, हाल ही में बनाई गई example.pbm आउटपुट फ़ाइल दिखेगी.

// 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();

मेमोरी फ़ाइल सिस्टम में फ़ाइलों की सूची दिखाने वाला mkbitmap ऐप्लिकेशन. इसमें example.bmp और example.pbm शामिल हैं.

आउटपुट फ़ाइल को मेमोरी फ़ाइल सिस्टम से बाहर निकालना

FS ऑब्जेक्ट का readFile() फ़ंक्शन, मेमोरी फ़ाइल सिस्टम से आखिरी चरण में बनाए गए example.pbm को पाने की सुविधा देता है. यह फ़ंक्शन एक Uint8Array दिखाता है, जिसे File ऑब्जेक्ट में बदलकर डिस्क पर सेव किया जाता है. ऐसा इसलिए किया जाता है, क्योंकि ब्राउज़र में सीधे तौर पर देखने के लिए, आम तौर पर ब्राउज़र PBM फ़ाइलों के साथ काम नहीं करते. (फ़ाइल सेव करने के और भी बेहतर तरीके हैं, लेकिन डाइनैमिक तौर पर बनाए गए <a download> का इस्तेमाल करना सबसे ज़्यादा आसान है.) फ़ाइल सेव होने के बाद, उसे अपने पसंदीदा इमेज व्यूअर में खोला जा सकता है.

// 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();

macOS Finder में इनपुट .bmp फ़ाइल और आउटपुट .pbm फ़ाइल की झलक.

इंटरैक्टिव यूज़र इंटरफ़ेस (यूआई) जोड़ना

अब तक, इनपुट फ़ाइल को हार्डकोड किया गया है और mkbitmap डिफ़ॉल्ट पैरामीटर के साथ चलता है. आखिरी चरण में, उपयोगकर्ता को डाइनैमिक तौर पर कोई इनपुट फ़ाइल चुनने, mkbitmap पैरामीटर में बदलाव करने, और चुने गए विकल्पों के साथ टूल चलाने की अनुमति देनी होती है.

// 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']);

PBM इमेज फ़ॉर्मैट को पार्स करना खास तौर पर मुश्किल नहीं है. इसलिए, कुछ JavaScript कोड की मदद से, आउटपुट इमेज की झलक भी दिखाई जा सकती है. ऐसा करने का एक तरीका जानने के लिए, नीचे एम्बेड किए गए डेमो का सोर्स कोड देखें.

नतीजा

बधाई हो, आपने mkbitmap को WebAssembly में कंपाइल कर लिया है और इसे ब्राउज़र में काम करने लायक बना दिया है! इस प्रोसेस में कुछ समस्याएं आईं. टूल के काम करने तक, आपको इसे एक से ज़्यादा बार कंपाइल करना पड़ा. हालांकि, जैसा कि मैंने ऊपर बताया है, यह प्रोसेस का हिस्सा है. अगर आपको कोई समस्या आती है, तो StackOverflow के webassembly टैग का इस्तेमाल करें. कॉम्पाइल करने का आनंद लें!

आभार

इस लेख की समीक्षा सैम क्लेग और रेचल एंड्रयू ने की है.