手把手教你实现一个图片压缩工具（Vue与Node的完美配合）

马克社区

发布于 2022-05-12 11:20:15

31400

代码可运行

文章被收录于专栏：高端IT高端IT

运行总次数：0

代码可运行

前言

图片压缩对于我们日常生活来讲，是非常实用的一项功能。有时我们会在在线图片压缩网站上进行压缩，有时会在电脑下软件进行压缩。那么我们能不能用前端的知识来自己实现一个图片压缩工具呢？答案是有的。效果展示原图片大小：82KB

压缩后的图片大小：17KB

测试

是不是特别good！！！看到上面的压缩后的图片，可能你还会质疑图片的清晰度，那么看下面（第一张图为压缩后的图片）：

教程

这么好的工具，那我们来看看怎么用代码实现它。首先你可能需要一些Vue.js和Node.js的基础，另外你可能还需要一点对知识的渴望～哈哈哈。

话不多说，我们来上干货。前台搭建

<template>
  <div class="face">
    <label for="file" class="inputlabelBox">
      <input
        type="file"
        ref="pic"
        id="file"
        name="face"
        accept="image/*"
        capture="camera"
        :style="{ display: 'none' }"
        @change="handleClick"
      />
      <div class="upload">上传图片</div>
    </label>
    <div class="imgbox" v-show="imgsrc != ''">
      <img src id="imgs" alt />
    </div>
    <div>
      <p class="upload" @click="keepImg" v-show="imgsrc != ''">确定</p>
    </div>
  </div>
</template>
<script>