图片调整器：让图片处理更便捷

图片调整器：让图片处理更便捷

image-resizerOn-the-fly image resizing using Node.js and GraphicsMagick. Heroku Ready!项目地址:https://gitcode.com/gh_mirrors/im/image-resizer

图片调整器（Image-Resizer） 是一个基于 Node.js 的应用程序，它作为一个自定义的源，能直接在CDN上实时地对图像进行尺寸调整和优化。这个项目在Heroku上可以直接运行，同时也兼容其他云提供商，如AWS。

主要目标是消除现代Web应用中在上传和存储图片时需要预先设定图像尺寸的需求。

简介

启动并运行自己的 图片调整器 非常简单，只需要执行命令行工具 (image-resizer new)，设置环境变量，然后就可以启动了！

应用基于Express.js，并利用了高性能的图像处理库sharp来处理图像。此外，还内置了一个插件架构，支持多种图像来源，包括S3、Facebook、Twitter、YouTube和Vimeo等，以及本地文件系统（开发模式下可用）。

当通过CDN请求新的图像尺寸时，图片调整器 会从云端抓取原始图片，按指定的尺寸进行缩放，优化文件类型，甚至可以对图像进行滤镜处理。所有的响应都是定制的，以充分利用CDN的功能。

快速开始

$ npm install -g image-resizer gulp
$ mkdir my_fancy_image_server
$ cd my_fancy_image_server
$ image-resizer new
$ npm install
$ gulp watch

这将创建一个新的目录结构，包含所有必要的文件来运行 图片调整器 。核心文件是 index.js，它加载了Express配置和路由。

此外，图片调整器 可以作为任何项目的一个node_module单独添加，并使用流接口运行。./test.js 文件包含了一个示例，展示如何在Express后面运行该应用程序。

架构与插件

最新的重构代码利用了Node.js的流特性，受到了Gulp的启发，避免了旧版本中过度依赖Promise导致的代码混乱。

现在的实现不再需要把修改过的图片推送到S3上，而是充分利用CDN的存储功能。这样不仅提高了服务器性能，也优化了客户端的加载速度。Google PageSpeed 工具现在对由 图片调整器 实例返回的302重定向更加友好。

同时，通过插件机制，您可以覆盖或扩展已有的图像源。

依赖与部署

图片调整器 仅需一个有效的Node.js/NPM环境和 libvips。Heroku部署所需的构建包信息已经包含在内。

环境变量

通过环境变量配置 图片调整器 ，这是为了适应Heroku部署。

在Heroku控制台中设置环境变量：

heroku config:set AWS_ACCESS_KEY_ID=abcd1234

对于Heroku部署，至少需要以下环境变量：

• AWS_ACCESS_KEY_ID
• AWS_SECRET_ACCESS_KEY
• AWS_REGION
• S3_BUCKET
• NODE_ENV

如果你选择将默认源改为非S3，则只需 NODE_ENV 和您所需默认源的配置。

本地和非Heroku部署时，可以通过.env文件加载环境变量。src/config/environment_vars.js 中包含了默认值。

插件

图片调整器 支持各种自定义插件，用于图像源和过滤器。预装了一些插件，但可以根据需求覆盖或替换。

使用 image-resizer new 创建的目录结构中会包含一个plugins目录，初始化脚本会在这里找到并插入到应用中。

优化

利用sharp提供的选项，你可以调整图像质量（1-100），并决定是否开启渐进式编码。这些参数可通过环境变量设置。

使用CDN

尽管 图片调整器 可以独立运行，但它大部分功能只有在CDN后方才能发挥出来。目前只在AWS CloudFront上有实际运行经验，但其他CDN的工作原理应该类似。

使用方法

关键的图像生成路由如下：

http://my.cdn.com/:modifiers/path/to/image.png[:format][:metadata]

修饰符是一个连字符分隔的字符串，指定了需要的修改，包括：

• 宽度（width）：例如 w200
• 高度（height）：例如 h500
• 正方形（square）：例如 s50
• 剪裁（crop）：例如 cfill
• 垂直偏移（top）：例如 y12
• 水平偏移（left）：例如 x200
• 重力（gravity）：例如 gs, gne
• 过滤器（filter）：例如 fsepia
• 外部源（external）：例如 efacebook
• 质量（quality）：例如 q90

支持的剪裁修饰符有：

• fit：保持原比例，使图像完全适合新尺寸
• fill：保持原比例，缩小较短边以填充，较长边将被裁剪
• cut：不保持比例，不缩放，只根据gravity或x/y进行裁剪
• scale：不保持比例，强制图像适应新尺寸
• pad：保持原比例，缩放以完全适合新尺寸，添加填充以达到要求尺寸

示例：

• http://my.cdn.com/s50/path/to/image.png
• http://my.cdn.com/h50-w100/path/to/image.png
• http://my.cdn.com/s50-gne/path/to/image.png
• http://my.cdn.com/path/to/image.png - 请求原始图像，会进行优化但不改变大小

尺寸逻辑

注意，这个应用不会放大图像，我们致力于保持图像的高质量。所以，如果一个高度为h400的请求，而图像本身只有200px高，是不会对其进行放大的。

S3源

默认情况下， 图片调整器 使用S3作为图像源。要访问S3对象，只需提供桶内的完整路径，去掉桶名，例如：

https://s3.amazonaws.com/sample.bucket/test/image.png

翻译成：

http://my.cdn.com/test/image.png

外部源

还可以从外部源拉取图像，并将其放在自己CDN的背后，这对于Facebook或Vimeo这样的服务很有用，因为它们的加载时间很不稳定。外部源同样可以启用上述任何修改参数。

除了预装的外部源，也可以通过 EXTERNAL_SOURCE_* 环境变量轻松添加自己的基本外部源。例如，要将维基百科添加为外部源，设置以下环境变量：

EXTERNAL_SOURCE_WIKIPEDIA: 'https://upload.wikimedia.org/wikipedia/'

然后，可以使用 ewikipedia 修饰符请求图像，例如：

http://my.cdn.com/ewikipedia/en/7/70/Example.png

这等同于：

https://upload.wikimedia.org/wikipedia/en/7/70/Example.png

请注意，Twitter需要完整的认证信息，因为需要调用其API来获取个人资料图片。

社交来源的图像可以设置更短的过期时间（通过 IMAGE_EXPIRY_SHORT 环境变量），以便更快地过期。

你也可以通过插件目录轻松编写新的源流。示例可在 src/streams/sources/ 找到。

输出格式

可以通过附加扩展名来转换图像格式：

• http://my.cdn.com/path/to/image.png.webp

支持的输出格式有：JPEG（.jpg/.jpeg）、PNG（.png）和WEBP（.webp）。

##元数据请求

图片调整器 可以将图像元数据作为一个JSON端点返回：

• http://my.cdn.com/path/to/image.png.json

默认情况下，所有其他图像请求都会删除元数据，除非设置了 REMOVE_METADATA 环境变量为false。

Heroku部署

项目中包含.buildpacks文件和Procfile，可用于Heroku部署。在Heroku控制台上执行以下命令，以启用正确的构建包（从这里复制）。

heroku config:set BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-multi

.buildpacks文件会负责安装过程。

如前所述，为了正确运行 图片调整器 ，有一些最小的配置变量需要设置。

值得注意的是，由于GCC的一些问题，sharp不能在旧的Heroku堆栈上使用。目前它需要 cedar-14 堆栈。

本地开发

要在本地运行 图片调整器 ，假设你在OSX环境中安装了Node.js和NPM，可以按照以下步骤操作 - NVM（Node Version Manager） 很有用：

npm install gulp -g
./node_modules/image_resizer/node_modules/sharp/preinstall.sh
npm install
gulp watch

Gulp设置包括nodemon，可以在代码更改时自动重启应用。若需要在除3001之外的端口运行，可以在.env文件中设置 PORT 变量。

测试可使用 gulp test 命令运行。

更早版本的Promise基础代码

注意：项目已进行了彻底的重构和改进，如果你需要查看旧版本，可以查看v0.0.1标签。

---

这个开源项目 图片调整器 提供了一种高效、灵活的方式来管理和优化你的图像资源，无论是在云还是本地，都能轻松地满足你的需求。立即尝试，让你的图片服务提升到新的水平！

image-resizerOn-the-fly image resizing using Node.js and GraphicsMagick. Heroku Ready!项目地址:https://gitcode.com/gh_mirrors/im/image-resizer