随着移动设备的普及，对于图片的处理需求越来越高，其中图片裁剪和压缩是比较常用的需求，本文将介绍在 vue 中如何实现图片裁剪及压缩。
一、裁剪图片
- 安装插件
首先需要安装插件 vue-cropper，该插件基于 cropperjs，可快速实现图片裁剪功能。
npm install vue-cropper --save
- 引入插件
在 main.js 中引入插件并注册：
import VueCropper from 'vue-cropper'
Vue.component('VueCropper', VueCropper)- 添加组件
在组件中添加裁剪组件：
立即学习“前端免费学习笔记（深入）”；
<template>
<div>
<input type="file" ref="file" @change="getFile($event)" />
<vue-cropper v-model="image" :guides="true"></vue-cropper>
<button @click="getCroppedImage">裁剪图片</button>
<div class="result">
<img :src="croppedImage" alt="裁剪后的图片" v-if="croppedImage" />
</div>
</div>
</template>- 获取图片
在 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
}
}- 裁剪图片
添加 getCroppedImage 方法用于裁剪图片：
getCroppedImage () {
this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
this.croppedImage = window.URL.createObjectURL(blob)
})
}二、压缩图片
除了裁剪图片，有些情况下我们还需要对图片进行压缩处理，以提高页面加载速度，下面介绍如何实现图片压缩。
- 安装插件
安装插件 vue-image-compressor，该插件基于 image-compressor.js，可快速实现图片压缩功能。
npm install vue-image-compressor --save
- 引入插件
在 main.js 中引入插件并注册：
import ImageCompressor from 'vue-image-compressor' Vue.use(ImageCompressor)
- 添加组件
在组件中添加上传组件：
<template>
<div>
<input type="file" ref="file" @change="getFile($event)" />
<button @click="compressImage">压缩图片</button>
<div class="result">
<img :src="compressedImage" alt="压缩后的图片" v-if="compressedImage" />
</div>
</div>
</template>- 获取图片
在 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
}
}- 压缩图片
添加 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 表示压缩后的图片格式。
三、示例代码
完整代码如下：
<template>
<div>
<h2>图片裁剪</h2>
<input type="file" ref="file" @change="getFile($event)" />
<vue-cropper v-model="image" :guides="true"></vue-cropper>
<button @click="getCroppedImage">裁剪图片</button>
<div class="result">
<img :src="croppedImage" alt="裁剪后的图片" v-if="croppedImage" />
</div>
<h2>图片压缩</h2>
<input type="file" ref="file" @change="getFile($event)" />
<button @click="compressImage">压缩图片</button>
<div class="result">
<img :src="compressedImage" alt="压缩后的图片" v-if="compressedImage" />
</div>
</div>
</template>
<script>
import VueCropper from 'vue-cropper'
import ImageCompressor from 'vue-image-compressor'
export default {
name: 'Image',
components: {
VueCropper
},
plugins: {
ImageCompressor
},
data () {
return {
image: null,
croppedImage: null,
compressedImage: null
}
},
methods: {
getFile (event) {
let file = event.target.files[0]
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = e => {
this.image = e.target.result
}
},
getCroppedImage () {
this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
this.croppedImage = window.URL.createObjectURL(blob)
})
},
compressImage () {
let options = {
quality: 0.7,
maxWidth: 500,
maxHeight: 500,
mimeType: 'image/jpeg'
}
this.$compress(this.image, options).then(data => {
this.compressedImage = data
})
}
}
}
</script>
<style>
.result {
margin-top: 1rem;
max-width: 500px;
}
</style>四、总结
本文介绍了在 Vue 中如何实现图片裁剪及压缩功能，其中裁剪使用了第三方插件 vue-cropper，压缩使用了第三方插件 vue-image-compressor，使用这些插件可以快速实现图片处理功能，提高开发效率。
