项目需求
需要在input标签上传图片文件时，能够先经过压缩，然后在上传到远程服务器，以减少服务器内存的占用。经过调研，发现 tinify 在众多图片压缩中，效果比较好。
使用方法
申请ApiKey
通过邮箱申请账号，获取 ApiKey
设置本地开发环境
tinify 开发文档中有说明，所有的请求都要通过 HTTPS 连接进行。那么问题来了，本地开发环境是localhost 或者 127.0.0.1啊，是 HTTP连接，怎么办呢？
直接上，强行请求的结果是 404
错误提示
将本地的 http 请求变成 https 请求，搞这个还是有些费时间的，我尝试了nginx做代理，但是奈何不懂用法的含义，不知道为什么没有效果，还是要好好研究一下 nginx 使用方法。
然后我就换了另外一种方法，也是比较简单的。参考原文 Calling HTTPS URLs from http://localhost
在 ~ .zshrc (如果你用的是oh my zsh) 中加入下面这一行配置，然后 source .zshrc使配置生效。然后在命令行输入chrome 自动打开一个页面，然后就可以发送请求了。
alias chrome=”/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security --user-data-dir=~/.chrome-disable-web-security”
调用api
项目是基于 angular 的，url 是压缩后图片的连接，type 是压缩后图片的类型
compress(file: File | Blob, apiKey: string): Observable<{url: string, type: string}> {
const headers = new Headers();
const key = btoa(`api:${apiKey}`);
headers.append('Authorization', `Basic ${key}`);
return this.http.post('https://api.tinify.com/shrink', file, { headers }).map(resp => {
const data = resp.json();
return {
url: data.output.url,
type: data.output.type
};
});
}
从图片连接获取到 File
关键在于，请求图片时，设置responseType 为 ArrayBuffer类型
getCompressImage(url: string, type: string, apiKey: string): Observable<File> {
const headers = new Headers();
const key = btoa(`api:${apiKey}`);
headers.append('Authorization', `Basic ${key}`);
return this.http.get(url, { headers: headers, responseType: ResponseContentType.ArrayBuffer }).map(resp => {
return new File([resp.arrayBuffer()], 'result.png', { type: type });
});
}
