使用 Node.js 实现图片的动态裁切及算法实例代码详解


Posted in Javascript onSeptember 29, 2018

背景&概览

目前常见的图床服务都会有图片动态裁切的功能,主要的应用场景用以为各种终端和业务形态输出合适尺寸的图片。

一张动辄以 MB 为计量单位的原始大图,通常不会只设置一下显示尺寸就直接输出到终端中,因为体积太大加载体验会很差,除了影响加载速度还会增加终端设备的内存占用。所以要想在各种终端下都能保证图片质量的同时又确保输出合适的尺寸,那么此时就需要根据图片 URL 来对原始图片进行裁切,然后动态生成并输出一张新的图片。

URL 的设计

图片 URL 需要包含图片 id、尺寸、质量等信息。有两种类型的图片 URL,分别是原图 URL 和带动态裁切信息的 URL。

// 原图 URL
http://example.com/$imgId

// 带裁切信息的图片 URL
http://example.com/$cropType/$width_$height_$quality/$imgId

来分析一下上面 URL 中的变量:

  • $imgId
  • $cropType
  • $width
  • $height
  • $quality

那么一张图片 id 为 4b2d4edcc1f82452 的原图 URL 应该是:

http://example.com/4b2d4edcc1f82452.jpg

如果想要一张该图 800×600 的版本,裁切的 URL 大致是下面这样的:

http://example.com/es/800_600_/4b2d4edcc1f82452.jpg

裁切算法

该来说说以上 URL 背后的算法了。在 Node.js 中可以使用著名的图片裁切库 GM ,该库是基于 imagemagick 和 graphicsmagick 底层库的封装。

最常见的裁切算法是等比例裁切,等比裁切的算法需要至少给出裁切目标图片的宽度和高度的其中一个,如果图片限宽就给出宽度,限高就给出高度,如果两个参数都有,就需要确保裁切的目标宽高相对于原始的宽高是按比例计算的,否则裁切的结果就会出现拉伸。

var gm = require('gm');
// 裁切的最小尺寸
var minSize = 48;
var defaultQuality = 90;
/**
 * 等比例缩放 equal scaling
 * @param { String } 原文件路径
 * @param { String } 新文件路径
 * @param { String } 缩放规则
 * @return { promise }
 */
var es = function(src, dest, rules) {
  return new Promise(function(resolve, reject) {
    // 900_600_90 => 宽度900/高度600/品质90
    rules = rules.split('_');
    if (rules.length !== 3) {
      return reject(new Error('Resize rules invalid'));
    }
    // 解析裁切的目标宽高
    let resizeWidth = parseInt(rules[0]);
    let resizeHeight = parseInt(rules[1]);
    let quality = parseInt(rules[2]) || defaultQuality;
    const readStream = fs.createReadStream(src);
    const writeStream = fs.createWriteStream(dest);
    gm(readStream)
      .size({
        bufferStream: true
      }, function(err, size) {
        if (err) {
          return reject(err);
        }
        const origWidth = size.width;
        const origHeight = size.height;
        let resizeResult;
        // 缩放的宽度和高度做最大最小值限制
        if (resizeWidth) {
          if (resizeWidth > origWidth * 1.5) {
            resizeWidth = Math.floor(origWidth * 1.5);
          }
          else if (resizeWidth < minSize) {
            resizeWidth = minSize;
          }
        }
        if (resizeHeight) {
          if (resizeHeight > origHeight * 1.5) {
            resizeHeight = Math.floor(origHeight * 1.5);
          }
          else if (resizeHeight < minSize) {
            resizeHeight = minSize;
          }
        }
        resizeResult = this.resize(resizeWidth, resizeHeight);
        resizeResult
          .quality(quality)
          .interlace('line') // 使用逐行扫描方式
          .unsharp(2, 0.5, 0.5, 0)
          .stream()
          .on('end', resolve)
          .pipe(writeStream);
      });
  });
};

说说几个重要的 API:

quality 设置图片的质量,GM 图片质量范围是 0-100,默认的质量是 75。
interlace 用于设置图片在显示器上加载时的显示方式,当然显示方式本身还要受图片本身的影响。
unsharp 用来设置图片的锐度,将一张大图缩放成一张小图时,会损失很多像素,需要适当的增加图片锐度来保证图片的质量。关于 unsharp 的使用,详见 Using ImageMagick to make sharp web-sized photographs 。
等比例裁切严格来说实际上还只是对图片进行缩放,并未动用图片裁切的 API。

还有一种比较常见的裁切方式,会先将图片等比例缩放后再从中心裁切,裁切出来的图片是一个正方形,这样能尽可能保证图片的内容。

/*
 * 等比例缩放后从中心裁切 equal scaling crop center(正方形裁切)
 * @param { String } 原文件路径
 * @param { String } 新文件路径
 * @param { String } 缩放规则
 * @return { promise }
 */
var escc = function(src, dest, rules) {
  return new Promise(function(resolve, reject) {
  // 600_90 => 宽度600/高度600/品质90
    rules = rules.split('_');
    if (rules.length !== 2) {
      return reject(new Error('Resize rules invalid'));
    }
    let cropSize = parseInt(rules[0]);
    let quality = parseInt(rules[1]) || defaultQuality;
    const readStream = fs.createReadStream(src);
    const writeStream = fs.createWriteStream(dest);
    if (!cropSize) {
      reject(new Error('Crop params invalid'));
      return;
    }
    gm(readStream)
      .size({
        bufferStream: true
      }, function(err, size) {
        if (err) {
          reject(err);
          return;
        }
        const origWidth = size.width;
        const origHeight = size.height;
        let cropX = 0;
        let cropY = 0;
        let resizeWidth;
        let resizeHeight;
        let resizeResult;
        // 裁切的宽度和高度做最大最小值限制
        if (cropSize > origWidth) {
          cropSize = origWidth;
        }
        else if (cropSize > origHeight) {
          cropSize = origHeight;
        }
        else if (cropSize < minSize) {
          cropSize = minSize;
        }
        // 先计算出等比缩放的尺寸,然后再根据此尺寸计算出裁切位置
        if (origWidth > origHeight) {
          resizeWidth = cropSize / origHeight * origWidth;
          resizeHeight = cropSize;
          cropX = Math.floor((resizeWidth - cropSize) / 2);
          cropY = 0;
        }
        else {
          resizeHeight = cropSize / origWidth * origHeight;
          resizeWidth = cropSize;
          cropX = 0;
          cropY = Math.floor((resizeHeight - cropSize) / 2);
        }
        resizeResult = this.resize(resizeWidth, resizeHeight);
        resizeResult
          .quality(quality)
          .interlace('line') // 使用逐行扫描方式
          .crop(cropSize, cropSize, cropX, cropY)
          .unsharp(2, 0.5, 0.5, 0)
          .stream()
          .on('end', resolve)
          .pipe(writeStream);
      });
  });
};

上面的 crop 就是对图片进行裁切。当然除了中心裁切,还能延伸出顶部裁切,底部裁切等,相对来说使用场景要少很多。

结语

在服务的实际应用中,还会做一些优化,比如对服务的接口做一些安全限制,确保该接口不会被刷,裁切本身是比较消耗资源的操作。由于裁切操作比较耗资源,那么相同的尺寸应该保证只有一次裁切操作,这样只有第一次请求裁切图片才会真正有裁切操作,后续的访问就直接读取原来就裁切好的实体文件即可。

以上所述是小编给大家介绍的使用 Node.js 实现图片的动态裁切及算法实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
jquery tab插件制作实现代码
Jun 22 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
如何在Vue中抽离接口配置文件
Oct 31 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
JS常用跨域方法实现原理解析
Dec 09 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 #Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 #Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 #Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 #Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 #Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 #Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 #Javascript
You might like
PHP array 的加法操作代码
2010/07/24 PHP
PHP原理之异常机制深入分析
2010/08/08 PHP
php查看当前Session的ID实例
2015/03/16 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
Javascript Tab 导航插件 (23个)
2009/06/11 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
jQuery的学习步骤
2011/02/23 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
JavaScript门面模式详解
2017/10/19 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
php结合js实现多条件组合查询
2019/05/28 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
标准毕业生自荐信范文
2013/11/04 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
综合素质评价自我评价
2015/03/06 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python