“搞定”了稿定证件照

事情是这样的，朋友找我帮他证件照换个背景，顺便调整一下图片尺寸，我首选是打开了稿定官网（证件照换底），但是背景提供的只有几种颜色，而且尺寸也没有我想要的，于是就有了下面的故事…

思考？

页面上固定的几种背景色（尺寸）无非是两种方式：
1. 通过后端接口获取；
2. 写死在前端代码里。

顺便提一下，最开始走的弯路。起初是看了几个接口传参的数据，误以为是通过接口传参配置的图片信息，然后再生成，于是就一股脑想着通过更改接口数据的方式，去生成自定义的。结果反反复复发请求，测试了好久，发现不太对：有一个 PUT 接口像是上传了一个图片，往这里深挖，发现了这个请求上传一个类似缩略图的东西到 Minio ，除了尺寸不太对（而且还没水印），其他的没啥不一样的，而且每次图片的高度都是 300px ，从这里开始，才渐渐走上正道 😂。

验证

刷新页面，把接口挨个看了个遍，没有一个返回了背景色或者尺寸，说明在前端代码里。打开控制台，Ctrl + Shift + F，搜索颜色色值（hex/rgb），或者颜色名，果不其然：

点进去一看，好家伙，一个没少，而且尺寸的列表就在上面，直接一锅端了。

Fiddler 登场

知道了颜色和尺寸的源头，接下来就是“篡改”这个 JS 文件，通过 Fiddler 拦截这个 JS 文件的请求，然后把它替换成自定义的 JS 文件。

打开 Fiddler ，找到请求这个 JS 文件的链接地址，先打开 Tab 栏中的 AutoResponder ，然后把左侧这个请求拖到 AutoResponder 中。

然后点击下拉框，找到最下方的 Find a file… ，选择修改的 JS 文件。选完之后，点击右侧的 Save ，同时勾选上方的两个选框：Enable rules 和 Unmatched requests passthrough 。

重新刷新页面，如果有下面这个报错，则需要额外设置 Access-Control-Allow-Origin 。

打开 Tab 栏中的 Filters ，找到最下方的 Set response header ，左边的框框填：Access-Control-Allow-Origin，右边的框框填：https://koutu.gaoding.com。

填完之后，记得开启 Filters 。

到这里，添加自定义背景色和尺寸已达目的，贴一下自己修改的内容：

// 尺寸
sizes: [
  { title: "大二寸", subtitle: "35x53mm", val: [413, 626, 50, 202, 0.6] },
  { title: "自定义尺寸", subtitle: "480x640", val: [480, 640, 50, 202, 0.6] },
  ...
  /**
   * val 各个参数含义
   * val[0]: 图片宽度
   * val[1]: 图片高度
   * val[2]: 距离顶部距离
   * val[3]: 未知
   * val[4]: 缩放比例，0.6挺好
   */
],
// 背景色
backgrounds: [
  [
    { name: "自定义蓝", bg: "#64c5ff" },
    { name: "浅灰", bg: "#E1E0E5" },
    ...
  ]
]

图片下载

上文提到的，有一个请求会上传一个缩略图，这是关键。查看这个接口触发时，调用的一些方法，很明显这哥仨绝对有问题。

还是在添加背景色和尺寸的那个 JS 文件中，找到了这个 exportImage 方法。

代码解读

t => 前端生成的 canvas 对象
e => canvas 的宽度，i => canvas 的高度
n => 缩放比例：高度和宽度分别与300做运算，取最小的值，也即保证宽或者高最大为300
r => 缩放后的宽度，s => 缩放后的高度
按照 width == r，height == s 生成一个新的 canvas 对象，绘制在画板上，然后返回这个 canvas

这也就解释了，之前测试接口时，为什么得到的图片高度一直是 300px ，只要将 r 和 s 保持原尺寸即可。

- r = n * e, s = n * i
+ r = e, s = i

每次切换完背景或者尺寸后，会有一个请求 https://gd-filems.oss-cn-hangzhou.aliyuncs.com/gaoding/gaoding/[imgId]/[imgName].jpg ，这个请求也即之前上传的缩略图。

和官网下载对比了一下，原始下载的图片和这个调整尺寸后的缩略图，几乎没啥两样（亮出你的火眼金睛，下面两张图中找不同！PS ：左图为官网下载，右图为缩略图 ），而且文件大小从 300kb 缩小到了 27kb ，完美！

showlotus's blog