BrowserTinyPNG

• 在浏览器内运行的PNG瘦身工具

• 仅适用于颜色不丰富的图片(如LOGO、默认头像等)

基本原理

• PNG具体结构请参考w3文档:w3document

• 将RGBA类型的PNG图片通过简单的聚类算法减少颜色总数,并最终转换成PLTE型,减小数据量

使用方式(参考demo)

• 编译打包(已包含打包后的代码)

npm install && npm run make

• 引入源代码:

<script src="../dist/index.js"></script>

• 相关方法

// 读取buffer,解析后绘制出来
const reader = new PNGReader(buffer);
const reader.getPainter().draw(document.body);

// 聚类算法生成调色板图片
// paletteLength 为生成调色板的size
const writer = reader.getWriter();
writer.cluster(paletteLength);

// 绘制在浏览器上
writer.getPainter().draw(document.body);

// 生成二进制Blob并通过下载
const result = document.createElement('a');
result.href = URL.createObjectURL(writer.writeAsPNG());
result.download = 'output.png';
result.click();

基本效果

• 以下为paletteLength=5的效果图