【Webアプリ】ピクセルアート風画像変換

【Webアプリ】ピクセルアート風画像変換アイキャッチ アプリ
アプリいらすと
この記事は約3分で読めます。

アフィリエイト広告を利用しています-

寒い日が続いていますが、お身体大丈夫でしょうか。13日の金曜日でございます。
ってあれ、明日(14日)関東暖かいの? そうなの?

スポンサーリンク

画像をピクセルアート風にしてしまおう!

イラストや写真などの画像をピクセルアート風に変換してしまうツールを作ってみました。
需要アルカナ?

ようはドット絵ぽくするってやつですね。

内容的には画像データを劣化させてい(要は色数を減らしたり滑らかさを取っ)たりしているだけなのですが、まぁ昔の(画質に制限があったころの)ゲームなんかの表現に近い感じに出来るってやつです。

いちからドット打つよりは写真や高解像度の画像から変換して、ちょっと手直しすれば作業もちょっとは楽かな?
本職のドッターさんだと、いちから作っても早い人たまぁ~にいらっしゃいますが(笑)

まずは準備

まずはベースとなる静止画像を用意します。
今回はpngとjpgに対応してます。gifは弾かれるので注意!

制限

アップロードできる静止画像は以下の制限を掛けています。
・pngとjpg 形式の静止画である
・pngは透過処理有でも可能
・静止画像のデータサイズが2MB以内である

今回は最終的に出力される動画データは、pngになりますのでご了承ください。

webアプリへアクセス!

準備が出来ましたら以下のリンクよりWebアプリにアクセスしてください。

webアプリにアクセス!!

あとはアプリの指示に従い、画像をアップデートをし、色数と粗さの設定を送信ください。

プレビューボタンを押すと設定した画像の生成状態を確認することが出来ます。
ただし、諸事情により10回までの制限を持たせました。

プレビュー回数について

一度、Clearボタンでリセットするか、送信後、再アクセスすると回数は10回に戻ります。

静止画のサイズによっては時間がかかる場合があります。
変換が終了したら自動的に遷移しますので、遷移先で出力された動画をダウンロードしてください。

“色数”について

色数は、減色されたときの使用している色の数になります。
2~64色までの数値で設定してください。

色数

必ずしも正確な数ということにはなりません。
例えば、ピクセル数が色数より少ない場合や、描画されている色数が少なかった場合などはその限りではありません。
少ない色数の方がドット絵”ぽさ”は出るかもしれません。

“粗さ”について

粗さは、画像を劣化(ガタガタした感じに)させるときの度合いの数値となります。
0はほぼ粗さがなく、1に近くなる値ほど強くなります。
0.01単位で設定できますので、劣化具合の調整をしてあげるとクオリティ的にも良いものが生成されるかもしれません。

左下の”Clear”ボタンについて

左下にある”Clear”ボタンを押すと、アップしたデータを削除して最初の状態に戻すことが出来ます。リセットボタンってやつですね。

“サンプル倍率”について

サンプル倍率は、左の元の画像と、右の処理後のプレビュー表示画像の表示サイズを変更することが出来ます。
プレビュー確認時にお使いください。
拡縮のみで、画像を動かすことは出来ません。

画像表示アリア

表示エリアは各画像ごとに横幅256pix × 高さ256pixの矩形となります。拡大時にそれを超え外側になった部分は見ることが出来ません、申し訳ない。
まぁ基本縮小しかたぶん使わないと思うので……。





おわりに

何か不具合とかあればコメントして頂けると助かります。すぐに対応できるかはわかりませんが。

またPaaSの”フリープラン”の範囲で稼働してますのでその辺りはご留意頂けると助かります。


コメント