一个webpack的loader,用来快捷修改静态图片。
NOTE: Node v10+ and webpack v4+ are supported and tested.
在开发时你不用再切换到图片编辑器修改图片了,这个loader可以帮你快捷的修改图片大小,替换颜色,翻转或旋转图片。
npm install --save-dev static-image-jimp-loader
import jimp from 'jimp'
const webpackConfig = {
module: {
rules: [
{
test: /\.(png|jpe?g|bmp|gif)(\?.*)?$/,
use: [
{
loader: 'static-image-jimp-loader',
options: {
// 包含高度和宽度范围内的图像。
//
// value: [width, height, align?, mode?]
contain: [750, jimp.AUTO, jimp.VERTICAL_ALIGN_TOP | jimp.HORIZONTAL_ALIGN_LEFT, jimp.RESIZE_BEZIER],
// 缩放图像,使给定的宽度和高度保持纵横比。
//
// value: [width, height, align?, mode?]
cover: [750, jimp.AUTO, jimp.VERTICAL_ALIGN_TOP | jimp.HORIZONTAL_ALIGN_LEFT, jimp.RESIZE_BEZIER],
// 沿图像的x轴或y轴翻转图像。
//
// value: [horizontal, vertical]
flip: [true, false],
// 调整图像大小。
//
// value: [width, height, mode?]
resize: [750, jimp.AUTO, jimp.RESIZE_BEZIER],
// 旋转图像。
//
// value: [deg, mode?]
rotate: [90, jimp.RESIZE_BEZIER],
// 将图像均匀缩放一个因子。
//
// value: [f, mode?]
scale: [1, jimp.RESIZE_BEZIER],
// 将图像缩放到适合具有给定宽度和高度的矩形内的最大尺寸。
//
// value: [w, h, mode?]
scaleToFit: [100, 100, jimp.RESIZE_BEZIER],
// 各种颜色处理方法。
//
// 支持jimp的image.color方法,See https://github.com/oliver-moran/jimp/tree/master/packages/plugin-color
color: [{ apply: 'red', params: [100] }],
// 特殊路径资源配置。
//
// value: 与整体配置差不多,special中的special无效
special: [
{
test: /img\/test\.png/,
options: {
contain: [750, jimp.AUTO, jimp.VERTICAL_ALIGN_TOP | jimp.HORIZONTAL_ALIGN_LEFT, jimp.RESIZE_BEZIER],
color: [{ apply: 'green', params: [100] }],
...
}
}
],
scale: [1, jimp.RESIZE_BEZIER],
// 是否向下合并配置。
//
// value: true|false
merge: true,
// 使用的方法顺序。
//
// value: ['resize', 'contain', 'cover', 'flip', 'rotate', 'scale', 'scaleToFit', 'color']
methods: ['cover', 'color']
}
}
]
}
]
}
}
module.exports = webpackConfig
// test.js
import '@/img/test_image.jpg?cover=500,500&color=red,100,green,100&rotate=45,bezier'
// 以下链接参数相同但顺序不同,这会创建两个module,生成两张图片。另外顺序不同也会在编译时造成执行方法的顺序不同,生成的图片也就会不同。
// import '@/img/test_image.jpg?cover=500,500&rotate=45,bezier&color=red,100,green,100'
// import '@/img/test_image.jpg?cover=500,500&color=red,100,green,100&rotate=45,bezier'
// 在loader中这个图片的query
{
cover: [500, 500],
color: [
{ apply: 'red': params: [100] },
{ apply: 'green': params: [100] }
],
rotate: [45, jimp.RESIZE_BEZIER]
}