### 前言
> 压缩图片中是非常好的,但是有些图片 是不能压缩的,比如图片内容是1px的,还是循环的,压缩后发现图片不能使用。好好认真的看文档,别挑着看,说看不懂。在此希望能帮助需要帮助的人。
## api说明
#### 第一步:安装依赖
```
npm install --save tinify
```
#### 第二步:认证
> 必须先使用私钥进行认证。这个key需要在官方网站上进行申请 api_key
```js
const tinify = require("tinify");
tinify.key = "YOUR_API_KEY";
```
##### [可选]验证api_key 是否可用
> 此方法只是可选,可以有效校验下是否有效
```js
const tinify = require("tinify");
tinify.key = "YOUR_API_KEY";
tinify.validate(function(err) {
if (err) throw err; // 如果抛出异常,验证API密钥失败。
// 验证成功
})
```
#### 第三步:压缩调用方法
#### fromFile 读取本地图片方法
> 用于加载本地图片,上传到tinify服务器上,。是同步语法。
```
语法: tinify.fromFile(本地地址)
```
> 举一个栗子:
```js
const tinify = require("tinify");
tinify.key = "YOUR_API_KEY";
// 网络地址:
let source = tinify.fromFile('https://tinypng.com/images/panda-happy.png')
// 本地地址,比如:window的D盘demo文件夹下的一张1.png
let source = tinify.fromFile('D:\demo\1.png')
// 进行保存,可以看看下面的 toFile 或者 _url 对象
source.toFile("optimized.jpg"); // 压缩完成后,会自动保存到本地设备项目目录中保存 optimized.jpg 文件
```
#### fromUrl 读取网络图片方法
> 加载远程网络地址进行压缩。作用和 fromFile 是一样的,都是上传用的
```js
const source = tinify.fromUrl("https://tinypng.com/images/panda-happy.png");
source.toFile("optimized.jpg");
```
#### toFile 保存本地方法
> 通过 fromFile 或者 fromUrl 方法进行上传,那么我们使用 toFile方法进行保存到本地。
```
语法糖: toFile(路径+[名称]或名称(当前项目路径),[error callback])
# 返回的对象是: promise 对象,也就是说,可以使用
.then(() => {
// ..... 代码块
})
.catch((err) => {
console.log(err)
})
```
> 举个栗子:
```js
const tinify = require("tinify");
tinify.key = "YOUR_API_KEY";
// 本地地址,比如:window的D盘demo文件夹下的一张1.png
let source = tinify.fromFile('D:\demo\1.png')
/**
* 可以直接连着写:
* tinify.fromFile('D:\demo\1.png').toFile('demo.png')
*/
// 不连着写:
// source.toFile('demo.png')
// 发生异常错误回调写法
source.toFile('D:\demo', function(err, sourceData) {
// 此方法用于错误异常回调,成功是不进行回调的
// if (err) throw err; // 简单处理错误
// 详细处理:
if (err instanceof tinify.AccountError) {// 验证您的API密钥和帐户限制
console.log("The error message is: " + err.message);
} else if (err instanceof tinify.ClientError) {
//检查图片来源和选项。
} else if (err instanceof tinify.ServerError) {
// Tinify API出现临时问题。
} else if (err instanceof tinify.ConnectionError) {
// 发生网络连接错误。
} else {
// 其他错误,不是 tinify 的。
console.log(err)
}
})
.then(() => {
// ..... 代码块
})
.catch((err) => {
console.log(err)
})
```
| error错误 | 说明 |
| --- | --- |
| AccountError | 您的API密钥或API帐户存在问题。您的请求无法被授权。如果达到了压缩限制,则可以等到下一个日历月或[升级您的订阅](https://tinypng.com/developers)。验证API密钥和帐户状态后,您可以重试该请求。 |
| ClientError | 由于提交的数据存在问题,因此无法完成请求。异常消息将包含更多信息。您不应重试该请求。 |
|ServerError | 由于Tinify API暂时存在问题,因此无法完成请求。几分钟后重试该请求是安全的。如果您长时间反复看到此错误,请[与我们联系](mailto:support@tinify.com)。 |
| ConnectionError | 无法发送请求,因为连接Tinify API时出现问题。您应该验证网络连接。重试该请求是安全的。 |
**promise 对象:**
> 执行toFile 方法后,使用promise对象的 then 。
```js
tinify.fromFile('D:\demo\1.png')
toFile('D:\demo')
.then(() => {
// ..... 代码块
})
.catch((err) => {
console.log(err)
})
```
#### source._url 是 promise对象
> 这个是无意间发现的,官方没有写,当上传完成后,可以返回临时有效url地址。能不用这个的最好别使用,原因浪费。
- 注意:这个使用用了这个,那么 toFile 方法是不能用的。
- 注意:这个使用用了这个,那么 toFile 方法是不能用的。
- 注意:这个使用用了这个,那么 toFile 方法是不能用的。
```js
const tinify = require("tinify");
tinify.key = "YOUR_API_KEY";
let source = tinify.fromFile('https://tinypng.com/images/panda-happy.png')
source._url
.then((data) => {
console.log(data); // 返回结果:https://api.tinify.com/output/vx9735ympayt7f3q9jmpetq2m0autaat
})
.catch((err) => {
console.log(err)
})
```
#### 修改图片信息
> 我们可以设置图片大小、缩小(不能放大)、裁剪、
#### 保留元数据
> 保留元数据会增加压缩文件的大小。支持保存版权信息(copyright),GPS 位置(location )、日期(creation)进行保留,不会丢失。
**preserve 方法**
> 这个方法可以将 版权信息 版权信息(copyright),GPS 位置(location )(仅JPEG)、日期(creation)进行修改。
```
const source = tinify.fromFile("large.jpg");
// 必须在fromFile处写
const copyrighted = source.preserve("copyright", "creation");
// 必须在toFile之前
copyrighted.toFile("optimized-copyright.jpg");
```
#### 检测压缩数量
> 一个月有免费的500张次数,超出就得收费,在此感谢官方提供的免费500。愿你们远离新冠病毒。
```js
let compressionsThisMonth = tinify.compressionCount; // 返回的是 number 类型
```
### Amazon S3 与 Google Cloud Storage
> 由于本人没有 s3 与 谷歌云存储,只能不做api尝试了
- LOLKU
- 工具类
- form/formData
- form
- formData
- iframe
- 渲染数据,防止内存泄漏
- 获取url(路由)参数
- 常用方法
- 失去焦点软键盘页面乱
- 判断数据类型
- 浏览器全屏
- 动态插入css
- 随机生成自定义长度位数数字
- 验证判断
- localStorage 封装存储
- 格式化日期
- 计算两个时间差
- 去除空格
- 将驼峰命名转换为连字符
- 获取dom属性
- 深拷贝
- class操作
- 判断是否打开浏览器控制台
- 全国城市地区代码表
- canvas合成工具
- 去除emoji表情符号
- 比较两个对象属性和内容(值)一致
- 微信结束页面事件
- 正则匹配url替换域名
- 字符串拼接(渲染dom后传值)
- 判断是否是正则
- 日历算法
- json 工具
- 是否支持webp格式
- h5底部输入框被键盘遮挡问题
- php
- php 二级域名管理
- 单个或者多个域名跨域
- file_get_contents 正确使用
- fromData请求无法携带cookie
- 简单的加密文件传输
- css
- 1px
- 滚动
- ios点击有颜色
- 文本溢出省略号
- css动画抖动
- 文本换行与不换行
- 阻止旋转屏幕时自动调整字体大小
- vue
- vscode 调试
- 新技术
- vue-router 4.0
- vue3
- 基础
- 试验
- javascript
- 上传问题
- 文件选中过,第二次再次选中不触发change事件
- 上传oss
- 后台
- linux搭建服务
- 需安装
- nginx
- 安装
- nginx http 配置二级域名
- nginx https 配置二级域名
- 防止暴力破解
- 阿里申请免费https
- git
- 快速安装
- 配置项
- node
- 安装
- pm2
- mysql
- 安装
- 创建、切换、查询数据库
- 常用命令
- cmake 编译器
- redis
- 软件下载
- git
- 百度git 记住密码
- 经验
- 上传
- 软件
- vscode
- 推荐插件
- 应用开发
- nwjs
- 入门
- package.json
- vue、react、angular 跑nwjs
- 打包
- 监听屏幕
- 运行另一个.exe文件
- node应用
- electron
- 资料
- 安装
- 实战
- 崩溃日志报告
- electron-forge
- 托盘闪烁
- 开机自动启动
- 消息通知
- 禁止默认事件
- 保证只有一个实例
- 打包且美化安装界面
- 创建cli
- 添加Github徽章
- 自动更新
- docsify
- Lowdb存储数据
- 备份、恢复、导入、导出
- 深度链接(协议)唤起Electron应用
- 说明
- 加载扩展插件
- 证书
- Sketch 插件
- 工作
- 宣传文章地址
- api
- tinypng
- npm 插件
- fs封装:fs-jetpack
- 判断是否npm或yarn运行
- 字符串或缓冲区的gzip压缩大小
- 克隆并修改RegExp实例
- 反转对象的键/值
- http路由find-my-way
- dragula 拖拽(拖放)
- svga
- npm 脚手架搭建
- 项目
- 小工具
- svg转图片
- 日历