这是一个基于 Nestjs + sharp 的图像处理模块,可以集成到你的 Nodejs项目中或独立部署形成一个图像处理服务。
AssetModule
服务提供本地文件上传管理,也将支持配置其他存储策略,例如:阿里云,并支持实时图像转换,这个模块有以下特点:
转换模式
Asset 预览图像可以转换(调整尺寸 & 裁剪)在请求的 url 中添加查询参数:
http://localhost:3000/assets/some-asset.jpg?w=500&h=300&mode=resize
上面的 URL 将返回 宽 500px x 高 300px 的 some-asset.jpg
图像
预览模式
mode
参数可以是裁剪 crop
或调整尺寸 resize
。
/** 图像文件的转换模式 */
export type ImageTransformMode = 'crop' | 'resize';
焦点
当裁剪图像时(mode=crop
),将试图在裁剪帧中保持图像最 "有特点" 的区域。它是通过寻找图像中熵值最高的区域(图像中的热点区域)。然而,有时这个并不完美,大部分仍可能被删除掉。
所以焦点的作用就是可以通过传递fpx
和fpy
查询参数来手动指定,这些是标准化座标(介于0 和 1 之间的数字),所以 fpx=0&fpy=0
对应于图像的左上角。
例如,假设有一个比较宽的景观图像,我们想要修剪成正方形。主题是一所最右边的热气球。下面的查询将把它裁剪成以热气球为中心的正方形
http://localhost:3000/assets/landscape.jpg?w=300&h=300&mode=crop&fpx=0.6&fpy=0.5
转换模式预设
预设可以定义允许使用单个预设名称,而不是指定的宽度、高度和模式。预设是通过 AssetServerOptions 配置:
/**
* @description
* 配置选项
*/
export interface AssetServerOptions {
/**
* @description
* asset server 的路由
*/
route: string;
/**
* @description
*
* 当使用 {@link LocalAssetStorageStrategy}时,将 asset 上传至本地目录
*/
assetUploadDir: string;
/**
* @description
* Asset 文件的完整URL前缀。示例:"https://assets.picker.cc/"
*
* 如果没有配置,将尝试猜测请求和配置的路由,然后,除了最简单的情况,这个猜测可能不会得到正确的结果。
*/
assetUrlPrefix?: string;
/**
* @description
* 生成预览图像的最大宽度(px)
*
* @default 1600
*/
previewMaxWidth?: number;
/**
* @description
* 生成预览图像的最大高度(px)
*
* @default 1600
*/
previewMaxHeight?: number;
/**
* @description
* 图像转换预设 {@link ImageTransformPreset} 对象数组。
*/
presets?: ImageTransformPreset[];
/**
* @description
* 定义 asset 文件的命名策略
*
* @default HashedAssetNamingStrategy
*/
namingStrategy?: AssetNamingStrategy;
/**
* @description
* 用来配置 {@link AssetStorageStrategy} 的一个有用的函数。默认情况我们使用本地存储策略 {@link LocalAssetStorageStrategy},
* 但当需要使用云存储时就需要用到它来进行配置
*
* @default () => LocalAssetStorageStrategy
*/
storageStrategyFactory?: (
options: AssetServerOptions,
) => AssetStorageStrategy | Promise<AssetStorageStrategy>;
}
例如,定义以下预置:
new AssetModule({
// ...
presets: [
{ name: 'my-preset', width: 85, height: 85, mode: 'crop' },
],
})
意味着请求:
http://localhost:3000/assets/some-asset.jpg?preset=my-preset
等价于:
http://localhost:3000/assets/some-asset.jpg?w=85&h=85&mode=crop
AssetModule带有以下预置:
name | width | height | mode |
---|---|---|---|
tiny | 50px | 50px | crop |
thumb | 150px | 150px | crop |
small | 300px | 300px | resize |
medium | 500px | 500px | resize |
large | 800px | 800px | resize |
缓存
默认情况下,AssetModule 将缓存每个转换的图像,所以转换只需要执行一次给定的配置。
关闭缓存可以使用 ?cache=false
查询参数。