TOP > ドット絵自動作成ツール(スマホ非対応)
【入力】 　 　　縮小拡大
【出力】　 出力サイズ　 横 　 縦 　 倍率 　 出力色 　rgb(255,255,255) 　rgb(255,0,0) 　rgb(0,255,0) 　rgb(0,0,255) 　rgb(0,255,255) 　rgb(255,0,255) 　rgb(255,255,0) 　rgb(255,128,0)

このツールについて

LED電光掲示板を写した写真からドット絵を自動的に作成する簡易ツールを作成しました。
本ツールはPCのブラウザで動作します。スマートフォンには対応していません。
動作確認はWindows10 Google Chrome バージョン: 111.0.5563.147で行っています。

LED電光掲示板の他、印刷された高解像度の(ジャギーが見える)ビットマップフォント表示も変換が可能です。




本ツールでは器用な画像解析、画像認識は行っていません。右図のように、x軸方向とy軸方向に領域を分割し、分割された四角形の中心座標のピクセル値を取得しドット絵を生成しています。最低限の処理しかしていませんので精度が良くない場合も多々あります。
「高解像度な写真を手作業でドッド打ちすると時間かかるのをツールが一瞬でやってくれる」ところを狙ったツールとなります。「目で判別が難しい画像を解析してくれる」ツールではありません。
広い範囲を一括でドット絵化しようとすると歪むことが多いです。50x50や100x100程度で小分けすることをおすすめします。100ドットを超えると変換精度が悪くなります。
精度が悪い場合も多いので「うまく変換できればラッキー」ぐらいの感覚で使ってください。明暗がはっきりしない写真、高解像度でない写真は精度が高くありません。

出力画像の2階長化は、RGB平均、赤(R)、緑(G)、青(B)、色相(H)、彩度(S)、明度(V)の7種類から選べ、しきい値を設定できるようにしています。一番精度が高そうなものをお使いください。

識別結果について色々試しました。
・範囲が狭いと精度が良い、範囲が広いと精度が悪い。
・白黒に近い配色だと精度が良い、カラフルだと精度が悪い。
・しきい値はRGB平均、明度(V)での出力が安定している。他は画像によってまちまち。

画像変換処理はブラウザ内(ローカルのPC内)で完結しています。画像がサーバにアップロードされたり、サーバで画像変換処理が行われているわけではありません。

使用方法


ちょうどいい画像が手元にない場合、
この画像を保存してお試しでお使いください。
ドット絵の出力サイズは横32x縦16です。

1.入力の「ファイルを選択」より、変換したい画像を選択してください。
2.変換したい領域の四隅を設定してください。ドラッグで四隅の位置を動かすことができます。また、ドット絵の出力サイズ、表示倍率、出力色を設定してください。
3.出力画像は複数出しています。必要な画像を選んで右クリックし「名前を付けて画像を保存…」、もしくは画面のスクリーンショットを撮影してお好きにお使いください。


本ツールで作成したドット絵画像の使用について

ご自由にお使いください。私の許可や申請等は不要です。URLの掲載は不要です。ツールを用いて作成した旨の但し書きも不要です。
もしよろしければ「こんなツールがあるよ」と本ページのURLを共有いただけるとありがたいです。作業中の本ツールの画面スクリーンショットを共有いただいても構いません。(静止画、動画どちらも)

ただし、本ツールで発生したあらゆる損害について責を負いません。精度が悪くドット絵に誤りが含まれる可能性もあります。確認の上自己責任でご利用ください。

本ツールのソースについて

本ツールのソースはオープンソースです。HTML、CSS、JavaScriptで開発しており、どなたでもソースの中身が見れる状態です。
ソースが役に立つかわかりませんが、本ソースを流用して改良版ツールや別ツールを自由に開発いただいて構いません。頒布元(本ページのURL)の記載はお願いします。