Last active
December 21, 2020 21:34
-
-
Save thatisuday/005c495b65489c6edbcdc9812a068353 to your computer and use it in GitHub Desktop.
A sample Express JS server for resizing images.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang='en'> | |
| <head> | |
| <meta charset='UTF-8'> | |
| <meta name='viewport' content='width=device-width, initial-scale=1.0'> | |
| <title>Image Resizer</title> | |
| <!-- external resources --> | |
| <link rel='preconnect' href='https://fonts.gstatic.com'> | |
| <link href='https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&family=Teko:wght@700&display=swap' | |
| rel='stylesheet'> | |
| <link rel='stylesheet' href='/www/style.css'> | |
| <script src='/www/main.js' defer></script> | |
| </head> | |
| <body class='app'> | |
| <p class='app__title'>Image Resizer</p> | |
| <p class='app__subtitle'>A Heroku deployed application to resize a test image.</p> | |
| <p class='app__subtitle'><b>https://thatisuday-image-resize.herokuapp.com</b></p> | |
| <!-- preview --> | |
| <div class='app__preview'> | |
| <div class='app__preview__image'> | |
| <img id='preview' class='app__preview__image__img' src='/resize/200x150' alt='Resized image'> | |
| </div> | |
| <!-- controls --> | |
| <form id='form' class='app__preview__controls'> | |
| <div class='app__preview__controls__input'> | |
| <p class='app__preview__controls__input__url'>/resize/</p> | |
| <input id='size' class='app__preview__controls__input__size' value="200x150" required/> | |
| </div> | |
| <button class='app__preview__controls__button' type='submit'>Submit</button> | |
| </form> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const express = require( 'express' ); | |
| const sharp = require( 'sharp' ); | |
| const path = require( 'path' ); | |
| // create express application | |
| const app = express(); | |
| // handle `/` request | |
| app.get( '/', ( req, res ) => { | |
| res.sendFile( path.resolve( __dirname, 'www/index.html' ) ); | |
| } ); | |
| // handle `/resize` request | |
| app.get( '/resize/:size', ( req, res ) => { | |
| // get size | |
| const [ _width, _height ] = req.params.size.split( "x" ); | |
| // get Number width and height | |
| const width = Number( _width ) || null; // fallback to `null` | |
| const height = Number( _height ) || null; // fallback to `null` | |
| // send response content-type | |
| res.contentType( 'image/png' ); | |
| // resize image and send | |
| const pngStream = sharp( path.resolve( __dirname, 'lenna.png' ) ) | |
| .resize( width, height, { | |
| fit: width && height ? 'fill' : 'cover', | |
| } ) | |
| .png() | |
| .toBuffer() | |
| .then( ( buffer ) => { | |
| res.send( buffer ); | |
| } ); | |
| } ); | |
| // handle web assets | |
| app.use( '/www', express.static( path.resolve( __dirname, 'www' ) ) ); | |
| // listen on a port | |
| const port = process.env.PORT || 80; | |
| app.listen( port, () => { | |
| console.log( `Server started on port ${ port }.` ); | |
| } ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment