Vue 中如何实现图片裁剪及压缩？

随着移动设备的普及，对于图片的处理需求越来越高，其中图片裁剪和压缩是比较常用的需求，本文将介绍在 vue 中如何实现图片裁剪及压缩。

一、裁剪图片

1. 安装插件

首先需要安装插件 vue-cropper，该插件基于 cropperjs，可快速实现图片裁剪功能。

npm install vue-cropper --save

2. 引入插件

在 main.js 中引入插件并注册：

import VueCropper from 'vue-cropper'
Vue.component('VueCropper', VueCropper)

3. 添加组件

在组件中添加裁剪组件：

立即学习“前端免费学习笔记（深入）”；

4. 获取图片

在 data 中定义图片对象和裁剪后的图片对象：

data () {
  return {
    image: null,
    croppedImage: null
  }
}

添加 getFile 方法用于获取上传的图片：

getFile (event) {
  let file = event.target.files[0]
  let reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = e => {
    this.image = e.target.result
  }
}

5. 裁剪图片

添加 getCroppedImage 方法用于裁剪图片：

getCroppedImage () {
  this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
    this.croppedImage = window.URL.createObjectURL(blob)
  })
}

二、压缩图片

除了裁剪图片，有些情况下我们还需要对图片进行压缩处理，以提高页面加载速度，下面介绍如何实现图片压缩。

1. 安装插件

安装插件 vue-image-compressor，该插件基于 image-compressor.js，可快速实现图片压缩功能。

BgSub

免费的AI图片背景去除工具

下载

npm install vue-image-compressor --save

2. 引入插件

在 main.js 中引入插件并注册：

import ImageCompressor from 'vue-image-compressor'
Vue.use(ImageCompressor)

3. 添加组件

在组件中添加上传组件：

4. 获取图片

在 data 中定义图片对象和压缩后的图片对象：

data () {
  return {
    image: null,
    compressedImage: null
  }
}

添加 getFile 方法用于获取上传的图片：

getFile (event) {
  let file = event.target.files[0]
  let reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = e => {
    this.image = e.target.result
  }
}

5. 压缩图片

添加 compressImage 方法用于压缩图片：

compressImage () {
  let options = {
    quality: 0.7,
    maxWidth: 500,
    maxHeight: 500,
    mimeType: 'image/jpeg'
  }
  this.$compress(this.image, options).then(data => {
    this.compressedImage = data
  })
}

其中，options 是压缩参数，quality 表示压缩质量，maxWidth 和 maxHeight 表示最大宽度和最大高度，mimeType 表示压缩后的图片格式。

三、示例代码

完整代码如下：

四、总结

本文介绍了在 Vue 中如何实现图片裁剪及压缩功能，其中裁剪使用了第三方插件 vue-cropper，压缩使用了第三方插件 vue-image-compressor，使用这些插件可以快速实现图片处理功能，提高开发效率。