Socket
Socket
Sign inDemoInstall

image-steam

Package Overview
Dependencies
105
Maintainers
1
Versions
165
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    image-steam

A simple, fast, and highly customizable realtime image manipulation web server built atop Node.js.


Version published
Weekly downloads
116
decreased by-1.69%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

image-steam

Build Status

A simple, fast, and highly customizable realtime image manipulation web server built atop Node.js. Serving (many) millions of images daily by way of simple (single DC, simple storage) and advanced (multi-DC geo-distributed, replicated storage, multi-tier caching) configurations. Responsible in part for this white paper.

Notice: v0.41 Introduces Minor Breaking Changes

NPM

What is Image Steam?

NPM

http://localhost:13337/my-app/some-path/my-image.jpg/:/rs=w:640/cr=l:5%25,t:10%25,w:90%25,h:80%25/fx-gs

Consider the above isteam example, by allowing clients to directly request any variation of an image using few or many image instructions, and in near realtime. This opens the doors to improved user and developer experiences. The above example takes the requested image some-path/my-image.jpg, resizes to a fixed width (preserving aspect, by default), crops around the edges like a picture frame, applies greyscale effects, and will auto-select the most optimal image format supported by the requesting device -- all without developer support, and in (near) realtime.

LayerInfo
node.js http(s)RESTful interface
routingURI pathing that make up the desired image operations. Device aware - Supports implied optimizations based on the given request (notably webp support)
throttlingQuality of service management
securityAllows protecting resources behind the tranformations via signed requests
optimized originalOptimization of uploaded originals
storageStorage engine for reads (original or cache) and writes (cache). Extensible storage clients for storage and caching
processorImage operations (resize, crop, etc) go here, powered by Sharp and libvips

Why Image Steam?

There are a number of options out there, but isteam differentiates itself by:

FeatureInfo
Highly configurableEverything all the way down to how image operations are mapped can be overridden. Most solutions are very prescriptive on how it must work. isteam is intended to adhere to your architecture, your storage, your caching, your replication patterns
OptimizedOptimizes originally uploaded asset to account for large uploads, enabling a higher quality service by making the pipeline for image operations substantially faster. A critical feature in supporting large media of todays modern devices
QoSQuality of service features such as throttling and memory thresholds, to best take advantage of your hardware under ideal and non ideal scenarios
Device AwareDevice centric responses, where more than a URI may influence response. Compression and Accepts header (i.e. WebP) being examples
CDN SupportSupported, but not required
Library AgnosticProvides an abstraction atop image processing libraries, enabling per-operation level of control to enable using the right tool for the given operation. Bugs, features, performance are a few of the factors that may influence this
Friendly CLINo custom app required to create your image API
Platform AgnosticGood *Nix & Windows support

Installation

The speed and power of this module would not be possible without the incredible work of libvips (low level image processor), Sharp (depends on libvips), and xxHash for lightning-fast hashing.

Install Sharp via http://sharp.dimens.io/en/stable/install/ - This should also take care of the libvips dependency.

Usage

Standalone Server

While Routing, Throttling, and Storage are all independently usable and configurable, a basic usage example that pulls everything together can be as simple as:

npm install image-steam -g
isteam --isConfig './myconfig.json' --isDefaults './mydefaults.json'

Defaults are optional. Config can also be a CommonJS file:

isteam --isConfig './myconfig.js'

Connect Middleware

Or if you prefer to incorporate into your own app:

var http = require('http');
var imgSteam = require('image-steam');

http.createServer(new imgSteam.http.Connect({ /* options */ }).getHandler())
  .listen(13337, '127.0.0.1')
;

Which is equivalent of cloning this repo and invoking npm start.

Cloning

If you plan to hack on isteam:

git clone git@github.com:asilvas/node-image-steam.git
cd ./node-image-steam
npm install
npm start

^ May require sudo or admin rights.

Performance

While this module provides granular control over HTTP throttling to provide the highest quality of service possible, performance is entirely from Sharp and libvips: http://sharp.dimens.io/en/stable/performance/#performance

Options

isteam --isConfig './myconfig.json'

HTTP Options

{
  "http": [
    { "port": 80 },
    { "port": 443, "ssl": {} }
  ]
}
OptionTypeDefaultInfo
portnumber13337Port to bind to
hoststring"localhost"Host to bind to
backlognumber511TCP backlog
sslTLS OptionsundefinedIf object provided, will bind with TLS Options
ssl.pfxBuffer or stringundefinedIf string, will auto-load from file system
ssl.keyBuffer or stringundefinedIf string, will auto-load from file system
ssl.certBuffer or stringundefinedIf string, will auto-load from file system
globalAgentAgentKeepAliveDefaultsIf object, will initialize the global http(s) agents

Storage Options

{
  "storage": {
    "defaults": {
      "driverPath": "image-steam-s3",
      "endpoint": "s3.amazonaws.com",
      "accessKey": "abc",
      "secretKey": "123"
    }
  }
}
OptionTypeDefaultInfo
defaultsStorageOptionsoptionalIf provided, these options will be the defaults applied to all StorageOptions. Note: At least one of defaults, app, domain, or header are required
appObject<StorageOptions>optionalIf provided, allows for driver-specific options to be applied on a per-request basis, based on the route. If no match is found, the original options provided at initialization will be used. Example: { "some-app": StorageOptions } }.
domainObject<StorageOptions>optionalIf provided, allows for driver-specific options to be applied on a per-request basis, based on the host header. If no match is found, the original options provided at initialization will be used. Example: { "somedomain.com": StorageOptions }. Note: You must still provide root level storage options to act as defaults
headerObject<StorageOptions>optionalIf provided, allows for driver-specific options to be applied on a per-request basis, based on x-isteam-app header. If no match is found, the original options provided at initialization will be used. Example: { "some-other-app": StorageOptions }. Note: You must still provide root level storage options to act as defaults
cacheStorageOptionsoptionalIf provided, allows for driver-specific options to be applied for all cache objects. This effectively puts the api into a read-only mode for original assets, with all writes going exclusively to a single cache store
cacheOptimizedStorageOptionsoptionalIf provided, will attempt to access only optimized original assets from this storage. This permits splitting of cache for sake of replication or eviction policies. If supplied, this also means delete requests will be supplied to both caches
cacheArtifactsbooleantrueIf false, processed image artifacts will not be cached. Useful if limited cache capacity
cacheTTSnumberoptionalIf provided, when artifacts or optimized originals (unless cacheOptimizedTTS is also provided) are fetched from cache, if the age of the object exceeds this time-to-stale value (in seconds), it's age will be reset (implementation varies by storage client, but defaults to copying onto itself). This is a powerful pattern in cases where the cache storage leverages time-to-live, but you do not want active objects to be deleted at the expense of the user experience (and cost). When an object is "refreshed", it will only impact the storage of the stale object, ignoring replicas option. A refresh is out-of-band of the request
cacheOptimizedTTSnumberoptionalIf provided, when optimized original are fetched from cache, if the age of the object exceeds this time-to-stale value (in seconds), it's age will be reset (implementation varies by storage client, but defaults to copying onto itself). This is a powerful pattern in cases where the cache storage leverages time-to-live, but you do not want active objects to be deleted at the expense of the user experience (and cost). When an object is "refreshed", it will only impact the storage of the stale object, ignoring replicas option. A refresh is out-of-band of the request
replicasObject<StorageReplica>optionalIf provided, all cache writes will also be written (out-of-band) to the desired storage replicas. Example: { remoteCache: { cache: { /* options */ }, cacheOptimized: { /* options */ } } }. Where remoteCache is the name of a storage I want to forward my writes to. This feature provides a high degree of flexibility when determining your distribution of data across the globe, without the fixed replication that may be permitted by the storage provided (ala S3 replication).
replicas[].cacheStorageOptionsoptionalSame behavior as storage.cache
replicas[].cacheOptimizedStorageOptionsoptionalSame behavior as storage.cacheOptimized
replicas[].replicateArtifactsbooleantrueIn some cases it may be too costly to replicate all image artifacts, especially when the location you're replicating to may receive small amounts of traffic for the same images. By disabling this flag, only optimized original images will be written to replicas

StorageOptions

OptionTypeDefaultInfo
driverstringdriver or driverPath requiredBundled storage driver to use
driverPathstringdriver or driverPath requiredLoad a custom driver from the desired path, ignoring the driver option
fallbackstring optionalThe app storage to use if reads fail. This is especially useful for proxy scenarios to avoid dependency on a single region
(driver options)All other options will be supplied to the storage driver indicated by driver or driverPath

Advanced storage example:

{
  "storage": {
    "defaults": {
      "driverPath": "image-steam-s3",
      "endpoint": "s3.amazonaws.com
    },
    "app": {
      "app1": {
        "accessKey": "key1",
        "secretKey": "secret1"
      }
    },
    "cache": {
      "endpoint": "<dc1 endpoint>",
      "accessKey": "key2",
      "secretKey": "secret2"
    },
    "cacheTTS": 86400, /* 24 hrs */
    "cacheOptimizedTTS": 43200, /* 12 hrs */
    "replicas": {
      "dc2Cache": {
        "cache": {
          "endpoint": "<dc2 endpoint>",
          "accessKey": "key3",
          "secretKey": "secret3"
        }
      }
    }
  }
}

Bundled Storage Clients

Storage Client - File System
OptionTypeDefaultInfo
driver=fsFile System
pathstringrequiredRoot path on file system
Storage Client - HTTP
OptionTypeDefaultInfo
driver=httpRead-Only driver for web resource
endpointstringrequiredEndpoint of http(s) service
bucketstringoptionalIf provided, will not attempt to take bucket from path
Custom Client

Custom storage types can easily be added via exporting fetch and store. See lib/storage/fs (read/write/delete) or lib/storage/http (read only) for reference.

External Storage Clients

Throttle Options

Throttling allows for fine grain control over quality of service, as well as optimizing to your hardware.

{
  "throttle": {
    "ccProcessors": 4,
    "ccPrefetchers": 20,
    "ccRequests": 100
  }
}
OptionTypeDefaultInfo
ccProcessorsnumber4Number of concurrent image processing operations. Anything to exceed this value will wait (via semaphore) for next availability
ccPrefetchersnumber20Number of concurrent storage request operations. This helps prevent saturation of your storage and/or networking interfaces to provide the optimal experience
ccRequestsnumber100Number of concurrent http requests. Anything to exceed this value will result in a 503 (too busy), to avoid an indefinite pileup

Router Options

Most router defaults should suffice, but you have full control over routing. See Routing for more details.

{
  "router": {
    "originalSteps": {
      "resize": {
        "width": "2560", "height": "1440", "max": "true", "canGrow": "false"
      }
    }
  }
}
OptionTypeDefaultInfo
pathDelimiterstring"/:/"Unique (uri-friendly) string to break apart image path, and image steps
cmdKeyDelimiterstring"/"Separator between commands (aka image steps)
cmdValDelimiterstring"="Separator between a command and its parameters
paramKeyDelimiterstring","Separator between command parameters
paramValDelimiterstring":"Separator between a parameter key and its value
signatureDelimiterstring"/-/"Separator between steps and the signed url
supportWebPbooleantrueSupport for WebP format
originalStepsobjectFull DefaultsSteps performed on the original asset to optimize subsequent image processing operations. This can greatly improve the user experience for very large, uncompressed, or poorly compressed images
hqOriginalStepsobjectFull DefaultsIdentical behavior to originalSteps, but with lossless defaults and reserved only for images smaller than hqOriginalMaxPixels
hqOriginalMaxPixelsnumber400 * 400Max threshold of pixels where the higher quality hqOriginalSteps are used in place of originalSteps
stepsobjectFull DefaultsMapping of URI image step commands and their parameters. This allows you to be as verbose or laconic as desired
beforeProcessfunctionundefinedA function having the signature (routeInfo, options) => null that can manipulate request info before the processing starts

Routing

Routing is left-to-right for legibility.

Routing format:

{path}{pathDelimiter}{cmd1}{cmdValDelimiter}{cmd1Param1Key}{paramValDelimiter}{cmd1Param1Value}{paramKeyDelimiter}{cmdKeyDelimiter}{signatureDelimiter}{signature}?{queryString}

Example URI using Default Options:

some/image/path/:/cmd1=param1:val,param2:val,param3noVal/cmd2NoParams?cache=false

Or a more real-world example:

/my-s3-bucket/big-image.jpg/:/rs=w:640/cr=w:90%25,h:90%25

See Things to Try for many more examples.

Supported Operations

Resize (rs)

Resize an image, preserving aspect or not.

ArgumentTypeDefaultDesc
wNumber/Unitw OR h requiredWidth of new size. Supports Dimension Modifiers
hNumber/Unitw OR h requiredHeight of new size. Supports Dimension Modifiers
mxn/adefaultRetain aspect and use dimensions as the maximum permitted during resize
mn/aoptionalRetain aspect and use dimensions as the minimum permitted during resize. Set to any value to enable
iBooleanfalseIf true will break aspect and resize to exact dimensions
cgBooleanfalseIf true, will allow image to exceed the dimensions of the original
intStringbicubicProcess to use for resizing, from fastest to slowest
nearestUse nearest neighbour interpolation, suitable for image enlargement only
bilinearUse bilinear interpolation, the default and fastest image reduction interpolation
bicubicUse bicubic interpolation, which typically reduces performance by 5%
vsqbsUse vertexSplitQuadraticBasisSpline interpolation, which prevents "staircasing" and typically reduces performance by 5%
lbbUse LBB interpolation, which prevents some "acutance" and typically reduces performance by a factor of 2
nohaloUse Nohalo interpolation, which prevents acutance and typically reduces performance by a factor of 3
bgStringoptionalSupply a background color if applicable. Works in hex(123123) or rgb(123; 123; 123) or rgba(123; 123; 123; 0.5) formats
ftStringfillHow to fit the image. See available options
psStringcentreHow to position the image. See available options

Examples

  1. rs=w:640 - Resize up to 640px wide, preserving aspect.
  2. rs=h:480 - Resize up to 480px tall, preserving aspect.
  3. rs=w:1024,h:768,m,cg:true - Resize to a minimum of 1024 by 768, preserving aspect, and allow it to exceed size of original.

Crop (cr)

Crop an image to an exact size.

ArgumentTypeDefaultDesc
tNumber/Unit0Offset from top. Supports Dimension Modifiers
lNumber/Unit0Offset from left. Supports Dimension Modifiers
wNumber/Unitwidth-leftWidth of new size. Supports Dimension Modifiers
hNumber/Unitheight-topHeight of new size. Supports Dimension Modifiers
aStringccWhere to anchor from, using center-center by default. Top and Left are applied from the anchor. Possible horizontal axis values include left (l), center (c), and right (r). Possible vertical axis values include top (t), center (c), and bottom (b)
ayNumber/Unit50%Can be used to absolutely position the anchor offset vertically using either percentage or pixel values. Also supports offsets relative to the Anchor value
axNumber/Unit50%Can be used to absolutely position the anchor offset horizontally using either percentage or pixel values. Also supports offsets relative to the Anchor value

Examples

  1. cr=t:10%25,l:10%25,w:80%25,h:80%25 - Crop 10% around the edges
  2. cr=w:64,h:64,a:cc - Crop 64x64 anchored from center.
  3. cr=l:10,w:64,h:64 - Crops 64x64 from the left at 10px (ignoring the horizontal axis value of c), and vertically anchors from center since top is not provided.
  4. cr=w:64,h:64,ax:30%25,ay:70%25 - Crops 64x64 anchored (centered) 30% from the left edge of the image and 70% from the top edge of the image.
  5. cr=w:64,h:64,ax:100,ay:200 - Crops 64x64 anchored (centered) 100 pixels from the left edge of the image and 200 pixels from the top edge of the image.
  6. cr=w:64,h:64,a:br,ax:-20%,ay:-30% - Crops 64x64 anchored 20% from the right edge and 30% from the bottom of the image.

Gamma (gm)

Apply a gamma correction by reducing the encoding (darken) pre-resize at a factor of 1/gamma then increasing the encoding (brighten) post-resize at a factor of gamma.

This can improve the perceived brightness of a resized image in non-linear colour spaces.

ArgumentTypeDefaultDesc
gNumber2.2A float between 1 and 3. The default value is 2.2, a suitable approximation for sRGB images

JPEG input images will not take advantage of the shrink-on-load performance optimisation when applying a gamma correction.

Flatten (ft)

Merge alpha transparency channel, if any, with background.

Rotate (rt)

ArgumentTypeDefaultDesc
dNumber0Degrees to rotate the image, in increments of 90. Future implementations may support non-optimized degrees of rotation. Specify 0 to auto-rotate based on orientation

Examples

  1. rt=d:90 - Rotate 90 degrees.

Flip (fl)

Not to be confused with rotation, flipping is the process of flipping an image on its horizontal and/or vertical axis.

ArgumentTypeDefaultDesc
xn/aoptionalFlip on the horizontal axis. No value required
yn/aoptionalFlip on the vertical axis. No value required

Examples

  1. fl=x - Flip horizontally.
  2. fl=x,y - Flip on x and y axis.

Extend (exd)

Extend the size of the image, placing a background in the directions specified.

ArgumentTypeDefaultDesc
tNumber0Extend up
lNumber0Extend left
bNumber0Extend down
rNumber0Extend right
bgStringoptionalSupply a background color if applicable. Works in hex(123123) or rgb(123; 123; 123) or rgba(123; 123; 123; 0.5) formats.

Examples

  1. exd=l:10%,t:10%;r:10%;b:10%,bg:hex(123123) - Extend the image by 10% on all sides and apply a background color #123123.

Quality (qt)

The output quality to use for lossy JPEG, WebP and TIFF output formats.

ArgumentTypeDefaultDesc
qNumber80Value between 1 (worst, smallest) and 100 (best, largest)

Compression (cp)

An advanced setting for the zlib compression level of the lossless PNG output format. The default level is 6.

ArgumentTypeDefaultDesc
cNumber6Number between 0 and 9

Lossless (ll)

Flag format for lossless. Currently only supported by webp, and ignored by other formats. However if the requesting device does not support webp, and lossless is set, it will fallback to png for consistent quality.

ArgumentTypeDefaultDesc
nBooleanfalseNear lossless

Progressive (pg)

Use progressive (interlace) scan for JPEG and PNG output. This typically reduces compression performance by 30% but results in an image that can be rendered sooner when decompressed.

Can be useful for images that always need to be seen ASAP, but should not be used otherwise to save bandwidth.

Examples

  1. rs=w:3840/pg - Create a big 4K-ish image and use progressive rendering to demonstrate value in some use cases.

Format (fm)

Supported, but not enabled by default in Router Options. Recommended to keep disabled in router, as internally format will be best determined by the individual request.

Override the auto-detected optimal format to output. Do not use this unless you have good reason.

ArgumentTypeDefaultDesc
fStringrequiredFormat to output: "jpeg", "png", "webp", or "gif"

Metadata (md)

Carry metadata from the original image into the outputted image. Enabled by default.

ArgumentTypeDefaultDesc
eBooleantrueSet to false to not preserve metadata from original

Sharpen (fx-sp)

ArgumentTypeDefaultDesc
rNumberoptionalSharpening mask to apply in pixels, but comes at a performance cost
fNumber1.0Sharpening to apply to flat areas
jNumber2.0Sharpening to apply to jagged areas

Examples

  1. fx-sp=r:3,f:5,j:5 -

Blur (fx-bl)

Fast mild blur by default, but can override the default sigma for more control (at cost of performance).

ArgumentTypeDefaultDesc
sNumber2.0The approximate blur radius in pixels, from 0.3 to 1000

Examples

  1. fx-bl=s:5 - Blur using a stima radius of 5 pixels.

Greyscale (fx-gs)

Convert to 8-bit greyscale.

Normalize (fx-nm)

Enhance output image contrast by stretching its luminance to cover the full dynamic range. This typically reduces performance by 30%.

Info ($info)

Returns all known information about the image.

{
  "info": {
    "path": "family.jpg",
    "lastModified": "2017-10-30T23:27:06.000Z",
    "format": "webp",
    "width": 1706,
    "height": 2560,
    "space": "srgb",
    "channels": 3,
    "depth": "uchar",
    "density": 600,
    "hasProfile": true,
    "hasAlpha": false,
    "orientation": 1,
    "hash": 3979799324,
    "byteSize": 1337334
  }
}

Colors ($colors)

A new (ALPHA) command to retrieve a list of palette colors from image in JSON format.

ArgumentTypeDefaultDesc
wNumber100Width of image. w OR h must be set.
hNumberundefinedHeight of image. w OR h must be set.
mcNumber10Max colors to return
ccNumber4Cubic cells (3 or 4)
mnBooleantrueUse mean color (true) or median color (false)
oStringdistanceOrder of results, distance between colors, or based on cell density

See Image-Pal for more details.

Examples

  1. $colors - Get colors using default options.
  2. $colors=mn:false - Get colors using median color logic (ideal for logos).

Dimension Modifiers

Dimension modifiers can be applied to any values where size and location are represented.

Pixels

Any numeric value around measurement without explicit unit type specified is implicitly of type px.

Examples

  1. rs=w:200,h:300 - 200x300 pixels
  2. rs=w:200px,h:300px - Identical to #1
  3. cr=t:15,l:10,w:-10,h:-15 - Using pixel offsets

Percentage

A percentage applied to original value by supplying the percentage (%) modifier. Notice that % must be encoded as %25.

Examples

  1. rs=w:50%25,h:50%25 - 50% of source width and height
  2. cr=t:15%25,l:10%25,w:80%25,h:70%25 - 15% from top and bottom, 10% from left and right

Offset

To be used in conjunction with locations or dimensions, a plus (+) or minus (-) may be used to imply offset from original.

Examples

  1. rs=w:+50px,h:-50px - 50px wider than original, 50px shorter than original
  2. rs=w:+10%25,h:-10%25 - 10% wider than original, 10% shorter than original

Processor Options

Relying on sharp/libvips, and potentially other image processors in the future.

{
  "processor": {
    "sharp": {
      "cache": {
        "memory": 50, "files": 20, "items": 200
      },
      "concurrency": 0,
      "simd": false
    }
  }
}
OptionTypeDefaultInfo
sharpSharpOptions
sharp.cacheCacheOptions
sharp.cache.memorynumber50Maximum memory in MB to use for this cache
sharp.cache.filesnumber20Maximum number of files to hold open
sharp.cache.itemsnumber200Maximum number of operations to cache
sharp.concurrencynumber0Number of threads to process each image in parallel. A value of 0 will use all available cores
sharp.simdbooleanfalseImproves the performance of resize, blur and sharpen operations by taking advantage of the SIMD vector unit of the CPU, e.g. Intel SSE and ARM NEON
sharp.defaultsSharpConstructorundefinedOptions supplied to constructor

Error Handling

All major classes inherit from EventEmitter. By default http.start will log errors to stderr, but can be disabled in options by setting log.errors to false if you want more fine grained control.

Connect Errors

The next level down is Connect, and all child classes (shown below) will bubble up through this class:

var http = require('image-steam').http;
var connect = new http.Connect();
connect.on('error', function(err) { /* do something */ });

Throttle Errors

A lower level class with no children:

var http = require('image-steam').http;
var throttle = new http.Throttle();
throttle.on('error', function(err) { /* do something */ });

Processor Errors

A lower level class with no children:

var Processor = require('image-steam').Processor;
var processor = new Processor();
processor.on('error', function(err) { /* do something */ });

Storage Errors

A lower level class with no children:

var Storage = require('image-steam').Storage;
var storage = new Storage();
storage.on('error', function(err) { /* do something */ });

Security Options

Security allows protecting the image resources behind each tranformation. This will sign resource+transformation with the specified secret.

A signed url would look like this:

/my-s3-bucket/big-image.jpg/:/rs=w:640/cr=w:90%25,h:90%25/-/k5G5dlr9
{
  "security": {
    "enabled": true,
    "secret": keyboard_cat,
    "algorithm": 'sha1'
  }
}
OptionTypeDefaultInfo
enabledbooleanfalseIf this feature is enabled, all requests urls will must be signed
secretstringrequiredThe signing secret
algorigthmstringsha1The hashing algorithm. Complete list: openssl list-cipher-algorithms

The following snippet shows how to sign a url (using the library defaults).

var crypto = require('crypto');
var shasum = crypto.createHash(YOUR_HASHING_ALGORITHM); // sha256 recommended
shasum.update('/' + IMAGE_PATH + '/:/' + IMAGE_STEPS + YOUR_SECRET);
var signature = shasum.digest('base64').replace(/\//g, '_').replace(/\+/g, '-').substring(0, 8);
var url = '/' + YOUR_IMAGE_PATH + '/:/' + YOUR_IMAGE_STEPS + '/-/' + signature;

Things to try:

  • rs=w:640 - Resize to 640 width, retain aspect
  • rs=w:640/cr=l:5%,t:10%,w:90%,h:80% - Same as above, and crop 5% of the sides and 10% of the top and bottom
  • rs=w:640/cr=l:5%,t:10%,w:90%,h:80%/fx-gs - Same as above, and apply greyscale effect.
  • rs=w:640/cr=l:5%,t:10%,w:90%,h:80%/fx-gs/qt=q:20 - Same as above, and use a low quality of 20.
  • rs=w:64,h:64,m/cr=w:64,h:64/fx-gs - Resize image to a minimum of 64x64 w/o breaking aspect so that we can then crop the image and apply greyscale.
  • fx-bl=s:5 - Apply a blur

License

MIT

Keywords

FAQs

Last updated on 04 Nov 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc