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

怼烎@ 2021-09-02 10:49 214阅读 0赞

![70d9834127eff0a7e19739c1150489e3.png][]

## 前言 ##

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

## 效果展示 ##

**原图片大小：82KB**  
![53c6b1a4bdeac74fd56c1bd1b34e4817.png][]  
**压缩后的图片大小：17KB**  
![47bb3c8a9681bdfe8447a4ff88d83287.png][]

## 测试 ##

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

![b6d910219a0c88f8419e65fae89953ee.png][]

## 教程 ##

这么好的工具，那我们来看看怎么用代码实现它。首先你可能需要一些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>
    import EXIF from "exif-js";
    export default {
      name: "imgzip",
      data() {
        return {
          imgsrc: "",
        };
      },
      methods: {
        // 上传图片
        handleClick() {
          if (this.$refs.pic.files[0]) {
    
            // this.fileToBase64(this.$refs.pic.files[0]).then((res) => {
            //   this.imgsrc = res;
            // });
    
            this.rotateImg(this.$refs.pic.files[0]).then((res) => {
              this.imgsrc = res;
            });
          }
        },
        // 压缩和图片旋转
        rotateImg(imgFile) {
          return new Promise((resolve) => {
            EXIF.getData(imgFile, function () {
              let exifTags = EXIF.getAllTags(this);
              let reader = new FileReader();
              reader.readAsDataURL(imgFile);
              reader.onload = (e) => {
                let imgData = e.target.result;
                document.querySelector("#imgs").src = e.target.result;
                // 8 表示 顺时针转了90
                // 3 表示 转了 180
                // 6 表示 逆时针转了90
                if (
                  exifTags.Orientation == 8 ||
                  exifTags.Orientation == 3 ||
                  exifTags.Orientation == 6
                ) {
                  //翻转
                  //获取原始图片大小
                  const img = new Image();
                  img.src = imgData;
                  img.onload = function () {
                    let cvs = document.createElement("canvas");
                    let ctx = cvs.getContext("2d");
                    //如果旋转90
                    if (exifTags.Orientation == 8 || exifTags.Orientation == 6) {
                      cvs.width = img.height;
                      cvs.height = img.width;
                    } else {
                      cvs.width = img.width;
                      cvs.height = img.height;
                    }
                    if (exifTags.Orientation == 6) {
                      //原图逆时针转了90, 所以要顺时针旋转90
                      ctx.rotate((Math.PI / 180) * 90);
                      ctx.drawImage(
                        img,
                        0,
                        0,
                        img.width,
                        img.height,
                        0,
                        -img.height,
                        img.width,
                        img.height
                      );
                    }
                    if (exifTags.Orientation == 3) {
                      //原图逆时针转了180, 所以顺时针旋转180
                      ctx.rotate((Math.PI / 180) * 180);
                      ctx.drawImage(
                        img,
                        0,
                        0,
                        img.width,
                        img.height,
                        -img.width,
                        -img.height,
                        img.width,
                        img.height
                      );
                    }
                    if (exifTags.Orientation == 8) {
                      //原图顺时针旋转了90, 所以要你时针旋转90
                      ctx.rotate((Math.PI / 180) * -90);
                      ctx.drawImage(
                        img,
                        0,
                        0,
                        img.width,
                        img.height,
                        -img.width,
                        0,
                        img.width,
                        img.height
                      );
                    }
                    let data = cvs.toDataURL("image/jpeg"); // 输出压缩后的base64
                    let arr = data.split(","),
                      mime = arr[0].match(/:(.*?);/)[1], // 转成blob
                      bstr = atob(arr[1]),
                      n = bstr.length,
                      u8arr = new Uint8Array(n);
                    while (n--) {
                      u8arr[n] = bstr.charCodeAt(n);
                    }
                    let files = new window.File(
                      [new Blob([u8arr], { type: mime })],
                      "test.jpeg",
                      { type: "image/jpeg" }
                    );
                    resolve(files);
                  };
                } else {
                  let image = new Image(); //新建一个img标签（还没嵌入DOM节点)
                  image.src = e.target.result;
                  image.onload = function () {
                    let canvas = document.createElement("canvas"), // 新建canvas
                      context = canvas.getContext("2d"),
                      imageWidth = image.width, //压缩后图片的大小
                      imageHeight = image.height,
                      data = "";
                    canvas.width = imageWidth;
                    canvas.height = imageHeight;
                    context.drawImage(image, 0, 0, imageWidth, imageHeight);
                    data = canvas.toDataURL("image/jpeg"); // 输出压缩后的base64
                    let arr = data.split(","),
                      mime = arr[0].match(/:(.*?);/)[1], // 转成blob
                      bstr = atob(arr[1]),
                      n = bstr.length,
                      u8arr = new Uint8Array(n);
                    while (n--) {
                      u8arr[n] = bstr.charCodeAt(n);
                    }
                    let files = new window.File(
                      [new Blob([u8arr], { type: mime })],
                      "test.jpeg",
                      { type: "image/jpeg" }
                    ); // 转成file
                    resolve(files);
                  };
                }
              };
            });
          });
        },
    
        /*
        fileToBase64(file) {
          let that = this,
            reader = new FileReader();
          reader.readAsDataURL(file);
          return new Promise((resolve, reject) => {
            reader.onload = function (e) {
              //这里是一个异步，所以获取数据不好获取在实际项目中，就用new Promise解决
              if (this.result) {
                let image = new Image(); //新建一个img标签（还没嵌入DOM节点)
                image.src = e.target.result;
                document.querySelector("#imgs").src = e.target.result;
                image.onload = function () {
                  let canvas = document.createElement("canvas"), // 新建canvas
                    context = canvas.getContext("2d"),
                    imageWidth = image.width / 2, //压缩后图片的大小
                    imageHeight = image.height / 2,
                    data = "";
                  canvas.width = imageWidth;
                  canvas.height = imageHeight;
                  context.drawImage(image, 0, 0, imageWidth, imageHeight);
                  data = canvas.toDataURL("image/jpeg"); // 输出压缩后的base64
                  let arr = data.split(","),
                    mime = arr[0].match(/:(.*?);/)[1], // 转成blob
                    bstr = atob(arr[1]),
                    n = bstr.length,
                    u8arr = new Uint8Array(n);
                  while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                  }
                  let files = new window.File(
                    [new Blob([u8arr], { type: mime })],
                    "test.jpeg",
                    { type: "image/jpeg" }
                  ); // 转成file
                  resolve(files);
                };
              } else {
                reject("err");
              }
            };
          });
        },
        */
    
    
        // 保存图片
        keepImg() {
          // this.$emit("canvasToImage", this.imgsrc);
    
          const fd = new FormData();
          fd.append("file", this.imgsrc);
          fetch("http://localhost:6300/upload", {
            method: "post",
            mode:"cors",
            body:fd,
          })
            .then((response) => response.json())
            .then((response) => {
              if(response.success){
                console.log(this.imgsrc);
                const size = this.imgsrc.size<1024?this.imgsrc.size+"字节":Math.round(this.imgsrc.size/1024)+"KB";
                console.log(size);
                alert(`图片${response.name}${response.msg}！压缩后图片大小为：${size}。`);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        },
      },
    };
    </script>
    <style scoped lang="less">
    .upload {
      display: inline-block;
      background: #ffb90f;
      color: white;
      font-size: 16px;
      text-align: center;
      border-radius: 4px;
      padding: 10px 30px;
      margin-bottom: 20px;
    }
    .upload:hover {
      filter: brightness(110%);
    }
    .upload:active {
      filter: brightness(60%);
    }
    .imgbox {
      text-align: center;
      width: 60%;
      margin: 0 auto;
      img {
        width: 100%;
        height: 60vh;
        object-fit: contain;
      }
    }
    .face {
      margin-top: 30px;
      .container1 {
        background: #000;
        position: relative;
        width: 580px;
        height: 436px;
        margin: 0 auto;
        #canvas1 {
          position: absolute;
        }
        video,
        #canvas,
        #canvas1 {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 581px;
          height: 436px;
        }
      }
      .btns {
        padding: 10px;
        button {
          margin: 20px 20px 20px 0;
        }
      }
      .tips {
        font-size: 26px;
        color: #666;
        margin: 10px 0;
        line-height: 48px;
      }
      .imgs {
        p {
          font-size: 28px;
        }
      }
    }
    </style>

我在这里实现了一个Vue组件（所以你得知道Vue是什么？组件又是什么？）。知道这些还不够，你还要知道怎么从依赖库下载依赖，这里需要另外下载的依赖是`exif-js`。

> 一个JavaScript库，用于从图像文件中读取EXIF元数据。  
> 您可以通过图像或文件输入元素在浏览器中的图像上使用它。EXIF和IPTC元数据均被检索。该软件包还可以在AMD或CommonJS环境中使用。

备注；使用exif.js依赖的作用是 为了防止在IOS系统中拍照上传图片旋转90度问题。

### 后台搭建 ###

后台的逻辑其实很简单，就是实现一个接口，接收前台发来的文件，保存到本地目录上以及返回给前台状态。

## 结语 ##

谢谢你的浏览，如果还有需要优化的地方请及时留言哦～

--------------------

> 欢迎关注我的公众号「**前端历劫之路**」

> 回复关键词「电子书」，即可获取近12本前端热门电子书。

> 回复关键词「红宝书第4版」，即可获取最新《JavaScript高级程序设计》（第四版）电子书。

> 你还可以加我微信，我拉拢了很多IT大佬，创建了一个技术交流、文章分享群，欢迎你的加入。

>  *  作者：**Vam的金豆之路**
>  *  主要领域：**前端开发**
>  *  我的微信：**maomin9761**
>  *  微信公众号：**前端历劫之路**
> 
> ![Image 1][]

--------------------

[70d9834127eff0a7e19739c1150489e3.png]: /images/20210813/44bf7758cba84b85a29c83670b7c7001.png
[53c6b1a4bdeac74fd56c1bd1b34e4817.png]: /images/20210813/86b48aaf4eec4e65a6913caf625c6b3e.png
[47bb3c8a9681bdfe8447a4ff88d83287.png]: /images/20210813/f4106754bcc640e6af754a07c38c1b4c.png
[b6d910219a0c88f8419e65fae89953ee.png]: /images/20210813/66e759caa1354b04b4e1e0ffef421140.png
[Image 1]: