知识点

• 使用浏览器调试工具分析网络请求
• 在 Android 中使用 Retrofit 实现上传、下载文件

<blockquote>
关于 waifu2x
https://github.com/nagadomi/waifu2x
http://waifu2x.udp.jp
“本程序使用卷积神经网络对动漫风格的图片进行放大操作（支持照片）。”
通俗地说，一个牛逼的<u>用于放大、降噪动漫类型图</u>的程序。<br />

waifu2x

关于 Retrofit
http://square.github.io/retrofit
“A type-safe HTTP client for Android and Java”
Android 开发中一个令人爱不释手的强大的网络请求工具库。

首先，笔者须明确要干什么？

waifu2x 提供了一个在线网页工具（见上文截图）。笔者的目的是去分析网页中调用的接口，然后借助 Retrofit 完整模拟这个接口调用过程，在 Android APP 中方便地使用它。

一、分析 waifu2x 接口

笔者使用 Chrome 浏览器自带的开发者工具去探测接口（Edge、火狐等浏览器同样提供开发者工具用于网页调试）。

观察 waifu2x 页面，一个文件选择器、三组单选按钮、一个下载按钮和一个转换按钮。通过查看源码可以发现，两个按钮调用的接口一致。

接下来，选择一个图片文件，点击下载按钮，分析请求过程：

waifu2x API

接口为http://waifu2x.udp.jp/api、请求方式为 POST、图片数据以及三个参数一并传输。参数的传输方式需要特别注意，和一般 POST 不同。

通过查看网页源码，获得所有参数细节：

网页源码

二 、构造 Retrofit 接口

难点在于对请求数据的准确构造，也就是上文接口截图中 Request Payload 部分。

Retrofit 配置关键代码：

// 为什么需要配置超时？
// waifu2x 接口在处理稍大的图片时十分耗时，默认的 10s 不够用

OkHttpClient client = new OkHttpClient.Builder()
    .connectTimeout(60, TimeUnit.SECONDS)
    .readTimeout(60, TimeUnit.SECONDS)
    .writeTimeout(60, TimeUnit.SECONDS)
    .build();

Retrofit retrofit = new Retrofit.Builder()
    .baseUrl("http://waifu2x.udp.jp/")
    .client(client)
    .build();

Retrofit 接口构造关键代码：

@POST("api")
@Multipart
Call<ResponseBody> processPng(@Part("style") RequestBody type,
                              @Part("noise") RequestBody noise,
                              @Part("scale") RequestBody scale,
                              @Part("file\"; filename=\"test.png") RequestBody img);

Retrofit 接口调用关键代码：

// 构造请求数据
RequestBody typeBody = RequestBody.create(MediaType.parse("text/plain"), getType());
RequestBody noiseBody = RequestBody.create(MediaType.parse("text/plain"), getNoise());
RequestBody scaleBody = RequestBody.create(MediaType.parse("text/plain"), getScale());
RequestBody RequestBody.create(MediaType.parse("image/png"), getImgBytes(srcImgUri));

// 发起请求
Call<ResponseBody> call = service.processPng(typeBody, noiseBody, scaleBody, imgBody);
ResponseBody responseBody = call.execute().body();

// 下载处理后的图片
RetrofitHelper.downloadFile(responseBody, tmpFile);

下载关键代码：

public static boolean downloadFile(ResponseBody body, File targetFile) {
    ...
    InputStream inputStream = body.byteStream();
    OutputStream outputStream = new FileOutputStream(targetFile);
    ...
}

在构造过程中可能需要多次尝试，如果测试发现不成功该如何检查哪一部分不对呢？

方法就是抓包。抓包的方式有多种，一般手段比如 PC 端 Fiddler 代理，由 Fiddler 抓包。这里笔者推荐一种更简单的方式，使用 Packet Capture 这款 APP 直接在 Android 设备上抓包。

Packet Capture - waifu2x

可以发现，已经构造成功。

三、总结

此文以分析 waifu2x 接口为例，记录了关键过程。抛砖引玉，您大可尝试去分析其他网站、软件、APP等的接口调用，取己所需，比如分析绿色呼吸拿到指定城市空气质量数据、分析IP地址查询拿到指定IP的所属区域信息、分析音乐站点拿到歌词或下载直链什么的、分析学校教务系统拿到课表数据等。

四、waifu2x 效果展示

动漫图例子

参数设置：

可以看出（看不出？放大看），放大后不仅没有降质，甚至好了些许

文字图例子

参数设置：

可以看出（看不出？放大看），处理后画面更加干净

最后安利 waifu2x，它在<u>放大</u>、<u>降噪</u>处理<u>动漫风格</u>图片这两方面均十分优秀。

类似站点：http://bigjpg.com/