前端图片压缩库shrinkpng，已发布npm，完美支持PNG，JPG...

前言

对于纯前端的图片压缩而言，可以采用canvas提供的api对图片进行处理，如果图片格式是jpg，采用这种方法进行压缩是没有问题的，但是对于png而言，经过这种方法处理过后，得到的图片文件不仅效果上不会太好，而且文件可能会变得更大。

对于png格式的图片来说，往往需要采用一些压缩算法，去对图片进行优化。

介绍

shrinkpng采用了开源库UPNG.js提供的的压缩算法（类似于TinyPNG）对png进行处理，基于UPNG.js进行封装，对外暴露shrinkImage方法，使用方法非常简单，详见使用说明

Github仓库地址

Npm地址

压缩效果对比预览地址

使用

安装

打开终端运行下列命令：

npm install shrinkpng

或

yarn add shrinkpng

开始使用

请先下载本插件

然后在你的代码中引入 shrinkpng

import { shrinkImage } from "shrinkpng";

...
const _file = await shrinkImage(file, {
  quality: 80
});

Vue 文件示例

代码示例

<template>
	<div id="app">
		<input
			type="file"
			class="file"
			id="imgUpFile"
			style="position: absolute; left: 0; top: 0; width: 100%; height: 100%"
		/>
	</div>
</template>

<script>
import { shrinkImage } from "shrinkpng";

export default {
  name: "App",
  mounted() {
    document.getElementById("imgUpFile").addEventListener("change", (e) => {
      const file = e.target.files[0];
      const _file = await shrinkImage(file, {
        quality: 80
      }); // compress file
    });
  },
};
</script>