javascript - 七牛js sdk imageMogr2 方法疑问:参数thumbnail 放在地址前面和后面,七牛的处理为啥会不一致呢?

Question

调用 imageMogr2

/**
     * 裁剪图片
     * @param key
     * @param cropObj (包括 w-宽带,h-高度,x-水平坐标,y-垂直坐标 参数)
     * @param width
     * @param height
     * @param beforeCallback
     * @returns {String}
     */
    clipImage: function (key, cropObj, width, height, beforeCallback) {
      //cropStr 格式如下 '!300x400a10a10'
      var cropStr = '!' + cropObj.w + 'x' + cropObj.h + 'a' + cropObj.x + 'a' + cropObj.y;
      /**
       * /thumbnail/<Width>x<Height>!
       * 限定目标图片宽高值，忽略原图宽高比例，按照指定宽高值强行缩略，可能导致目标图片变形。
       * 取值范围不限，但若宽高超过10000时只能缩不能放。
       */
      var thumbnail = width + 'x' + height + '!';
      var option = {
        'auto-orient': true,  // 布尔值，是否根据原图EXIF信息自动旋正，便于后续处理，建议放在首位。
        thumbnail:thumbnail,
        strip: true,   // 布尔值，是否去除图片中的元信息
        gravity: 'NorthWest',    // 裁剪锚点参数
        quality: 90,  // 图片质量，取值范围1-100
        format: 'jpg'// 新图的输出格式，取值范围：jpg，gif，png，webp等
      };
      option.crop = cropStr;
      if (typeof beforeCallback === 'function') {
        beforeCallback(option);
      }
      var imgLink = Qiniu.imageMogr2(option, key);
      console.info(imgLink);
      return imgLink;
    }

//调用该方法参数 (根据坐标值裁剪原图片,生成大小为1024*768c尺寸的图片)

var cropObj = {"x":100,"y":68,"x2":767,"y2":568.25,"w":667,"h":500.25};
var width = 1024;
var height = 768;
clipImage(key,cropObj, width, height);

//这里生成的地址格式为:
// 地址A

http://kry-test-2.qiniudn.com/o_1ale1tpa91fu910nia3m5dr9s210.jpg?imageMogr2/auto-orient/thumbnail/1204x768!/strip/gravity/NorthWest/quality/90/crop/!667x500.25a100a68/format/jpg

// 若手动将 thumbnail 放到最后, 生成的图片大小才是我们想要的.
//地址B
http://kry-test-2.qiniudn.com/o_1ale1tpa91fu910nia3m5dr9s210.jpg?imageMogr2/auto-orient/strip/gravity/NorthWest/quality/90/crop/!667x500.25a100a68/format/jpg/thumbnail/1204x768!

请问下,参数thumbnail 放在地址前面和后面,七牛的处理为啥会不一致呢?

Answer 1

七牛是顺序处理的，也就是参数是一个个执行下去的。

http://kry-test-2.qiniudn.com/o_1ale1tpa91fu910nia3m5dr9s210.jpg?imageMogr2/auto-orient/thumbnail/1204x768!/strip/gravity/NorthWest/quality/90/crop/!667x500.25a100a68/format/jpg

这里，这图是先被处理缩略图，然后剪裁到667x500.25的尺寸的。所以得到的图是667x500
而

http://kry-test-2.qiniudn.com/o_1ale1tpa91fu910nia3m5dr9s210.jpg?imageMogr2/auto-orient/strip/gravity/NorthWest/quality/90/crop/!667x500.25a100a68/format/jpg/thumbnail/1204x768!

恰恰是先剪裁了。再缩放的，所以得到的大小是1204x768