vue 头像上传裁剪功能

1，第一步安装vue-cropper

cnpm install vue-cropper

2，在main.js引用

import VueCropper from 'vue-cropper';
Vue.use(VueCropper);

3，使用方法

<template><div class="footerBtn"><el-button @click="dialogVisible=true">上传头像</el-button><!-- 弹出层-裁剪 --><el-dialog title="编辑头像" :visible.sync="dialogVisible" :before-close="handleClose"><span><el-row><inputref="filElem"type="file"id="uploads"accept="image/png, image/jpeg, image/gif, image/jpg"@change="uploadImg($event,1)"class="el-button hide"style="margin-bottom:15px"/><div class="upload-img" @click="clickUpload">点击上传图片</div></el-row><el-row><el-col :span="14"><!-- 裁剪 --><vueCropperstyle="width:100%;height:300px"ref="cropper":img="attach.customaryUrl":autoCrop="options.autoCrop":fixedBox="options.fixedBox":canMoveBox="options.canMoveBox":autoCropWidth="options.autoCropWidth":autoCropHeight="options.autoCropHeight":centerBox="options.centerBox"@realTime="realTime"></vueCropper></el-col><el-col :span="6.5"><h2 align="center" class=" mar-left-50">头像预览</h2><div class="show-preview"><div :style="previews.div" class="preview"><img :src="previews.url" :style="previews.img" width="100%" /></div></div></el-col></el-row><el-row class="footerBtn" align="center"><el-button type="primary " size="medium" round @click="confirm('blob')">确认</el-button><el-button type="info" size="medium" round @click="handleClose">取消</el-button></el-row></span></el-dialog></div>
</template><script>
//数据库里需要存两份图片地址，一张为原图地址，一张为裁剪后的头像地址
export default {data() {return {dialogVisible: false,options: {autoCrop: true, //默认生成截图框fixedBox: true, //固定截图框大小canMoveBox: false, //截图框不能拖动centerBox: false, //截图框被限制在图片里面autoCropWidth:200,  //截图框宽度autoCropHeight:200, //截图框高度        },previews: {}, //实时预览图数据attach: {//后端附件表id: "",userId: "",customaryUrl: "", //原图片路径laterUrl: "", //裁剪后图片路径  /static/logo.pngattachType: "photo" //附件类型},};},methods: {//控制弹出层关闭handleClose() {this.dialogVisible = false;},//实时预览realTime(data) {this.previews = data;},//点击图片调取inputclickUpload(){this.$refs.filElem.dispatchEvent(new MouseEvent('click')) },//选择本地图片uploadImg(e, num) {var file = e.target.files[0];if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {this.$message.error("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");return false;}//fileReader 接口，用于异步读取文件数据var reader = new FileReader();reader.readAsDataURL(file); //重要 以dataURL形式读取文件reader.onload = e => {// data = window.URL.createObjectURL(new Blob([e.target.result])) 转化为blob格式let data = e.target.result;this.attach.customaryUrl = data;// 转化为base64// reader.readAsDataURL(file)// 转化为blob};},//确认截图,上传confirm(type) {this.$refs.cropper.getCropData(res => {console.log(res)//这里截图后的url 是base64格式 让后台转下就可以});}}
};
</script>
<style>
/* 弹性布局 水平居中 */
.el-dialog{width: 700px !important;height: auto;
}
.show-preview {display: flex;justify-content: center;
}
.preview {border-radius: 50%;overflow: hidden;border: 1px solid #cccccc;background: #cccccc;width: 150px !important;height: 150px !important;margin-left: 50px;margin-top: 50px;
}
.upload-img{width: 100px;height: 30px;border:1px solid #f08512;margin-bottom: 5px;line-height: 30px;text-align: center;cursor: pointer;
}
.footerBtn {display: flex;justify-content: center;margin-top: 15px;
}
</style>

4，方法api
5，内置方法

this.$refs.cropper.startCrop() //开始截图
this.$refs.cropper.stopCrop()//停止截图
this.$refs.cropper.clearCrop() //清除截图
this.$refs.cropper.changeScale()//修改图片大小 正数为变大 负数变小

6，获取截图信息

//this.$refs.cropper.cropW//截图框宽度
//this.$refs.cropper.cropH//截图框高度// 获取截图的base64 数据
this.$refs.cropper.getCropData((data) => {// do somethingconsole.log(data)
})// 获取截图的blob数据
this.$refs.cropper.getCropBlob((data) => {// do somethingconsole.log(data)
})

vue 头像上传裁剪功能相关推荐

小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能
小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能参考文档:小程序图片裁剪插件 image-cropper 整体效果流程图一.第一步引入image-cropper,放在dist文 ...
vue 移动端头像裁剪_vue头像上传裁剪组件_一个漂亮的Vue组件，用于图像裁剪和上传...
vue头像上传裁剪组件 vue-image-crop-upload (vue-image-crop-upload) A beautiful vue component for image crop a ...
调用android的拍照或本地相册选取再实现相片上传服务器,Android调用系统相机、本地相册上传图片(头像上传(裁剪)、多张图片上传)...
开发中基本上都会有头像上传的功能,有的app还需要多张图片同时上传,下面简单将头像上传以及多张图片上传功能整理一下.图片选择仿照微信选择图片的界面.[参考] 多图片选择器 !!!推荐一个动态权限请求的 ...
Android实现注册登录头像上传等功能常规开发(Android端，服务器端开发实例)
Android实现注册登录头像上传等功能常规开发(Android端,服务器端开发实例) 标签: 注册登录Android开发servlet 2017-04-18 20:34 454人阅读评论(1) ...
SpringBoot + Vue 头像上传案例
头像上传前言后台系统一般会有用户个人信息的模块,为了增强用户的体验度,系统会开放自定义头像的功能,让用户可以上传自定义图片替代默认的系统头像.本文将通过SpringBoot+Vue来具体实现. 前 ...
android 华为裁剪全图,华为手机头像上传裁剪操作报错
华为手机头像上传操作, 裁剪点存储--进入裁剪后--点确定, 就直接报错退出程序了,其他机型测都是成功的,求大神指教报错代码 @Override protected void onActivityR ...
web实现QQ头像上传截取功能
由于最近一段时间比较忙,发现好久没写博客了,给大家分享下最近搞的logo上传截取功能.在实现这个功能之前找了一些jq的插件,最后选定了cropper在github中可以找到. 具体的思路是1:选择上传 ...
Vue头像上传，裁剪
安装:npm install vue-image-crop-upload --save (作为开发依赖安装) 使用:import myUpload from 'vue-image-crop-uploa ...
Android--利用Bmob实现头像上传下载功能
声明: 本文使用Bmob作为云后台,实现一个简简单单的头像的选取.截取.上传.下载功能的实现. 编码环境:Android Studio2.1.1 运行环境:Miui8.6.8.18(安卓版本号6.0. ...

vue 头像上传裁剪功能

vue 头像上传裁剪功能相关推荐

最新文章

热门文章