ファイルサイズを確認しながら画像をリサイズできるアプリケーションを作った

↑ よりアクセスしてみてください！

添付する際にファイルサイズ制限があると画像サイズを落とすことで解決しようとする時が私にはありました。そこで、身近なな操作でファイルサイズを確認しつつサイズを小さくするアプリケーションを作成しました！

特徴

• 👍 ファイルサイズを確認しつつ可能
• 👍 クリップボードから貼り付け / クリップボードへコピーが可能 (ショートカット有)
• 👍 PWA でスマホでも使えるように

実装方法

React ベースの Gatsby 製アプリケーションです。CSS は Tailwind CSS で実現しています。全てクライアントサイドの処理なため、サーバーサイドに画像は記録されません。

1. サイトへアクセスする。
2. 中央の白背景部分に画像をD&D、Ctrl(Cmd)+Vでクリップボードから貼り付け、フッターのファイル選択のいずれかから画像を取り込む。(クリップボードを使う場合は権限の確認ポップアップが出るかもしれません。)

3. スライダーを使って画像サイズとファイルサイズを確認しながら調整する。

4. 保存するには、ダウンロードボタンをクリック、Ctrl(Cmd)+Cでクリップボードへコピーのいずれかを実行する。

このアプリケーションはソースコードにあるようにキャンバスへ画像を描画しダウンロード可能なデータへ変換しているだけなので、適切な圧縮ができずファイルサイズが元より大きくなる場合があります。適切なライブラリや手法があればコメントやIssue、プルリクエストを頂ければと思います。