Nanananananananana.. Pat Man!

    img-master

    0.0.5 • Public • Published

    Img Master

    author version node npm test build coverage license

    img-master是一个多功能无限制的图像批处理工具,提供压缩分组标记变换四大批处理功能

    安装

    npm i -g img-master

    安装失败

    img-master某些功能基于sharp,所以在安装过程中可能会失败或报错,请通过以下步骤解围。

    • 切换NPM镜像为淘宝镜像:npm config set registry https://registry.npm.taobao.org/
    • 切换NPM模块内置Node镜像为淘宝镜像:npm config set disturl https://npm.taobao.org/mirrors/node/
    • 切换Sharp镜像为淘宝镜像
      • npm config set sharp_binary_host https://npm.taobao.org/mirrors/sharp/
      • npm config set sharp_libvips_binary_host https://npm.taobao.org/mirrors/sharp-libvips/
    • 强制清理缓存:npm cache clean -f(曾经安装失败才执行)
    • 重新执行安装命令:npm i -g img-master
    若是多账户电脑(公司环境),请切换到管理员账号下执行npm i -g img-master重新安装

    若有兴趣了解某些模块因NPM镜像问题而安装不上的解围思路,可查看笔者这篇《聊聊NPM镜像那些险象环生的坑》,相信会对你有很大的帮助。

    使用

    命令 缩写 功能 描述
    img-master compress img-master c 压缩图像 基于TinyJPGTinyPNG进行压缩
    img-master group img-master g 分组图像 按照图像尺寸类型体积进行分组
    img-master mark img-master m 标记图像 基于Sharp进行标记,提供交互式问答调用
    img-master transform img-master t 变换图像 基于Sharp进行变换,提供多配置链式调用
    • 推荐使用缩写命令
    • 目前只能处理JPGPNG的图像
    • 可遍历根目录下所有多层文件夹里符合条件的图像文件
    • 进入需要处理图像的根目录:cd my-image,再根据需求执行以上命令

    图像压缩

    • 使用https://tinyjpg.comhttps://tinypng.com压缩图像会有20张的数量限制
    • img-master c基于以上两个网站进行压缩,但是通过随机修改请求头的X-Forwarded-For绕过其数量限制

    图像变换

    • 特点:执行命令可追加多个配置,支持链式调用,变换情况依据配置的顺序而有所不同
    • 链式调用:当前配置处理完的图像,以流的方式传入下一个配置进行处理,直至结束,类似Gulp的流处理
    • 调用结果:不同配置组合的生成图像可能不同,即使相同配置但不同顺序也可能导致生成图像不同
    配置 功能 格式([]表示可选) 描述
    --blur 模糊 0.3~1000 不设置则不生效
    --extract 裁剪 left,top,width,height 不设置则不生效
    --flip 平翻 true 不设置则不生效
    --flop 对翻 true 不设置则不生效
    --format 格式 jpgpng 不设置则使用图像原来的类型
    --grayscale 灰度 true 不设置则不生效
    --negate 负片 true 不设置则不生效
    --normalise 对比 true 不设置则不生效
    --resize 尺寸 width,height[,fit] 若其中一方为0则自动缩放以匹配另一方
    不设置则不生效
    --rotate 旋转 angle[,bgcolor] 不设置则不生效
    --sharpen 锐化 true[sigama,flat,jagged] true表示执行快速温和的锐化输出
    sigama在0.3~1000间,其余参数必须>0
    不设置则不生效
    • fit:填充
      • cover:裁剪以适应在指定尺寸中
      • contain:嵌入在指定尺寸中
      • fill:忽略宽高比,拉伸以填满在指定尺寸中
      • inside:保留宽高比,将尺寸调整到尽可能大,同时确保其尺寸小于或等于指定尺寸
      • outside:保留宽高比,将尺寸调整到尽可能小,同时确保其尺寸大于或等于指定尺寸
    • bgcolor:背景色
      • transparent:透明,需配合--format png使用
      • HEX:16进制色值,可选#xyz#uvwxyz
      • RGB:RGB色值,rgba(r,g,b)
      • RGBA:RGBA色值:rgba(r,g,b,a)

    注意事项

    • 配置一定要完整输入且正确,格式为--opt [val],不然会报错导致无法执行
    • 配置参数间相连只能使用英文逗号,,不能使用空格
    • 配置详情请参考sharp-api

    细节

    压缩图像

    • 输出目录为#compressed-dist#
    • 图像可任意放置到根目录多层文件夹下,压缩图像后原样输出图像位置到#compressed-dist#
    • 重新压缩图像时,先移除#compressed-dist#再生成新的#compressed-dist#,注意保存压缩过的图像

    分组图像

    • 输出目录为#grouped-dist#
    • 图像可任意放置到根目录多层文件夹下,分组图像后按照分组依据输出图像位置到#grouped-dist#
    • 重新分组图像时,先移除#grouped-dist#再生成新的#grouped-dist#,注意保存分组过的图像

    标记图像

    • 输出目录为#marked-dist#
    • 图像可任意放置到根目录多层文件夹下,标记图像后原样输出图像位置到#marked-dist#
    • 重新标记图像时,先移除#marked-dist#再生成新的#marked-dist#,注意保存标记过的图像

    变换图像

    • 输出目录为#transformed-dist#
    • 图像可任意放置到根目录多层文件夹下,变换图像后原样输出图像位置到#transformed-dist#
    • 重新变换图像时,先移除#transformed-dist#再生成新的#transformed-dist#,注意保存变换过的图像

    示例

    所有命令作用一次以下文件夹的图像

    原始图像

    压缩图像

    img-master c

    压缩图像命令

    压缩图像

    分组图像

    img-master g

    分组图像命令

    分组图像

    标记图像

    img-master m

    标记图像命令

    标记图像

    变换图像

    img-master t --resize 300,0 --extract 50,50,100,100 --rotate 200,#3c9 --blur 5 --format png

    变换图像命令

    变换图像

    相同配置但不同顺序也可能导致生成图像不同

    版权

    MIT © Joway Young

    后记

    若觉得img-master对你有帮助,可在Issue提出你的宝贵建议,笔者会认真阅读并整合你的建议。喜欢img-master的请给一个Star,或Fork本项目到自己的Github上,根据自身需求定制功能。

    关注公众号IQ前端,一个专注于CSS/JS开发技巧的前端公众号,更多前端小干货等着你喔

    Install

    npm i img-master

    DownloadsWeekly Downloads

    14

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    34.7 kB

    Total Files

    14

    Last publish

    Collaborators

    • yangzw