imgsquash

ZUSAMMENFASSUNG

Bildkomprimierung Full Stack -Website -Code. Enthält sowohl API -Dienst als auch Frontend, die in Node, React und Next.js Framework geschrieben wurden.

Screenshots

Einrichten von Google Cloud -Speicher

1. Erstellen Sie ein Projekt auf Google Cloud und fügen Sie einen kostenlosen Cloud -Speicher -Bucket über diesen QuickStart -Handbuch hinzu:
   • https://cloud.google.com/storage/docs/quickstart-console
2. Authentifizieren Sie entweder gcloud -Befehlszeilen -Tool (hier herunterladen) oder setzen Sie die env -Variable GOOGLE_APPLICATION_CREDENTIALS mit der Service -Kontodatei.
   • Handbuch hier: https://cloud.google.com/sdk/docs/authorizing

Starten Sie den API -Dienst

1. Erstellen Sie .env -Datei im Stamm des Ordners mit den folgenden Variablen. Siehe Dotenv, wie man Env -Variablen hinzufügt.
   • API_VERSION : 1 (optional).
   • Gc_storage : your-google-cloud-bucket-name
   • Dl_base_url : [YOUR-API-URL]/1/dl
2. npm install um alle Knotenmodule für API zu installieren.
3. Führen Sie npm run dev , um den Dev -Server auf 3000 Port zu starten.
4. npm start für die Produktion

Mit dem Frontend beginnen

1. npm install , um alle Knotenmodule für Frontend zu installieren.
2. Do npm run dev startet den WebPack -Server auf 3001 -Port.
3. Führen Sie npm run build und npm start um den Code in der Produktion zu erstellen und zu verwenden.

Notizen

1. Die folgenden Programme werden zur Optimierung verwendet

   • Mozjpeg (Verlustige JPEG -Komprimierung)
   • JPEGTRAN (Verlustlose JPEG -Komprimierung)
   • pngquant (Verlustige PNG -Kompression)
   • Optipng (Verlustlose PNG -Kompression)

2. Die aktuelle Upload -Grenze der Dateigröße beträgt 10 MB.

3. API -Routen. [POST]

   • /image : Image (en) über Datei, URL, Base64 oder Binary hochladen.
     • Datei: file oder base64 oder binary .
     • Verlust: Boolean (Standard: Falsch)
   • /url : Komprimierung direkter Bild -URL.
     • URL: Gültige Bild -URL.
   • /zip : Akzeptiert Liste des Dateienobjekts als Array mit ( id , size und name ) und senden Sie das Reißverschluss.
     • Dateien: Liste des Dateienobjekts als Array.

   [GET] - /dl/:id : Download -URL des komprimierten Bildes generieren. Akzeptieren Sie den optionalen name .

LIZENZ

MIT