れこ（Twitter: @L_e_k_o）です

AST芸人です

remarkプラグイン、Gatsbyプラグイン、textlintプラグイン、Babelプラグイン、ESLintプラグインとか書き捨てる

TypeScriptのchecker.ts（3万行オーバーのTypeScriptの型検査機）のgood first issueに挑んでいる

TSコミュニティの代表やってます。TSConf 2020のCFPぜひお願いします！

denobook 02の最終章「Deep dive into Deno Compiler」書きました

Node.jsのコラボレータしてます。（元Node学園祭）JSConf JPのwebサイト作ったりReact Japan Conferenceを手伝ったり

写真を編集するツール ansitsu を供養するために来た

最近見つけた複雑GUI: https://arcade.makecode.com/

URL: https://ansitsu.app

画像をドロップして、ドロップした画像を加工し、jpg/png/webPとしてエクスポートできるツール

フィルムを現像する"暗室"から命名

写真加工でAdobeにお布施を払いたくないから自分で作る

作る機能が多すぎて途中で心が折れた未完成品

主な使用技術：Office UI Fablic, React, Redux, WebWorker, WebAssembly, OpenCV(over wasm)

OpenCVビルド環境構築はQuramyさんの記事参照 https://github.com/Quramy/opencvjs

Credit: このまえシアトル行ってとき遠方に見えたマウントレーニアが麗しかったのでflickrからお借りした

photo by flickr

Photo by flickr

上下左右＋斜めの８方向の変形

ドラッグ

点線の下に白のボーダーを描いてある、どんな画像でも明度差出て見やすい

実装はインラインSVG+CSSアニメーション

Scale to Fit: windowの表示領域（短辺）におさまるよう表示倍率を変更

画像本来のサイズへ変更

-, +ボタンによる拡大・縮小（なぜか見えてないけど）

バウンディングボックスも表示倍率に応じて位置・サイズを調整

クロップしたい領域を選択し、⌘(or meta)+K OR メニューから操作

今の表示倍率に応じてクロップ領域がずれないよう計算している（ex. 表示倍率300%表示状態でのクロップ↓）

クロップの逆、選択した領域だけ消す

⌘(meta)+Zでもとに戻る（カットだけでなくすべての操作が非可逆）

pngとしてダウンロードするとその領域は透明に

これも表示倍率によらず見た目上選択されている領域だけカットされるように

明度・コントラストを変えられる

メインスレッドをなるべく使わない実装。固まらない。けど結果を待つ以外やること無いので結局待つ。

Canvasに描画してあるImageData（UIntClampedArray）＋設定値をWebWorkerにtransfer

WebWorker+OpenCV(wasm)で明度とコントラストを調整した結果のImageData（UIntClampedArray）を返却

Canvasに書き戻す

ライブプレビューは操作履歴として書き込まない暫定的な変更、まだ挙動がバギー。

OpenCVに自動補正機能があるらしい。それで「よしなに補正」を作ったらAdobe Deshiくらいになれる？（なれない

マウス位置を起点にして、マイスホイールでズーム変更

CSSのtransform-origin + scaleで実装

ただし、これをやるとすべての座標計算（選択範囲 etc）がバグる

CSSのtransform+Canvasのの座標のマッピングが辛くて諦めた

特にGUIが複雑な要素はない。OpenCVすごい（こなみ

等速での再生。短辺2000pxくらいの画像ならかなり高速

ちなみに「やり直す」ショートカットもある。⌘(meta)+shift+Z