前端er, 又称为切图仔,平时经常需要用 PSD 导出 PNG 或 JPG,但是导出来的的图片一般比较大,往往需要用一些其他工具压缩后再发布到生产环境。

以前常用的做法是,使用 image-webpack-loader ,在 webpack 打包项目时自动压缩图片。但是这 loader 是基于 imagemin 的,他的压缩失真比较严重,而且压缩率也不是很高。经常出现一种情况就是,在本地开发的时候,图片明明很清晰的,但是一旦发布到生产环境 ,因为经过了 img-webapck-loader 压缩,导致图片严重失真。也因为这个原因,美术小姐姐在验收项目的时候,常常会把我叫过去,说:哎呀,我的 PSD 明明是很清晰的呀,为什么你放到网站上去就那么模糊了呢。我说因为压缩过了呀。然后她说这个压缩工具不给力呀,就推荐了一个在线压缩工具给我: TinyPNG在线地址

初体验 tinypng 真是把我惊呆了, 一般的 PNG 压缩率竟然可以高达 50% - 70% ,并且肉眼看不出来任何的失真。

TinyPNG 的原理是将 PNG24 位真彩色图片压缩成 PNG8 位索引图片,从而做到基本不损失画质和观感。至于具体算法怎么实现的也没有深入研究守,有兴趣的可以自行查阅相关资料。

tinypg 除了可以通过网页端上传图片,也提供了 api 的方式 ,所以可以使用 node 或其他脚本语言进行上传的,可以参考这里:

https://tinify.cn/developers/reference

然而,这么好用的压缩工具有一个很明显缺陷的,就是每天只能正常压缩 20 张图片。超过 20 张之后,就会经常出来 Too many files uploaded at once。如下红色的部分:

当然,这是针对免费版用户而言的。如果想要避免这个限制,你需要花 25 美金买一年的会员。当然,我们程序员大多数都是很吝啬的,就连到外面吃饭要不要加个卤蛋都要纠结半个小时的,更别说给 25 美金他了。

但是,程序员的特点是,都爱折腾!所以我决定要尝试着绕过这 20 张图片的上传限制。一般来说,这种免登录就可试用的系统,都是通过用户IP来限制用户的操作次数的,所以就决定从修改 IP 的方式来绕开这个限制。

最简单的作法是使用动态的代理 IP, 比如这里 https://ip.ihuan.me/ 就有一些免费代理IP,但是,这些 IP 都是国外的,很慢的,我们的目的是要上传并压缩图片,使用这么慢的代理显然是不可行的。

所以就只能寻找其他的办法。

就在陷入迷茫的时候,突然想到了一个事实 :目前的 web 架构大多数都是通过 nginx 作为反向代理的,如下:

从上图可以看出,客户端并不是直接请求应用服务的,而是通过统一接入层(往往是 nginx) 来转发请求的。那么问题来,应用服务是如何获取到客户端的 IP 的呢?

玩过 nginx 的同学应该都知道 , 这个通用的解决方案就是 X-Forwarded-For 请求头。

简单的来说,就是所有的反向代理都实现一个统一的约定,在转发请求给下游服务之前,把请求代理的 IP 地址写入到 X-Forwarded-For 头中,形成了一个 IP 地址列:

X-Forwarded-For: client, proxy1, proxy2

这个方案虽然不是正式的 HTTP 协议,但已经成为了一个事实标准,基本上所有的反向代理服务都实现了这个功能,以确保下游的服务可以感知到经过的反向代理,并从中获取到用户的 IP 地址。

好了,既然应用服务是通过 X-Forwarded-For 头部来获取客户端 IP 的,那么我们能不能在客户端伪造这个头部,每次上传图片的时候都设置一个随机的 IP 呢?所以就决定尝试一下。结果发现,该方法确实可行!竟然可以欺骗 tinypng 的服务器,从而绕开了上传次数的限制。

完整代码如下:

const fs = require('fs');
const path = require('path');
const https = require('https');
const { URL } = require('url'); const cwd = process.cwd(); const root = cwd;
exts = ['.jpg', '.png'],
max = 5200000; // 5MB == 5242848.754299136 const options = {
method: 'POST',
hostname: 'tinypng.com',
path: '/web/shrink',
headers: {
rejectUnauthorized: false,
'Postman-Token': Date.now(),
'Cache-Control': 'no-cache',
'Content-Type': 'application/x-www-form-urlencoded',
'User-Agent':
'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36'
}
}; fileList(root); // 生成随机IP, 赋值给 X-Forwarded-For
function getRandomIP() {
return Array.from(Array(4)).map(() => parseInt(Math.random() * 255)).join('.')
} // 获取文件列表
function fileList(folder) {
fs.readdir(folder, (err, files) => {
if (err) console.error(err);
files.forEach(file => {
fileFilter(path.join(folder, file));
});
});
} // 过滤文件格式,返回所有jpg,png图片
function fileFilter(file) {
fs.stat(file, (err, stats) => {
if (err) return console.error(err);
if (
// 必须是文件,小于5MB,后缀 jpg||png
stats.size <= max &&
stats.isFile() &&
exts.includes(path.extname(file))
) { // 通过 X-Forwarded-For 头部伪造客户端IP
options.headers['X-Forwarded-For'] = getRandomIP(); fileUpload(file); // console.log('可以压缩:' + file);
}
// if (stats.isDirectory()) fileList(file + '/');
});
} // 异步API,压缩图片
// {"error":"Bad request","message":"Request is invalid"}
// {"input": { "size": 887, "type": "image/png" },"output": { "size": 785, "type": "image/png", "width": 81, "height": 81, "ratio": 0.885, "url": "https://tinypng.com/web/output/7aztz90nq5p9545zch8gjzqg5ubdatd6" }}
function fileUpload(img) {
var req = https.request(options, function(res) {
res.on('data', buf => {
let obj = JSON.parse(buf.toString());
if (obj.error) {
console.log(`[${img}]:压缩失败!报错:${obj.message}`);
} else {
fileUpdate(img, obj);
}
});
}); req.write(fs.readFileSync(img), 'binary');
req.on('error', e => {
console.error(e);
});
req.end();
}
// 该方法被循环调用,请求图片数据
function fileUpdate(imgpath, obj) {
const outputDir = path.join(cwd , 'output');
imgpath = path.join(cwd , 'output', imgpath.replace(cwd, '')); if(!fs.existsSync(outputDir)) {
fs.mkdirSync(outputDir);
} let options = new URL(obj.output.url);
let req = https.request(options, res => {
let body = '';
res.setEncoding('binary');
res.on('data', function(data) {
body += data;
}); res.on('end', function() {
fs.writeFile(imgpath, body, 'binary', err => {
if (err) return console.error(err);
console.log(
`[${imgpath}] \n 压缩成功,原始大小-${obj.input.size},压缩大小-${
obj.output.size
},优化比例-${obj.output.ratio}`
);
});
});
});
req.on('error', e => {
console.error(e);
});
req.end();
}

这段代码是参考了 nodejs 全自动使用 Tinypng (免费版,无需任何配置)压缩图片 ,只是简单的加上了动态的 IP 头,从而实现了不受上传次数限制。

核心的代码在这里:

// 生成随机IP, 赋值给 X-Forwarded-For
function getRandomIP() {
return Array.from(Array(4)).map(() => parseInt(Math.random() * 255)).join('.')
} // ....
options.headers['X-Forwarded-For'] = getRandomIP();
//....

代码上传到了 github ,有兴趣的可以点击下面连接查看并 star 关注 喔:

super-tinypng

同时,也发布到了 npm 上面。只需要全局安装:


npm i super-tinypng -g

然后在你想要压缩图片的目录里面运行 super-tinypng 就能自动压缩图片了,并且不会有数量限制!

谈谈如何绕过 TinyPNG 对上传图片数量的限制的更多相关文章

  1. 微信小程序 - 上传图片(组件)

    更新日期: 2019/3/14:首次发布,更新了2018/12/30的UI以及反馈信息获取方式,具体请下载:demo. 2019/3/20:感谢544429676@qq.com指出的现存bug,已修复 ...

  2. 技术分享:杂谈如何绕过WAF(Web应用防火墙)(转)

    0×01开场白 这个议题呢,主要是教大家一个思路,而不是把现成准备好的代码放给大家. 可能在大家眼中WAF(Web应用防火墙)就是"不要脸"的代名词.如果没有他,我们的" ...

  3. shopnc2014年11版数据库字典

    shopnc_activity 表注释: 活动表 字段 类型 空 默认 注释 activity_id mediumint(9) 否   id activity_title varchar(255) 否 ...

  4. 【项目相关】MVC中将WebUploader进行封装

    昨天初步将webuploader用在了项目中,但紧接着就发现了一个问题,每一个页面都需要写那么多初始化webUploader的代码,这样肯定是我不能接受的,于是花了半天时间对该控件进行了封装. 最后, ...

  5. angularjs中使用 &lt;input type=&quot;file&quot;&gt;标签实现一次最多上传5张图片

    前期准备: 1.angular.js 2.bootstrap.css 具体如何实现呢?请看下面代码哈哈哈. 在angular项目中,如果要给<input type="file" ...

  6. 上传漏洞总结-upload-labs

    介绍: Upload-labs是一个所有类型的上传漏洞的靶场 项目地址:https://github.com/c0ny1/upload-labs 思维导图: 小试牛刀: Pass-01 客户端js检查 ...

  7. asp.net mvc 多文件上传

    @{ ViewBag.Title = "多文件上传测试"; } <h2>多文件上传测试</h2> <form action="/Demo/I ...

  8. TP图片上传

    //控制器文件 public function index(){ if(!empty($_POST)){ $file = $_FILES["file"]; if(!isset($f ...

  9. el-upload源码修改跳坑

    之前给element-ui提了一个问题,结果没有鸟我,没办法,只能修改源码来满足需求了 (备注:element-ui2依然没有修改,为了迎合产品还是要改源码) 本文讨论的组件属性仅限于list-typ ...

  10. Weui upLoader

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. The type java.lang.CharSequence cannot be resolved. It is indirectly referenced from required .class files.

    参照 http://stackoverflow.com/questions/24301986/the-type-java-lang-charsequence-cannot-be-resolved-in ...

  2. iOS 判断数组是否为空

    有人说可以用([array count]==0 )来判断是否为空,都是坑,如果array为空的话,执行count就会直接报错,程序崩溃退出. 正确判断NSArray是否为空的方法:用 (!array) ...

  3. [Objective-c 基础 - 1.2] OC的基本类

    #import <Foundation/Foundation.h> typedef enum {GenderMan, GenderFemale} Gender; typedef enum ...

  4. 理解javascript中的回调函数(callback)

    以下内容来源于:http://www.jb51.net/article/54641.htm 最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs ...

  5. Python资料汇总(建议收藏)

    整理汇总,内容包括长期必备.入门教程.练手项目.学习视频. 一.长期必备. 1. StackOverflow,是疑难解答.bug排除必备网站,任何编程问题请第一时间到此网站查找. https://st ...

  6. 「洛谷1903」「BZOJ2120」「国家集训队」数颜色【带修莫队,树套树】

    题目链接 [BZOJ传送门] [洛谷传送门] 题目大意 单点修改,区间查询有多少种数字. 解法1--树套树 可以直接暴力树套树,我比较懒,不想写. 稍微口胡一下,可以直接来一个树状数组套主席树,也就是 ...

  7. 通过class改变样式

    1.判断class属性 判断一个元素中是否含有指定的class属性值 function hasClass(obj,cn){ //创建正则表达式 var reg=new RegExp("\\b ...

  8. jquery之源码

    1.插件扩展机制 所有的Jquery代理对象的实例,都是扩展自$.fn对象的 意味着只要我们继续扩展$.fn这个对象的功能,就相当于扩展了所有的Jquery代理对象的实例的功能 代码 var $bod ...

  9. topcoder srm 320 div1

    problem1 link 两个数字后面都有阶乘符号,可以抵消. import java.util.*; import java.math.*; import static java.lang.Mat ...

  10. 在page cache中的页,如果当时没有进程read或者write,引用计数到底该为多少

    在一次偶然的机会,在研究如何降低pagecache占用的过程中,走查了 invalidate_mapping_pages的代码: 通过调用 __pagevec_lookup 在radix树中收集一部分 ...