• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

rizalp/gulp-sharp: Gulp plugin to resize image using sharp (libvips binding for ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

rizalp/gulp-sharp

开源软件地址(OpenSource Url):

https://github.com/rizalp/gulp-sharp

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

gulp-sharp

This Project Is No Longer Maintained

Because of other occupation, I can't maintain it anymore. If you find this project usefull, please fork it. Please note that new issues / pr messages will be ignored.

Thanks.

resize image in your gulp build with sharp

Prerequisites

  • Node.js v0.10+
  • libvips v8.0+

On Ubuntu 14.x and 15.04 the default libvips package is not compatible with versions of Sharp.

To manually install VIPS from source, follow the instructions at Build VIPS on Ubuntu

The source is available from the VipsWiki site.

For other system, more info can be seen at sharp Prerequisites.

Installation

In your project directory, type:

npm install --save-dev gulp-sharp

Then, you can use gulp-sharp by simply requiring it

var gulpSharp = require('gulp-sharp');

Usage examples

gulp-sharp can consume emitted data from gulp.src in two ways:

  1. As-is, meaning it will read the file.contents property of vinyl file objects
  2. Only read the file.path property of vinyl file objects, by specifying {read:false} in gulp.src options.

The former way is more compatible with other gulp plugins (since it just modify the contents of the file (Buffer), aka the standard way). While the latter may provide better performance due to the use of mmap internally by libvips.

First Way:

var gulp = require('gulp');
var gulpSharp = require('gulp-sharp');

gulp.task('image-resize', function(){

  return gulp.src( 'content/**/*.+(jpeg|jpg|png|tiff|webp)' )
    .pipe(gulpSharp({
      resize : [1280, 800],
      max : true,
      quality : 60,
      progressive : true
    }))
    .pipe(gulp.dest('output'));

});

Second Way, by specifying options.read as false in gulp.src so the file.contents property will be null documentation :

var gulp = require('gulp');
var gulpSharp = require('gulp-sharp');

gulp.task('image-resize', function(){

  return gulp.src( 'content/**/*.+(jpeg|jpg|png|tiff|webp)', {read : false} )
    .pipe(gulpSharp({
      resize : [1280, 800],
      max : true,
      quality : 60,
      progressive : true
    }))
    .pipe(gulp.dest('output'));

});

Options

Type: Object

This options will be used internally to assemble sharp pipeline.

options.resize

Type: Array; Default: undefined

Required property. gulp-sharp will throw an error if you omit this property. It contains two element, [width, height] which is a Number. You can pass null or undefined to auto-scale.

Example:

{ read : [1024, 600] } // resize width to 1024px, and height 600px
{ read : [1024] } // resize width to 1024px and auto-height
{ read : [,600] } // auto-width, and resize to 600px

options.withoutEnlargement

Type: Boolean; Default: true

Optional. Do not enlarge the output image if the input image width or height are already less than the required dimensions.

options.max

Type: Boolean; Default: false

Optional. Use this if you'd like to preserve aspect ratio of the image when you specify both width and height in the options.resize property.

Both width and height must be provided via resize otherwise the behaviour will default to crop.

options.crop

Type: String; Default: ''; Possible Value: 'north', 'east', 'south', 'west', 'center'

Optional. Crop the image with the gravity (Possible Values) to the exact size specified by options.resize.

options.interpolateWith

Type: String; Default: ''; Possible Value: 'nearest', 'bilinear', 'bicubic', 'vertexSplitQuadraticBasisSpline', 'locallyBoundedBicubic', 'nohalo'

Optional. You can omit this property, and sharp will use bilinear interpolation by default. Head over to interpolateWith for more information about other interpolation algorithm

options.embedWhite

Type: Boolean; Default: false

Optional. Embed the resized image on a white background of the exact size specified.

options.embedBlack

Type: Boolean; Default: false

Optional. Embed the resized image on a black background of the exact size specified.

options.rotate

Type: Boolean or Number; Default: false; Possible Value: true, 0, 90, 180, 270

Optional. Rotate the output image by either an explicit angle (Number) or auto-orient based on the EXIF Orientation tag (true).

options.sharpen

Type: Boolean; Default: false

Optional. Perform a mild sharpen of the output image. This typically reduces performance by 10%.

options.gamma

Type: Number; Default: 0; Possible Value: Real Number between 1 and 3

Optional. 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.

Recomended value is 2.2, a suitable approximation for sRGB images.

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

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

options.grayscale

Type: Boolean; Default: false

Optional. Convert to grayscale

options.withMetadata

Type: Boolean; Default: false

Optional. Include all metadata (ICC, EXIF, XMP) from the input image in the output image. The default behaviour is to strip all metadata.

options.quality

Type: Number; Default: 80; Possible Value: Number between 1 and 100

Optional. The output quality to use for lossy JPEG, WebP and TIFF output formats. The default quality is 80. This property is ignored for PNG images

options.progressive

Type: Boolean; Default: false

Optional. 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.

options.compressionLevel

Type: Number; Default: 6; Possible Value: Number between -1 and 9

Optional. An advanced setting for the zlib compression level of the lossless PNG output format. The default level is 6. This property is ignored if image input is not png

options.output

Type: String; Default: ''; Possible Value: 'jpeg', 'png', 'webp'

Optional. Use this property if you'd like to convert image input into another image format.

License

MIT © Mohammad Shahrizal Prabowo




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap