Sharp - high performance Node.js image processing

[scarcoco]

查看 responsive-loader 时了解到 sharp 和 jimp，之前项目用到了 gm 看到 sharp 的介绍还是有点好奇，所以决定研究一下。

介绍

sharp

https://sharp.pixelplumbing.com/

High performance Node.js image processing，resizing an image is typically 4x-5x faster than using the quickest ImageMagick and GraphicsMagick settings due to its use of libvips .

libvips

https://github.com/libvips/libvips

A fast image processing library with low memory needs

[scarcoco]

安装慢问题

安装慢问题可以通过设置 sharp_dist_base_url 配置，具体参考：https://sharp.pixelplumbing.com/install#custom-prebuilt-binaries

遇到问题

之前一直设置的地址为https://npm.taobao.org/mirrors/sharp-libvips/，导致提示 checksum failure。

根据上面的文档，如果下载地址为：

# 下载地址
https://hostname/path/libvips-x.y.z-platform.tar.gz

npm config set sharp_dist_base_url "https://hostname/path/"
npm install sharp

所以实际需要根据安装的版本设置到对应的版本位置（注意最后的斜杠），否则下载错误。

yarn config set sharp_dist_base_url "https://npm.taobao.org/mirrors/sharp-libvips/v8.9.1/"

[scarcoco]

性能对比

https://sharp.pixelplumbing.com/performance

[scarcoco]

实例代码

format

const sharp = require('sharp')

const input = sharp('assets/input.jpg')

const exts = ['png', 'webp']
exts.forEach(ext => {
	input.toFormat(ext)[ext]().toFile(`outputs/convert-to.${ext}`)
})

meta

const sharp = require('sharp')

sharp('assets/photo.jpeg').metadata().then((metadata) => {
	console.log(JSON.stringify(metadata))
}).catch(err => {
	console.log(`metadata error: ${err}`)
})

sharp('assets/photo.jpeg').stats().then((stats) => {
	console.log(JSON.stringify(stats))
}).catch(err => {
	console.log(`stats error: ${err}`)
})

operation

const sharp = require('sharp')
	
sharp('assets/input.jpg').flip().toFile('outputs/operation-flip.jpg')
sharp('assets/input.jpg').flop().toFile('outputs/operation-flop.jpg')
sharp('assets/input.jpg').sharpen(2).toFile('outputs/operation-sharpen.jpg')
sharp('assets/input.jpg').median(5).toFile('outputs/operation-median.jpg')
sharp('assets/input.jpg').blur(3.5).toFile('outputs/operation-blur.jpg')
sharp('assets/input.jpg').flatten({ background: { r: 255, g: 255, b: 255 } }).toFile('outputs/operation-flatten.jpg')

sharp('assets/input.jpg').gamma(3.0, 1.0).toFile('outputs/operation-gamma.jpg')
sharp('assets/input.jpg').negate().toFile('outputs/operation-negate.jpg')
sharp('assets/input.jpg').normalise().toFile('outputs/operation-normalise.jpg')
sharp('assets/input.jpg').normalize().toFile('outputs/operation-normalize.jpg')

// 卷积
sharp('assets/input.jpg').convolve({ 
	width: 3, 
	height: 3, 
	kernel: [-1, 0, 1, -2, 0, 2, -1, 0, 1] 
}).toFile('outputs/operation-convolve-3x3.jpg')

sharp('assets/input.jpg').convolve({ 
	width: 4, 
	height: 4, 
	kernel: [
		3, 1, -1, -1,
		1, 1, -1, -1,
		1, -1, -1, 1, 
		1, 1, -1, -1
	] 
}).toFile('outputs/operation-convolve-4x4.jpg')

sharp('assets/input.jpg').threshold(155).toFile('outputs/operation-threshold-155.jpg')
sharp('assets/input.jpg').threshold(60).toFile('outputs/operation-threshold-60.jpg')
sharp('assets/input.jpg')
	.boolean('assets/photo.jpeg', 'or').toFile('outputs/operation-boolean.jpg')

sharp('assets/input.jpg')
	.linear(0.1, 100).toFile('outputs/operation-linear.jpg')

sharp('assets/input.jpg').recomb([
	[0.3588, 0.7044, 0.1368],
	[0.2990, 0.5870, 0.1140],
	[0.2392, 0.4696, 0.0912],
]).toFile('outputs/operation-recomb.jpg')

// hsb 调整图片
sharp('assets/input.jpg')
	.modulate({
		brightness: 0.5,
		saturation: 0.5,
		hue: 90
	}).toFile('outputs/operation-modulate.jpg')

sharp('assets/input.jpg')
	.tint('#F86').toFile('outputs/operation-tint.jpg')

sharp('assets/input.jpg')
	.greyscale().toFile('outputs/operation-greyscale.jpg')

sharp('assets/input.jpg')
	.extractChannel('red')
	.toFile('outputs/operation-extract-channe.jpg')

resize

const sharp = require('sharp')

sharp('assets/input.jpg')
	.resize(500, 500)
	.toFile('outputs/resize-500.jpg', function(err) {
		if (err) {
			console.log(`resize: err, ${err}`)
		} else {
			console.log('resize: ok')
		}
	})