基于cropper.js封装vue实现在线图片裁剪组件功能

前端之家收集整理的这篇文章主要介绍了基于cropper.js封装vue实现在线图片裁剪组件功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

效果图如下所示,

cropper.js

cropper.js 安装

  • npm或bower安装

clone下载:

git clone

引用cropper.js

主要引用cropper.js跟cropper.css两个文件

注意:必须先引入jquery文件,才能使用cropper.js插件

简单使用

构建截图所要用到的div容器

![](picture.jpg)

添加容器的样式,让img填充满整个容器(很重要)

调用cropper.js方法,初始化截图控件

其他详细api请参考:

封装成vue组件

封装成vue组件中需解决的问题

  • cropper.js相关

模拟input框点击选择图片并对选择的图片进行格式、大小限制

重新选择图片裁剪

确认裁剪并获取base64格式的图片信息

  • vue相关

非父子组件之间的通信问题

模拟input框点击选择图片并对选择的图片进行格式、大小限制

构建一个隐藏的input标签,然后模拟点击此input,从而达到能选择图片功能

给input绑定一个监听内容变化的方法,拿到上传文件,并进行格式、大小校验

5242880) { _this.$Modal.error({ title: '超出限制',content: '您选择的图片过大,请选择5MB以内的图片!' }); return; } var reader = new FileReader(); // 将图片将转成 base64 格式 reader.readAsDataURL(_this.file); reader.onload = function () { _this.imgCropperData.imgSrc = this.result; _this.initCropper(); } }

重新选择图片裁剪

当第一次选择图片之后,肯定会面临需要重选图片的问题,那么就会面临如何替换掉裁剪框中的图片,上面的步骤选择了图片后通过方法拿到了图片的主要信息,现在就需要重新构建裁剪框就可以解决问题了,查看cropper.js给出的,发现官方是使用动态添加裁剪容器的方法,进行操作的,这里我们仿照官方进行实现。

' + _this.imgCropperData.imgSrc + ')'; let $avatarPreview = $('.avatar-preview'); $('#myCropper-workspace').empty().html(_this.imgObj); _this.imgObj.cropper({ aspectRatio: _this.proportionX / _this.proportionY,preview: $avatarPreview,crop: function(e) {

}
});
}

确认裁剪并获取base64格式的图片信息

构造用于上传的数据

{ const byteCharacters = atob(b64Data); const byteArrays = []; for(let offset = 0; offset < byteCharacters.length; offset += sliceSize) { const slice = byteCharacters.slice(offset,offset + sliceSize); const byteNumbers = new Array(slice.length); for(let i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray); } const blob = new Blob(byteArrays,{ type: contentType }); return blob; } const contentType = 'image/jepg'; const b64Data2 = photoType; const blob = b64toBlob(b64Data2,contentType); formData.append("file",blob,"client-camera-photo.png") formData.append("type",_this.imgType)

非父子组件之间的通信问题

在之前的项目中,常用到父子组件之间的通信传参,一般用两种方法

在router里面放置参数,然后通过调用route.params.xxx或者route.query.xxx进行获取

通过props进行通信

这里我们使用eventBus进行组件之间的通信

步骤

1.声明一个bus组件用于B组件把参数传递给A组件

2.在A组件中引用bus组件,并实时监听其参数变化

{ var _this = this; console.log(imgToken); ... }); } }

3.B组件中同样引用bus组件,来把参数传给A组件

参考:

vue选图截图插件完整代码

thumbnail-img.jpg' : imgCropperData.imgUploadSrc
thumbnail-img.jpg' : imgCropperData.imgUploadSrc

BY-LucaLJX

总结

以上所述是小编给大家介绍的基于cropper.js封装vue实现在线图片裁剪组件功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/33456.html

猜你在找的Vue相关文章