2018の21日目です。wasm-bindgenを使用して何かしてみたいと思っていたので、今回は以前Rustで実装した画像の差分を取るツールをwasm-bindgenを使用してnode_modulesとして使用できるようにしてみたいと思います。adventar.org移植元github.comこれはもともと、go-diff-image(https://github.com/murooka/go-diff-image)というgolang製のツールをRustへポーティングしたものになります。github.com同じピクセル同士を比較して差分を出力するのではなく、githubのdiffのような感じで画像の差分を可視化するツールです。以下のような比較画像を生成します。成果物github.com手順さっそくミニマムなプロジェクトを作ってみます。"0.2"wasm-bindgen-cliが入ってない場合はインストールします。wasm-bindgen-cliまずは1を加算する関数で試してみます。1}次にMakefileを用意しておきます。wasm-bindgenはデフォルトブラウザ向けのコードを吐きますが、今回はnodejs向けに--nodejsつけて実行するようにします。--nodejs以下でビルド。wasmInstance.exports;wasmの読み込みからinstanciateまで。require('./node_lcs_img_diff_bg');使用方法は以下のように呼ぶだけ。後はせっせと移植していきます。注意点としてはVecは返り値として返せないので、そのような場合JSONにしStringを返すことになりそうです。github.com細かい部分は省略しますが、Rust側は以下のようになりました。去年以下の記事を書きましたがwasm-bindgenのおかげで受け取る値も返す値もシンプルになっています。以前はArrayBufferのオフセットやデータの長さを受け取り、自分でバッファに変換する必要がありましたが、そのあたりの処理をwasm-bindgenが受け持ってくれているからですね。qiita.comどういうことをやっているかざっくり言うと、画層データを2枚受け取ってデコード。差分が発生した領域を計算して、元画像に緑/赤色をブレンドしたあとpngにエンコードして返しています。細かい処理は省略していますが、mainとなるdiff関数は以下のような感じです。}).unwrap()}typescriptの型まで吐いてくれるので以下のように使用できます。after));実際にはcliや画像の読み書き処理を追加しています。詳しくは以下を参照してみてください。publishすれば完了です。自分はよくJavaScriptとwasmの速度比較を行うのですが、今回はJavaScript実装がないのでRust版と速度比較をしてお茶を濁しときます。runsベンチマークにはhyperfineを使用しました。結構な差がでましたね。wasmの方はwasmファイルのリードからinstansiateまでで200msくらい持ってかれてるようです。diff関数は185msくらいですね。Autumnで発表させていただきまし...2019-01-11Denoを読む(1)正月にDenoを読んでたメモです。ファミコンのエミュレータをJSでだらだらと作ってた。(1)月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。