使用cropper插件的头像裁剪功能获取base64图片压缩

&＃xff0c;头像裁剪裁剪功能做了大概有五天&＃xff0c;效率太低了&＃xff0c;有时候遇到问题不知道该怎么下手&＃xff0c;在此非常感谢同事的耐心指导&＃xff0c;下面是基于cropper插件做的头像裁剪的功能&＃xff0c;里面使用到了如何获取base64,以及图片压缩处理

cropperjs插件

cropper使用文档
插件的安装及使用方法文档里面都有详细的说明

安装&＃xff1a;

npm install cropperjs


使用

在参考文档的基础上&＃xff0c;想要实现的功能是&＃xff1a;点击上传图片&＃xff0c;上传后跳转到模态框&＃xff0c;进行裁剪。这里会有一个图片大小的问题&＃xff0c;裁剪后的图片在保存时会扩大2倍&＃xff0c;所以要做一个压缩处理

上传图片

photo.vue
1.设置一个img




2.图片从状态管理中获取

computed: {...mapGetters({&＃39;getUrl&＃39;: &＃39;getUrl&＃39;}),imgUrl() {if (this.getUrl.url && this.getUrl.url.startsWith(&＃39;http&＃39;)) {return this.getUrl.url}//返回默认图片return defaultPhoto}}


如何获取图片的base64

3.图片上传方法

methods: {...mapActions([&＃39;setModelBaseInfo&＃39;, &＃39;setPhotoUploadComponent&＃39;]),/*** 上传图片* &＃64;param event*/handlerChange(event) {let file &＃61; event.target.files[0]if (!file) {return}let type &＃61; file.type || &＃39;&＃39;if ((type !&＃61;&＃61; "image/jpeg" && type !&＃61;&＃61; "image/png")) {alert(&＃39;上传失败’)//置空event.target.value &＃61; nullreturn}let that &＃61; this// 获取并记录图片的base64编码let reads &＃61; new FileReader()// 读出base64reads.readAsDataURL(file)reads.onloadend &＃61; function() {var dataURL &＃61; reads.result// 跳转到模态框进行裁剪that.UploadComponent(dataURL)event.target.value &＃61; null}}},


模态框处理

modal.vue
1.模态框template

//点击保存时 图片需要一定时间保存&＃xff0c;所以加一个loading保存保存中




2.引入cropper插件

import &＃39;cropperjs/dist/cropper.css&＃39;
import Cropper from &＃39;cropperjs&＃39;


3.设置cropper的opptions属性

//使用过程中多处会调用cropper&＃xff0c;所以直接写在data里面 方便调用
data() {return {cropper: &＃39;&＃39;}},mounted() {this.init()},
methods: {
//写一个方法&＃xff0c;便于调用init() {//图片存在的情况下执行裁剪操作if (this.$refs.img) {this.cropper &＃61; new Cropper(this.$refs.img, {//此处为options属性&＃xff0c;可根据实际需求改变aspectRatio: 3 / 4,autoCropArea: 0.75,viewMode: 2,background: false,rounded: true})}}}


base64去前缀

fitler(base) {let str &＃61; &＃39;base64,&＃39;return base.slice(base.indexOf(str) &＃43; str.length)}


获取base64大小

getBase64Size(base64) {let eqTagIndex &＃61; base64.indexOf("&＃61;")base64 &＃61; eqTagIndex !&＃61; -1 ? base64.substring(0, eqTagIndex) : base64let strLen &＃61; base64.lengthreturn strLen - (strLen / 8) * 2}


压缩图片

scaleImg(base64, percent, cb) {let _img &＃61; new Image()_img.src &＃61; base64_img.onload &＃61; function() {let _canvas &＃61; document.createElement("canvas")_canvas.setAttribute("width", this.width)_canvas.setAttribute("height", this.height)_canvas.getContext("2d").drawImage(this, 0, 0, this.width, this.height)let data &＃61; _canvas.toDataURL("image/jpeg", percent)cb(data)}


保存图片

modal.vue

//点击保存按钮
handleClick() {const croppedCanvas &＃61; this.cropper.getCroppedCanvas()const MAX_SIZE &＃61; 10 * 1024 * 1024let base64 &＃61; croppedCanvas.toDataURL() // 获取到裁剪的地址let size &＃61; this.getBase64Size(base64)if (size {this.clickUpload(data)})}},clickUpload(data) {//此处可以做提示条 正在上传alert(&＃39;上传中’&＃xff09;//Upload 请求服务this.Upload({name: &＃39;a.jpg&＃39;,pic: this.filter(data)}).then(res &＃61;> {if (res.result &＃61;&＃61;&＃61; &＃39;ok&＃39;) {this.updateUrlStore(res.data || &＃39;&＃39;)alert(&＃39;uploadsuccess&＃39;)} else {alert(&＃39;uploadfail&＃39;)}}).catch(() &＃61;> {alert(&＃39;uploadfail&＃39;)})},/*** 同步到store*/updateUrlStore(url) {this.setModal({...this.modal,url})//同步模态框this.setCurrentComponent()},


遇到的问题

1.图片第一次上传裁剪后&＃xff0c;二次上传同一图片时无反应
图片第一次上传请求接口没有问题&＃xff0c;第二次点击没有正常请求接口
原因是第一次上传成功时&＃xff0c;触发的onchange事件,onchange事件会在内容改变且失去焦点时触发,而第二次上传的图片还是上一次的图片的话,就不会触发这个onchange事件,从而导致图片上传失败.
解决方案&＃xff1a;每次上传之后&＃xff0c;都把值清空&＃xff0c;比如e.target.value &＃61; null属性和自带的方法

总结

首先&＃xff0c;在阅读插件文档的时候&＃xff0c;要弄明白它的使用规则&＃xff0c;如何调用.我在前期花了很多时间在文档上&＃xff0c;不太清楚如何使用插件自带的方法。其次&＃xff0c;在实际开发过程中&＃xff0c;会遇到很多的bug&＃xff0c;多数与调取数据有关&＃xff0c;以及对vue语法的使用的不熟悉&＃xff0c;写好了方法&＃xff0c;不知道该在哪里去调用。所以要更多地去熟悉vue&＃xff01;

资源参考

压缩base64
cropperjs
模态框