1.0.3 • Published 6 years ago

willyb-sharper v1.0.3

Weekly downloads
4
License
ISC
Repository
github
Last release
6 years ago

sharper Build Status npm downloads npm version npm dependencies

Automatic image processor built on top of sharp and multer for express.


How does it work?

When you are working on a website which needs to create multiple size copies of a single image uploaded by user, resize | crop | process and finally upload in a dynamic directory based on current date or time, then this module will save your entire lifetime.

Basically, this module provide an express middleware that do all above things at once. If something goes wrong, you can catch it in error middleware. You need to provide few options that will tell sharper about location of upload, dynamic date format for upload folder to be created, accepted image types, upload size limits, output format, and output sizes with prefixes etc.

This module is based on sharp node-js module for image processing. It's the fastest module there is and based on libvips library.


Install

npm install --save sharper

Configure

set options

const sharper = require('sharper');
var Sharper = sharper({
    field : 'file',
    location : '/var/www/uploads/',
    dirFormat : 'yyyy/mmm/d',
    maxFileSize: '20mb',
    fileNameLen : 50,
    accept : ['jpeg', 'jpg', 'png'],
    output : 'jpg',
    sizes : [
        {suffix : 'xlg', width : 1200, height : 1200},
        {suffix : 'lg', width : 800, height : 800},
        {suffix : 'md', width : 500, height : 500},
        {suffix : 'sm', width : 300, height : 300},
        {suffix : 'xs', width : 100, height : 100},
    ]
});

add middleware

app.post('/upload', Sharper, function(err, req, res, next){
    console.log(err);
    res.status(500).send('upload failed...');
}, function(req, res){
    console.log(res.sharper);
    res.send('upload successful...');
});

Options

var Sharper = sharper(options);

sharper options

optiondefaultrole
field'file'input file field in multipart form data. ex. <input type="file" name="file"/>
location'/var/www/html/'upload directory.
dirFormat'yyyy/mmm/d'date pattern to follow for folder creation for image storage. Explore formats at [node-format module](https://github.com/felixge/node-dateformat#mask-options)
fileNameLen50length of the output image filename.
maxFileSize'10mb'maximum size of input/upload file to accept.
accept'png','jpeg','jpg'array of file types/extensions to accept.
output'jpg'type of output file to produce. valid options : jpg, png, gif, webp, tiff, bmp
sizes[{suffix : 'lg', width : 500, height:500}, ...]Array of size specification object for output images (with filename suffix to produce output-name.lg.jpg format).

sharp options

Please visit this sharp sharp for detailed overview of specific option.

optiondefaultrole
resizetrueresize images as per their sizes mentioned in options.sizes
cropfalsecrop images as per their sizes mentioned in options.sizes
background{r: 200 , g:200, b:200, a:1}set the background for the embed, flatten and extend operations.
embedfalseembed on canvas
maxfalseset maximum output dimension
minfalseset minimum output dimension
withoutEnlargementfalsedo not enlarge small images
ignoreAspectRatiofalseignore aspect ration while resizing images
extractfalseextract specific part of image
trimfalseTrim boring pixels from all edges
flattenfalseMerge alpha transparency channel, if any, with background.
extendfalseExtends/pads the edges of the image with background.
negatefalseProduces the negative of the image.
rotatefalseRotate the output image by either an explicit angle
flipfalseFlip the image about the vertical Y axis.
flopfalseFlop the image about the horizontal X axis.
blurfalseMild blur of the output image
sharpenfalseMild sharpen of the output image
gammafalseApply a gamma correction.
grayscale or greyscalefalseConvert to 8-bit greyscale; 256 shades of grey.
normalize or normalisefalseEnhance output image contrast by stretching its luminance to cover the full dynamic range.
progressivefalseUse progressive (interlace) scan for JPEG and PNG output.
qualityfalseThe output quality to use for lossy JPEG, WebP and TIFF output formats. The default quality is 80.

Errors

You can catch errors in error middleware as shown previously. err object includes (but not limited to) following error codes (key code).

coderole
FILE_TYPE_UNSUPPORTEDInput file type is not acceptable to process. check accept option.
LIMIT_FILE_SIZEInput file size is too large. Check maxFileSize option.

Success

Upon successful upload, sharper will add sharper object in res response object. It will have following properties.

keyrole
dirdir that was created for storing process image.
destinationabsolute path of storage destination.
filenamename of the image files created using sharper.

Test

  • npm install
  • npm install -g mocha
  • npm test

in practice

  • npm install -g bower
  • bower install
  • Open terminal and run node test-server.js in demo folder of this module.
  • Open your browser and go to http://localhost:8800.
  • Upload a photo by clicking on dropzone.
  • If upload sucessfully completes, check upload directory /var/www/html.
  • If error occurs, check your terminal.

If you are facing node-gyp related error, go to node_modules/sharper/node_modules/sharp and use cmd command node-gyp rebuild. Make sure you have node-gyp installed or use npm install -g node-gyp