使用UPNG.js对 PNG 文件进行有损缩小，类似于TinyPNG和其他工具。

安装

打开终端运行下列命令：

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>