qiniu tool, imageMogr2

qiniu.spec.ts

import { imageMogr2 } from "../qiniu";

describe("imageMogr2", () => {
  it("should work with single parameter", () => {
    const url =
      "https://dn-odum9helk.qbox.me/resource/gogopher.jpg?imageMogr2/thumbnail/!20p&a=2";
    const addMoreArg = "/rotate/200/quality/200";

    expect(imageMogr2(url, addMoreArg)).toBe(
      "https://dn-odum9helk.qbox.me/resource/gogopher.jpg?a=2&imageMogr2/thumbnail/!20p" +
        addMoreArg
    );
  });

  it("should work with multiple var parameters", () => {
    const url = "/resource/gogopher.jpg?a=2&imageMogr2/thumbnail/!20p";
    const moreArg = ["/rotate/200", "/quality/200", "/size-limit/200k"];
    expect(imageMogr2(url, ...moreArg)).toBe(
      "/resource/gogopher.jpg?a=2&imageMogr2/thumbnail/!20p/rotate/200/quality/200/size-limit/200k"
    );
  });

  it("should work with empty url", () => {
    const url = "";
    const moreArg = ["/rotate/200", "/quality/200", "/size-limit/200k"];
    expect(imageMogr2(url, ...moreArg)).toBe(
      "imageMogr2/rotate/200/quality/200/size-limit/200k"
    );
  });
});

qiniu.ts

/**
 * 
 example strings
 - https://dn-odum9helk.qbox.me/resource/gogopher.jpg?imageMogr2/thumbnail/!20p&a=2&b=3&

 parsed by query-string:
 `{
  '': null,
  a: '2',
  b: '3',
  'https://dn-odum9helk.qbox.me/resource/gogopher.jpg?imageMogr2/thumbnail/!20p': null
}`

 */
import queryString from "query-string";
import each from "lodash/each";
import filter from "lodash/filter";

export const IMAGE_MOGR2 = "imageMogr2";

/**
 * 获取字符串的参数部分.
 */
export function getQueryString(s: string) {
  if (!s) {
    return "";
  }

  return s.split("?")[1] || "";
}

/**
 * @see https://developer.qiniu.com/dora/api/1270/the-advanced-treatment-of-images-imagemogr2
 * 给链接字符串添加参数.
 *
 * parameter must starts with '/'.
 *
 * @example
 * ```
 * a = imageMogr2('/position?a=2&b=3', '/auto-orient/strip/crop/20x20');
 * b = imageMogr2('/position?c=3&e=4', '/auto-orient', '/crop/20x20');
 * ```
 */
export function imageMogr2(url: string, ...parameters: string[]) {
  const qstr = url.split("?")[1] || "";
  let qobj = queryString.parse(qstr);
  if (!qobj && qstr) {
    qobj = {
      [qstr]: null,
    };
  }

  const targetQobj = {} as any;
  let mgor2QueryString = "";

  each(qobj, (value, key) => {
    if (!key) {
      return;
    }

    if (key.indexOf(IMAGE_MOGR2 + "/") !== -1) {
      // remove the first IMAGE_MOGR2 with empty string.
      const oldImageMogr2Query = key.replace(IMAGE_MOGR2, "");
      mgor2QueryString = oldImageMogr2Query;
      if (mgor2QueryString === "/") {
        mgor2QueryString = "";
      }
    } else {
      targetQobj[key] = value;
    }
  });
  // join parameters with mgor2QueryString.
  const validParamters = filter(parameters, (p) => {
    return p && p[0] === "/";
  });

  const finalMgor2Query =
    IMAGE_MOGR2 + mgor2QueryString + validParamters.join("");
  const urlWithoutQuery = url.split("?")[0] || "";
  const originalQuery = queryString.stringify(targetQobj);
  const finalQuery =
    (originalQuery ? originalQuery + "&" : "") + finalMgor2Query;

  if (!urlWithoutQuery) {
    return finalQuery;
  }

  return urlWithoutQuery + "?" + finalQuery;
}

TODO

1. 需求检查参数重复。