vue.js实现图片压缩封装方法

下面我来详细讲解vue.js实现图片压缩封装方法的完整攻略。

1. 前置知识

在开始编写图片压缩封装方法之前，需要掌握以下前置知识：

• JavaScript基础知识
• Vue.js基础知识
• HTML5中的Canvas API

2. 实现步骤

下面是实现图片压缩封装方法的步骤：

2.1. 安装插件

首先需要安装compressorjs插件，该插件可以实现图片压缩的功能。可以使用如下命令进行安装：

npm install compress.js --save

2.2. 编写压缩函数

接下来需要编写压缩图片的函数。可以在Vue组件的methods中定义一个compressImage函数，参数为要压缩的图片和压缩图片完成后的回调函数。

methods: {
  compressImage(file, callback) {
    // 创建文件读取器
    const reader = new FileReader()
    // 当文件读取成功后执行
    reader.onload = (event) => {
      // 将图片转换为Base64编码的数据，因为插件要求传入Base64
      const dataURL = event.target.result
      // 加载插件
      const Compressor = require('compressorjs')
      // 压缩图片
      new Compressor(dataURL, {
        quality: 0.6, // 设置图片的压缩质量，0到1之间，默认值为0.8
        success: (result) => {
          // 压缩完成后，将压缩后的结果回调出去
          callback(result)
        }
      })
    }
    // 读取文件
    reader.readAsDataURL(file)
  }
}

2.3. 调用压缩函数

最后，在需要使用压缩函数的地方调用即可。例如，可以在上传图片的回调函数中调用该函数：

methods: {
  handleUpload(file) {
    // 调用压缩函数
    this.compressImage(file, (result) => {
      // 将压缩后的结果提交到服务器
      // ...
    })
  }
}

至此，图片压缩封装方法的实现就完成了。

3. 示例说明

下面给出两个示例说明：

3.1. 压缩图片并显示

<template>
  <div>
    <!-- 显示原图 -->
    <img :src="imageUrl" />
    <!-- 显示压缩后的图 -->
    <img :src="compressedUrl" />
    <!-- 上传按钮 -->
    <input type="file" @change="handleUpload" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '', // 原图地址
      compressedUrl: '' // 压缩后的地址
    }
  },
  methods: {
    handleUpload(file) {
      // 保存原图地址
      this.imageUrl = URL.createObjectURL(file)
      // 调用压缩函数
      this.compressImage(file, (result) => {
        // 将压缩后的结果显示出来
        this.compressedUrl = result
      })
    }
  }
}
</script>

3.2. 压缩并上传图片

<template>
  <div>
    <!-- 上传按钮 -->
    <input type="file" @change="handleUpload" />
  </div>
</template>

<script>
export default {
  methods: {
    handleUpload(file) {
      // 调用压缩函数
      this.compressImage(file, (result) => {
        // 将压缩后的结果提交到服务器
        // ...
      })
    }
  }
}
</script>