利用tinify显示图片压缩功能

项目需求

需要在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 });
        });
    }