使用element-ui + cropper.js自己封装一个图片裁剪组件__Vue.js

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

本文主要使用了element-ui的图片上传组件获取图片，然后使用cropper.js进行图片裁剪，在裁剪完以后进行格式转换，然后自行图片上传，文中的css使用了stylus编译，如果不是请自行更改

裁剪效果

1.插件安装

npm install cropperjs --save

element-ui的安装就不予以赘述了，主要使用了element-ui的图片上传以及$message

2.组件编写

在components文件夹下新建upload文件夹，然后在upload文件夹下新建 cropperBox.vue 以及 upCover.vue

编写cropperBox.vue

在cropperBox.vue中写入以下内容,(finishCropImage方法中的blob的数据格式请自行选择以下两种，第一种是blob，第二种是普通文件方式。)

``<template>

<el-progress :text-inside="true" :stroke-width="30" :percentage="uploadProgress"> </el-progress> <button type="button" class="cropper-btn" @click="finishCropImage" :disabled="btnTips.disable" :class="{'btn-bg': uploading}"> {{ btnTips.value }} </button>

</template> <script> import Cropper from 'cropperjs' export default { name: 'cropper-box', props: { options: { default: { aspectRatio: 1 / 1, preview: '#cropperRes', zoomOnWheel: false, minCropBoxWidth: 50， viewMode:2, } }, uploadProgress: { default: 0 } }, data () { return { cropper: null, imgHasLoad: false, cropperHasInit: false, uploading: false, rawFile: null } }, watch: { imgHasLoad (val) { if (!val) { this.uploading = false } } }, computed: { btnTips () { if (this.uploading) { return { value: '正在上传，请稍等', disable: true } } return { value: '裁剪完成，立即上传', disable: false } } }, methods: { show () { this.imgHasLoad = true }, close () { this.imgHasLoad = false }, loadCropper (rawFile) { this.rawFile = rawFile const URL = window.URL || window.webkitURL const blobURL = URL.createObjectURL(rawFile) var image = this.$refs.uploadPreview if (!this.cropper) this.cropper = new Cropper(image, this.options) this.cropper.reset().replace(blobURL) }, // 完成裁剪，将文件进行格式转换，发送给父组件，请自行选择普通文件格式还是blob格式，格式转换方法已封装，请看下面的两个方法 finishCropImage () { this.uploading = true const croppedCanvas = this.cropper.getCroppedCanvas() const croppedDataUrl = croppedCanvas.toDataURL(this.rawFile.type) const blob = this.base64toFile(croppedDataUrl) this.$emit('finishCropImage', blob) }, // dataUrl 转 blob dataURLtoBlob (dataurl) { /* eslint-disable */ var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type:mime}); /* eslint-enable */ }, //base64转为普通文件格式 base64toFile (dataurl, filename = 'file') { let arr = dataurl.split(',') let mime = arr[0].match(/:(.*?);/)[1] let suffix = mime.split('/')[1] let bstr = atob(arr[1]) let n = bstr.length let u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], `${filename}.${suffix}`, { type: mime }) }, } } </script> <style lang="stylus"> @import "cropperjs/dist/cropper.min.css" .cropper-wrap .cropper-alert-mask position: fixed top: 0 left: 0 right: 0 bottom: 0 z-index: 2000 background-color: rgba(#000000, .5) visibility: hidden height: 0 transition: all .3s ease .cropper-alert-mask.show visibility: visible height: 100% .cropper-alert opacity: 0 transition: all .3s ease visibility: hidden padding: 10px position: fixed z-index: 2000 top: 50px left: 50% transform: translateX(-50%) scale(2) background-color: #ffffff border-radius: 5px overflow: hidden width: 100% height: 100% max-width: 600px max-height: 530px &.show opacity: 1 visibility: visible transform: translateX(-50%) scale(1) .cropper position: relative max-width: 600px max-height: 460px height: 100% padding: 10px padding-right: 120px @media (max-width: 1324px) padding-top: 120px padding-right: 10px background-color: #f9fbfc .layout-icon-wrap position: absolute cursor: pointer right: 0px top: 0px font-size: 20px .cropper-box position: relative width: 100% height: 100% background-color: #ffffff .cropper-res-wrap position: absolute top: 50% transform: translateY(-50%) @media (max-width: 1324px) top: 0 left: 50% transform: translateX(-50%) right: 0 width: 100px height: auto padding: 10px background-color: #a8a8a8 box-sizing: content-box .cropper-res width: 100px height: 100px overflow: hidden background-color: #ffffff .cropper-btns-wrap position: relative margin-top: 20px .cropper-btn position: absolute left: 0 top: 0 width: 100% height: 30px line-height: 1 background: #ffffff border: 1px solid #e1e1e1 border-radius: 15px color: #666666 cursor: pointer .btn-bg background: #FF000000 </style>``

编写upCover.vue

在upCover.vue中写入以下内容,(finishCropImage方法中请自行补充图片上传调用接口的方法)

`<template>

<el-upload ref="upload" class="cover-uploader" :show-file-list="false" :before-upload="beforeVipImageUpload" :auto-upload="false" :on-change="onFileChange" :on-progress="onUploadProgress">

</el-upload> <cropperBox ref="cropperBox" :options="options" :uploadProgress="uploadProgress" [@finishCropImage](/user/finishCropImage)="finishCropImage"> </cropperBox>

</template> <script> import uploadImage from "../../mixins/uploadImage"; import cropperBox from './cropperBox' import {upload} from "../../api/base"; export default { name: 'up-cover', mixins:[uploadImage], components: { cropperBox }, props: { defaultImg: String, ratio: { // 裁剪结果宽高比 default: 1 }, width: [Number,String], height: [Number,String], WHRatio: { // 组件宽高比 default: 1 }, cropBoxResizable:Boolean, //是否可以修改裁剪框的尺寸 maxWidth: String, maxHeight: String, tip: { default: '上传图片' }, maxSize: { // 最大选择图片的大小，单位M default: 3 } }, data () { return { cropper: null, newFile: null, options: { aspectRatio: 2.166, preview: '#cropperRes', zoomOnWheel: false, cropBoxResizable:false, minCropBoxWidth: 50, viewMode:2 }, token: {}, uploadProgress: 0, calcHeight: 0 } }, created() { this.options.aspectRatio = this.ratio; this.options.cropBoxResizable = this.cropBoxResizable; if (this.height) { this.calcHeight = this.height } }, computed: { imageUrl () { return this.defaultImg } }, mounted() { if (!this.calcHeight) { if (this.width) { this.calcHeight = this.width / this.WHRatio } else { this.calcHeight = this.$refs.coverOutWrap.offsetWidth / this.WHRatio } } }, methods: { //截取图片上传的事件，有图片的情况就打开裁剪框，并且将文件传入到裁剪框中 onFileChange (file, fileList) { if (file.status === 'ready') { this.$refs.cropperBox.show(); this.$refs.cropperBox.loadCropper(file.raw) } }, //文件裁剪，nerFile就是最终拿到的文件，自行调接口进行图片上传 finishCropImage (newFile) { this.newFile = newFile; //图片上传调接口请自行补充 }, //上传图片之前的大小检测，文件大小通过prop传递，可在组件使用自定义文件大小限制 beforeVipImageUpload(file){ const isLt3M = file.size / 1024 / 1024 < this.maxSize; if (!isLt3M) { this.$message.error('上传图片大小不可大于' + this.maxSize + 'M'); } return isLt3M; let uploadFile = new window.File([this.newFile], file.name, { type: this.newFile.type }); uploadFile.uid = this.newFile.uid; return Promise.resolve(uploadFile) }, //文件上传进度 onUploadProgress (event, file, fileList) { this.uploadProgress = parseInt(event.percent) - 1 } } } </script> <style lang="stylus"> .cover-upload-wrap position: relative width: 100% max-width: 300px height: 150px border-radius: 5px .cover-uploader width: 100% height: 100% .el-upload width: 100% height: 100% overflow: hidden border-radius: 5px cursor: pointer border: 1px solid #dddddd .img-wrap position: relative width: 100% height: 100% &:hover .img-mask-default opacity: 1 background-color: rgba(0, 0, 0, 0.5) color: #ffffff .cover position: relative width: 100% height: 100% border-radius: 5px .img-mask-default position: absolute left: 0 top: 0 width: 100% height: 100% padding-left: 10px padding-right: 10px background-color: #ffffff color: #555555 display: flex flex-direction: column justify-content: center font-size: 12px transition: all .2s linear .el-icon-upload font-size: 18px .img-mask opacity: 0 </style>`

使用方法

引入插件

import UP from '@/components/upload/upCover' export default { components:{UP}, }

在页面中使用

pictureUrl就是图片上传成功以后显示的回调地址，请自行填写，maxSize可以限定上传图片时候的尺寸大小，width和height限定组件大小，

<UP class="upload-cover" :default-img="pictureUrl?pictureUrl:''" ratio="2.166" :cropBoxResizable="true" width="156" height="72" tip="上传等级图标" maxSize="3" [@uploadSuccess](/user/uploadSuccess)="uploadSuccess"> </UP>

在uploadSuccess方法中可以拿到图片上传成功以后的回调，具体操作自行补充啦

uploadSuccess(res){ //this.pictureUrl=res.data },

1.插件安装

2.组件编写

使用方法

更多操作

javascript操作

配置对象

方法

事件