随着移动设备的普及，对于图片的处理需求越来越高，其中图片裁剪和压缩是比较常用的需求，本文将介绍在 vue 中如何实现图片裁剪及压缩。
一、裁剪图片
安装插件
首先需要安装插件 vue-cropper，该插件基于 cropperjs，可快速实现图片裁剪功能。
npm install vue-cropper --save
登录后复制引入插件
在 main.js 中引入插件并注册：
import VueCropper from 'vue-cropper'Vue.component('VueCropper', VueCropper)
登录后复制添加组件
在组件中添加裁剪组件：
立即学习“前端免费学习笔记（深入）”；
@@##@@
登录后复制获取图片
在 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)
登录后复制添加组件
在组件中添加上传组件：
@@##@@
登录后复制获取图片
在 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 表示压缩后的图片格式。
三、示例代码
完整代码如下：
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 }) } }}.result { margin-top: 1rem; max-width: 500px;}图片裁剪
@@##@@图片压缩
@@##@@
登录后复制
四、总结
本文介绍了在 Vue 中如何实现图片裁剪及压缩功能，其中裁剪使用了第三方插件 vue-cropper，压缩使用了第三方插件 vue-image-compressor，使用这些插件可以快速实现图片处理功能，提高开发效率。
以上就是Vue 中如何实现图片裁剪及压缩？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3019300.html
