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

Thomas Steiner

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

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

mkbitmap के बारे में

mkbitmap C प्रोग्राम, किसी इमेज को पढ़ता है और उस पर इनमें से एक या एक से ज़्यादा ऑपरेशन को इस क्रम में लागू करता है: इनवर्शन, हाईपास फ़िल्टरिंग, स्केलिंग, और थ्रेशोल्डिंग. हर कार्रवाई को अलग-अलग कंट्रोल करके चालू या बंद किया जा सकता है. mkbitmap का मुख्य इस्तेमाल, कलर या ग्रेस्केल इमेज को ऐसे फ़ॉर्मैट में बदलना है जो अन्य प्रोग्राम, खास तौर पर ट्रेस करने वाले प्रोग्राम potrace के लिए इनपुट के तौर पर सही फ़ॉर्मैट में हो. ट्रेसिंग प्रोग्राम 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 एक टूल है, जिसकी मदद से WebAssembly में C/C++ प्रोग्राम कंपाइल किए जा सकते हैं. Emscripten के बिल्डिंग प्रोजेक्ट दस्तावेज़ में यह जानकारी दी गई है:

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

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

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

./configure
make

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

emconfigure ./configure
emmake make

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

चरण 0, 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 कोई फ़ाइल नाम नहीं दिया गया है. इसलिए, mkbitmap स्टैंडर्ड इनपुट से पढ़ते हुए, फ़िल्टर के तौर पर काम करता है", जो डिफ़ॉल्ट रूप से Emscripten के लिए prompt() होता है.

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

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

mkbitmap को तुरंत लागू होने से रोकने और उसे उपयोगकर्ता के इनपुट के लिए इंतज़ार करने के लिए, आपको Emscripten के Module ऑब्जेक्ट को समझना होगा. Module, ग्लोबल JavaScript ऑब्जेक्ट है. इसमें ऐसे एट्रिब्यूट होते हैं जिन्हें 'एम्स्क्रिप्टेन से जनरेट किया गया कोड, कोड लागू होने के दौरान कई जगहों पर कॉल करता है. कोड के लागू होने को कंट्रोल करने के लिए, 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 टैग का इस्तेमाल करें. कंपाइल करने के लिए शुभकामनाएं!

धन्यवाद

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