なーさんです。
ここまで Flexgrid を中心に Wijmo の使い方をご紹介してきましたが、今回はちょっと変わった Wijmo の利用をしてみました。

Wijmo は大抵の場合、ビジネスアプリケーションで使われるものだと思いますが、こんな使い方もできるよ！ということで、読み込んだ写真をドット絵風に解像度を落として表示するアプリケーションを作ってみました（今回はソースコードはありません）。

下記は 2022 年 4 月現在の情報で執筆しています。
文中、画像中で使用されている商標等はそれぞれの企業、団体に帰属します。

作ったもの

ASP.NET と Wijmo を使って、読み込んだ写真をドット絵風に解像度を落として表示するアプリケーションを作りました。

仕組みですが、上記画面の左が元画像で右が Wijmo の Flexgrid になります。グリッドの 1 セルを 1 ドットに見立てて、セルの背景色を変えることによって表現しています。
写真や画像をブラウザ上で読み込んだあと、数ピクセル間隔で色をサンプリングしてセルの背景色に充てています。サンプリングする間隔は、画像サイズとグリッドのセル数によって変わります（サンプルでは 8 ピクセル毎になります）。

注意点として、グリッドのセル数が多くなると描画処理が重たくなる点です。サンプルではグリッドの使用セル数が 1 万セル前後ですが、パソコンによっては時間がかかるかもしれません。
といってもセル数が多くなると、元画像に近い滑らかな画像になって面白味はなくなるので、セル数は少ない方が面白いものができそうです。

サンプル写真

今回はソースコードはないので、そのかわり色んな写真をドット絵にしてみました。
左が元画像の縮小表示で、右がFlexgridでドット絵表示した結果です。
まずは動物モノ。

せっかくの猫画像なのに、ノイズが悪目立ちして正直あまり綺麗ではない^^;
かと思ったら、この牛の写真は意外といい感じに変換されたと思います。

次は風景モノ。
恵比寿ガーデンプレイスで撮った写真です。まあまあありかな？と思います。

実はただドット絵化するだけでは面白くないので、画像にメッセージを表示する機能もつけました。ポストカード風になります。
Flexgrid の上部にあるメッセージ欄にメッセージ（アルファベットや数字、一部記号のみ）を書いて「メッセージ描画」ボタンで行っています。描画位置は、Flexgrid で選択したセルが開始位置となります。

続いて新潟市内の夜景です。
・線は潰れたり途切れたりする
・細かいものも潰れる
以上が写った被写体は苦手だとわかります。そういう場合は元画像のまま楽しんだ方がよさそうです。

花の写真を変換してみました。
このひまわりはなかなかいい感じではないでしょうか？

下記の写真は、ドット感が被写体にうまくハマってかなり面白く変換されたと思います。

一方、この引きで撮った桜は微妙なところ。桜の花の美しさは表現できていないかなぁと思いました。

その他、乗り物はいくつか試しましたがあまり綺麗に変換されず、その中でよさそうなのが下記の写真でした。「JR」の文字が奇跡的に崩れていません。

マスコットなどのわかりやすい被写体の写真は、ドット絵に馴染みやすそうです。

色々試して一番安定した結果が得られたのは、食事の写真でした。

カレーばかりです（笑）。
例えば上手にメッセージを入れると本の表紙みたいになる（かもしれません）。

おおよその傾向として、ある程度大きく被写体を写して、細かいものや線はメインの被写体になっていない写真が向いていそうです。
変換サンプルは以上です。

おわりに

今回は Wijmo の変わった使い方の例として、Flexgrid でドット絵を描画する使い方をご紹介しました。

実は作ってみたはいいけど、ちょっとしたアート表現以上のよい使い道が浮かんでいません。
絵が描けなくてもアプリのアイコン画像を写真から作成できるぐらいかなぁ？というところです。

ともあれ、今は変換結果を画像やアイコン画像として保存できないので、次のステップは保存できるようにしようかなと考えています。

<これまでの記事>
ASP.NET MVC で Wijmo を使う – 1（開発環境の準備と基本的なグリッドの作成）
ASP.NET MVC で Wijmo を使う – 2（行やセルのカスタマイズ方法）
ASP.NET MVC で Wijmo を使う – 3（1万行のデータ表示とパフォーマンス）
ASP.NET MVC で Wijmo を使う – 4（マルチグリッドの表示とデータ同期）
ASP.NET MVC で Wijmo を使う – 5（Excel ファイルへの出力）
ASP.NET MVC で Wijmo を使う – 6（出力 Excel ファイルのカスタマイズ）
ASP.NET MVC で Wijmo を使う – 7（Flexgrid 上でカスタマイズした上で Excel に出力）