ファイルサイズを確認しながら画像をリサイズできるアプリケーションを作った
Gatsby
画像
アプリはどこに？
↑ よりアクセスしてみてください！
概要
添付する際にファイルサイズ制限があると画像サイズを落とすことで解決しようとする時が私にはありました。そこで、身近なな操作でファイルサイズを確認しつつサイズを小さくするアプリケーションを作成しました！
特徴
- ✅ ファイルサイズを確認しつつ可能
- ✅ クリップボードから貼り付け / クリップボードへコピーが可能 (ショートカット有)
- ✅ PWA でスマホでも使えるように
実装方法
React ベースの Gatsby 製アプリケーションです。CSS は Tailwind CSS で実現しています。全てクライアントサイドの処理なため、サーバーサイドに画像は記録されません。
使い方
- サイトへアクセスする。
- 中央の白背景部分に画像をD&D、Ctrl(Cmd)+Vでクリップボードから貼り付け、フッターのファイル選択のいずれかから画像を取り込む。(クリップボードを使う場合は権限の確認ポップアップが出るかもしれません。)
- スライダーを使って画像サイズとファイルサイズを確認しながら調整する。
- 保存するには、ダウンロードボタンをクリック、Ctrl(Cmd)+Cでクリップボードへコピーのいずれかを実行する。
問題点
このアプリケーションはソースコードにあるようにキャンバスへ画像を描画しダウンロード可能なデータへ変換しているだけなので、適切な圧縮ができずファイルサイズが元より大きくなる場合があります。適切なライブラリや手法があればコメントやIssue、プルリクエストを頂ければと思います。