美文网首页Nestjs前端应用
nodejs 图片服务模块

nodejs 图片服务模块

作者: 思考蛙 | 来源:发表于2021-07-29 09:53 被阅读0次

这是一个基于 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),将试图在裁剪帧中保持图像最 "有特点" 的区域。它是通过寻找图像中熵值最高的区域(图像中的热点区域)。然而,有时这个并不完美,大部分仍可能被删除掉。

所以焦点的作用就是可以通过传递fpxfpy查询参数来手动指定,这些是标准化座标(介于0 和 1 之间的数字),所以 fpx=0&fpy=0 对应于图像的左上角。

例如,假设有一个比较宽的景观图像,我们想要修剪成正方形。主题是一所最右边的热气球。下面的查询将把它裁剪成以热气球为中心的正方形


landspace.png

http://localhost:3000/assets/landscape.jpg?w=300&h=300&mode=crop&fpx=0.6&fpy=0.5

landspace-crop.jpg

转换模式预设

预设可以定义允许使用单个预设名称,而不是指定的宽度、高度和模式。预设是通过 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
image.png

缓存

默认情况下,AssetModule 将缓存每个转换的图像,所以转换只需要执行一次给定的配置。
关闭缓存可以使用 ?cache=false 查询参数。

项目源码

https://github.com/baisheng/nestjs-image-server

相关文章

  • nodejs 图片服务模块

    这是一个基于 Nestjs + sharp 的图像处理模块,可以集成到你的 Nodejs项目中或独立部署形成一个图...

  • nodejs静态资源服务器

    缩写含义 http是nodejs的服务模块 url是url路由模块 fs是文件服务器模块 nodejs服务器的创建...

  • nodejs模块

    nodejs模块 nodejs系统自带的模块:http:协议请求模块;创建服务器:http.createServe...

  • nodejs静态资源服务器

    nodejs静态资源服务器 1、http 是nodejs的服务模块 2、url 是url路由模块 3、fs 是文件...

  • 手写一个后端服务器

    一、nodejs写服务器 var http = require('http') //是nodejs的内置模块 - ...

  • nodejs大纲

    nodejs大纲 目录 nodejs是什么 使用nodejs创建一个服务器(接口) nodejs的模块系统 nod...

  • 你所知道的node.js

    目录 nodejs是什么 使用nodejs创建一个服务器(接口) nodejs的模块系统 nodejs文件系统 路...

  • nodejs复习大纲

    nodejs复习 模块http 服务 let http = require('http'); http.cre...

  • NodeJS 常用模块介绍

    http 模块 作用Nodejs提供了http模块,用来构建服务器 引入方法const http = requir...

  • 前端面试2021-008

    1、如何通过NodeJS开发一个服务端应用? 使用nodejs的http内建模块开发 const http = r...

网友评论

    本文标题:nodejs 图片服务模块

    本文链接:https://www.haomeiwen.com/subject/znlxvltx.html