Compress the image files obtained by the front end
💻 Official website 🌍 Github 🚀 Npm
使用UPNG.js对 PNG 文件进行有损缩小，类似于TinyPNG和其他工具。
打开终端运行下列命令：
npm install shrinkpng
或
yarn add shrinkpng
请先下载本插件
然后在你的代码中引入 shrinkpng
import { shrinkImage } from "shrinkpng";
...
const _file = await shrinkImage(file, {
quality: 80
});代码示例
<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>