imgsquash

まとめ

画像圧縮フルスタックウェブサイトコード。 Node、React、およびnext.jsフレームワークで書かれたAPIサービスとFrontendの両方が含まれています。

スクリーンショット

Googleクラウドストレージのセットアップ

1. Google Cloudでプロジェクトを作成し、このQuickStartガイドを介して無料のクラウドストレージバケットを追加します。
   • https://cloud.google.com/storage/docs/quickstart-console
2. gcloudコマンドラインツール（こちらをダウンロード）を使用して認証するか、Serviceアカウントファイルを使用してGOOGLE_APPLICATION_CREDENTIALS env変数を設定します。
   • ここにガイド：https：//cloud.google.com/sdk/docs/authorizing

APIサービスの開始

1. 次の変数を使用して、フォルダーのルートに.envファイルを作成します。 ENV変数を追加する方法については、Dotenvを参照してください。
   • API_Version ： 1 （オプション）。
   • gc_storage ： your-google-cloud-bucket-name
   • dl_base_url ： [YOUR-API-URL]/1/dl
2. npm install 、API用のすべてのノードモジュールをインストールします。
3. npm run dev実行して、 3000ポートでDEVサーバーを起動します。
4. 生産のためにnpm start

フロントエンドを起動します

1. npm install 、フロントエンド用のすべてのノードモジュールをインストールします。
2. do npm run dev 3001ポートでWebpackサーバーを起動します。
3. npm run build実行し、 npm start 。

メモ

1. 次のプログラムが最適化に使用されます

   • mozjpeg（lossy jpeg圧縮）
   • jpegtran（ロスレスJPEG圧縮）
   • pngquant（損失のあるpng圧縮）
   • Optipng（ロスレスPNG圧縮）

2. 現在のファイルサイズのアップロード制限は10MBです。

3. APIルート。 [役職]

   • /image ：ファイル、URL、base64またはバイナリ経由で画像をアップロードします。
     • ファイル： fileまたはbase64またはbinary 。
     • 損失： Boolean （デフォルト：false）
   • /url ：圧縮直接画像URL。
     • URL：有効な画像URL。
   • /zip ：ファイルオブジェクトのリストを（ id 、 size 、 name ）の配列として受け入れ、zipted結果を送信します。
     • ファイル：配列としてファイルオブジェクトのリスト。

   [get] - /dl/:id ：圧縮画像のURLをダウンロードします。オプションのクエリnameを受け入れます。

ライセンス

mit