帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:图像大小调整  Heroku  图像  resizing  Ready  Graphicsmagick  拿来就用  
On-the-fly image resizing using Node.js and GraphicsMagick. Heroku Ready!

  • 源代码名称:image-resizer
  • 源代码网址:http://www.github.com/jimmynicol/image-resizer
  • image-resizer源代码文档
  • image-resizer源代码下载
  • Git URL:
    git://www.github.com/jimmynicol/image-resizer.git
  • Git Clone代码到本地:
    git clone http://www.github.com/jimmynicol/image-resizer
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/jimmynicol/image-resizer
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • 图像调整器

    image-resizer 是一个 node.js 应用程序,它作为一个定制的源到你的CDN,并将调整/优化图像的on-the-fly和。 已经就绪,但也可以轻松部署到任何云提供者( 已经在AWS上成功使用)。

    这个项目的主要目标是抽象出在现代网络应用程序的上传和存储阶段设置图像尺寸的需要。

    概述

    构建和部署自己的image-resizer 版本与运行cli工具( image-resizer new ) 一样简单,设置你的 Heroku配置,并启动它。

    基于 Express.js image-resizer 使用 sharp 在引擎盖下修改和优化你的图像。

    还有一个插件架构,允许你添加你自己的图像源。 它支持以下功能: S3,Facebook,Twitter,Youtube,Vimeo ( 开发模式下的本地文件系统)。

    image-resizer 通过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
    
    
    
    

    这将创建一个新的目录结构,包括运行 image-resizer 所需的所有必要文件。 money文件是 index.js,它加载express配置和路由。

    image-resizer 也可以简单地作为node_module添加到任何项目中,并且流接口独立使用。 ./test.js 有一个很好的例子,说明应用程序应该如何运行 behind Express。

    有一个 RubyGem插件,帮助你为你的image-resizer 构建端点。

    体系结构

    新重构的代码基现在利用了 node 流。 以前的迭代大量基于承诺,但在一定程度上却最终得到了意大利面条的代码。

    在每个流之间传递一个图像对象,其中包含关于请求和图像数据的信息,这是由 Gulp的。

    映像也不再被修改并发送回s3进行存储。 CDN的全部功能用于存储经过修改的图像。 这大大提高了服务器端和客户端的性能。 Google PageSpeed不喜欢 image-resizer 实例返回的302重定向。

    同时消除向s3推送数据的需要有助于服务器处理,因为这是一个非常不一致的操作。

    插件插件

    image-resizer 现在支持图像源和过滤器的自定义插件范围。 就像前面提到的,box支持多个源,但每个源都可以根据需要进行写。

    通过 $ image-resizer new 创建的目录结构将包含插件目录,其中初始化脚本将选取任何脚本并将它们插入到应用程序中。

    依赖项

    image-resizer 只需要一个工作的node/npm环境和 libvips。 包含你的Heroku环境所需的buildpack信息包括。

    环境变量

    image-resizer的配置通过 环境变量 完成。 这是为了与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 中包含了合理的本地默认值。

    可用的变量如下:

    NODE_ENV:'development',
     PORT:3001,
     DEFAULT_SOURCE:'s3',
     EXCLUDE_SOURCES:null, // add comma delimited list// Restrict to named modifiers strings onlyNAMED_MODIFIERS_ONLY:false,
     // AWS keysAWS_ACCESS_KEY_ID:null,
     AWS_SECRET_ACCESS_KEY:null,
     AWS_REGION:null,
     S3_BUCKET:null,
     // Resize optionsRESIZE_PROCESS_ORIGINAL:true,
     AUTO_ORIENT:true,
     REMOVE_METADATA:true,
     // Protect original files by specifying a max image width or height - limits// max height/width in parametersMAX_IMAGE_DIMENSION:null,
     // Color used when padding an image with the 'pad' crop modifier.IMAGE_PADDING_COLOR:'white',
     // Optimization optionsIMAGE_QUALITY:80,
     IMAGE_PROGRESSIVE:true,
     // Cache expiriesIMAGE_EXPIRY:60*60*24*90,
     IMAGE_EXPIRY_SHORT:60*60*24*2,
     JSON_EXPIRY:60*60*24*30,
     // Logging optionsLOG_PREFIX:'resizer',
     QUEUE_LOG:true,
     // Response settingsCACHE_DEV_REQUESTS:false,
     // Twitter settingsTWITTER_CONSUMER_KEY:null,
     TWITTER_CONSUMER_SECRET:null,
     TWITTER_ACCESS_TOKEN:null,
     TWITTER_ACCESS_TOKEN_SECRET:null,
     // Where are the local files kept?LOCAL_FILE_PATH:process.cwd(),
     // Display an image if a 404 request is encountered from a sourceIMAGE_404:null// Whitelist arbitrary HTTP source prefixes using EXTERNAL_SOURCE_*EXTERNAL_SOURCE_WIKIPEDIA:'https://upload.wikimedia.org/wikipedia/'

    多目标优化

    图像的优化是通过 sharp 完成的。 要设置的环境变量 为:

    • IMAGE_QUALITY: 1 - 100
    • IMAGE_PROGRESSIVE: true | false

    你还可以使用下面描述的q 质量修饰符调整每个请求的图像质量设置。

    CDN

    虽然 image-resizer 将作为独立的应用程序运行,但几乎所有的设备都是假的,除非你在 behind 上运行它。 这在这个时候只运行 behind AWS Cloudfront,因此所有的响应头都被定制为在这个环境中最好地工作。 但是,它的他可以运行的osi不会有多大的不同,这里的任何拉请求都是最感谢的。

    用法

    默认应用程序包含了两个路由,但最重要的是图像生成一,如下所示:

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

    修饰符是所请求修改的划线分隔字符串,其中包括:

    支持的修饰符是:

    • 高度:h500
    • 宽度:w200
    • 正方形:s50
    • 裁剪:cfill
    • 顶部:y12
    • 左:x200
    • 重力:gne,
    • 筛选器:fsepia
    • 外部:efacebook
    • 质量:q90

    裁剪修改器:

    • 适合
      • 保持原始比例
      • 调整大小使图像完全适合新尺寸
        • h400-w500 - 400 x600 -> 333 x500
      • 默认选项
    • 填充
      • 保持原始比例
      • 通过最小尺寸调整大小,裁剪最大尺寸
      • 裁剪所有不适合的尺寸
        • h400-w500 - 400 x600 -> 400 x500
    • 剪切
      • 保持原始比例
      • 无调整大小,裁剪到重力或者x/y
    • 刻度
      • 不保持原始比例
      • 强制图像成为新尺寸( squishing图像)
    • 补白
      • 保持原始比例
      • 调整大小使图像完全适合新尺寸
      • 根据需要在顶部/底部或者左侧/右侧添加填充( 颜色是可以配置的)

    示例:

    • http://my.cdn.com/s50/path/to/image.png
    • http://my.cdn.com/h50/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 - 原始图像请求,将优化但不调整大小

    调整逻辑

    值得注意的是,这个应用程序不会缩放图像,我们都是在保持图像看起来很好。 因这里,在高度 200px的图像上对 h400的请求将不会缩放它。

    源代码

    默认情况下,image-resizer 将使用s3作为图像源。 要访问s3对象,在bucket中使用图像的完整路径,减去桶 NAME:

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

    翻译为:

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

    外部源

    可以将图像从外部源中提取出来,并将它的存储在 behind 自己的。 这是非常有用的时候,如果这样的东西,比如Facebook或者非常不一致的负载时间。 每个外部源仍然可以启用上面的任何修改参数列表。

    除了提供的外部源之外,你还可以使用 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 at来设置,因这里它们的效率比它的他图像快。

    通过插件目录编写新的源代码流也很简单。 src/streams/sources/ 中的示例。

    输出格式

    你可以通过附加额外的图像路径扩展来将图像转换为其他图像格式:

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

    支持 JPEG ( .jpg/.jpeg ),PNG ( .png ) 和 WEBP ( .webp ) 输出格式。

    元数据请求

    image-resizer 可以将图像元数据作为一个json端点返回:

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

    除设置 env REMOVE_METADATAfalse 默认情况下,所有其他图像请求中的元数据都将被删除。

    部署

    包括一个 .buildpacks 文件和一个为Heroku部署准备的Procfile。 在Heroku控制台中运行以下命令以启用正确的buildpacks ( 已经从这里复制到这里:)。

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

    然后 .buildpacks 文件将处理安装过程。

    如上所述,上面 有一组最小的配置变量需要在 image-resizer 正确运行之前设置。

    还注意,由于GCC的一些问题,sharp 不能在较旧的tmodel堆栈上使用。 目前它需要 cedar-14 栈。

    本地开发

    如果你已经安装了/npm,那么在本地运行 image-resizer 就可以了,假设你已经安装了/npm - 是有用的。

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

    gulp设置包括 nodemon,它可以很好地运行应用程序,在代码更改之间重新开始。 如果需要在 3001以外的端口上运行,则可以在 .env 文件中设置 PORT

    测试可以通过以下方式运行: gulp test

    基于的代码库早期版本

    注意:如果你正在寻找旧版本,它被标记为 v0.0.1,那么它会被完全重构和改进。



    文章标签:图像  Ready  Heroku  resizing  图像大小调整  拿来就用  Graphicsmagick  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语