51
My Image compression website project open sourced on GitHub
source link: https://www.tuicool.com/articles/uA36jmb
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
SUMMARY
Image compression full stack website code. Contains both api service and frontend written in node, react and next.js framework.
SCREENSHOTS
SETTING UP GOOGLE CLOUD STORAGE
- Create a project on google cloud and add a free cloud storage bucket via this quickstart guide:
- Authenticate using either
gcloud
command line tool ( download here ) or setGOOGLE_APPLICATION_CREDENTIALS
env variable with the service account file.- Guide here: https://cloud.google.com/sdk/docs/authorizing
STARTING THE API SERVICE
- Create
.env
file in the root of the folder with the following variables.- API_VERSION : 1 (default)
- GC_STORAGE : your-google-cloud-bucket-name
- DL_BASE_URL : [YOUR-API-URL]/1/dl
- Do
npm install
to install all node modules. - Do
npm run dev
to start the dev server on3000
port. - Do
npm start
for production
STARTING THE FRONTEND
- Do
npm start
to install. - Do
npm run dev
will start the webpack server on3001
port. - Do
npm build
andnpm start
to build and use the code in production.
NOTES
-
Following programs are used for optimization
- mozjpeg (lossy jpeg compression)
- jpegtran (lossless jpeg compression)
- pngquant (lossy png compression)
- optipng (lossless png compression)
-
Current file size upload limit is 10MB.
-
API Routes. [POST]
-
/image
: upload image(s) via file, URL, base64 or Binary.- file:
file
orbase64
orbinary
. - lossy:
Boolean
(default: false)
- file:
-
/url
: Compression direct image url.- url: valid image url.
-
/zip
: Accepts list of files object as an array with (id
,size
andname
) and send the zipped result.- files: list of files object as an array.
[GET] -
/dl/:id
: Generate download url of compressed image. Accept optional queryname
. -
LICENSE
MIT
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK