vue项目中-上传图片头像并裁剪成任意大小的实现

vue项目中-上传图片头像并裁剪成任意大小的实现
先看效果图：

放大缩小-翻转-查看都有的哦！

直接上代码

<el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body width="30%" :before-close="delCropp"><div class="cropper-content"><el-row><el-col :xs="24" :md="12" :style="{ height: '150px' }"><vueCropperref="cropper":img="option.img":info="false":auto-crop="option.autoCrop":auto-crop-width="option.autoCropWidth":auto-crop-height="option.autoCropHeight":fixed-box="option.fixedBox"@realTime="realTime"@imgLoad="imgLoad"/></el-col><el-col :xs="24" :md="12" style="height: 150px"><divstyle="width: 144px;height: 144px;border-radius: 12px;margin: auto;box-shadow: 0 0 4px #ccc;overflow: hidden;margin-top: 3px;"><img :src="previews.url" :style="previews.img"></div></el-col></el-row><el-row style="margin-top: 10px"><el-col :lg="{ span: 1, offset: 2 }" :md="2"><el-button icon="el-icon-plus" size="small" @click="changeScale(1)" /></el-col><el-col :lg="{ span: 1, offset: 1 }" :md="2"><el-button icon="el-icon-minus" size="small" @click="changeScale(-1)" /></el-col><el-col :lg="{ span: 1, offset: 1 }" :md="2"><el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()" /></el-col><el-col :lg="{ span: 1, offset: 1 }" :md="2"><el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()" /></el-col></el-row></div><div slot="footer" class="dialog-footer"><el-button @click="delCropp">取 消</el-button><el-button type="primary" :loading="loading" @click="finish">确认</el-button></div></el-dialog>

时间仓促，大家应该都能看懂，不懂请留言哈！

vue项目中-上传图片头像并裁剪成任意大小的实现相关推荐

vue项目中实现头像上传的功能型组件
@vue项目中实现头像上传的功能型组件功能需求实现个人中心的头像上传功能: 1.用户未上传过头像,展示设定好的默认头像(区分男女) 2.支持格式png.jpg.jpeg 3.图片大小:小于等于2M ...
vue项目中，上传图片做像素大小宽高的限制
vue项目中,上传图片做像素大小宽高的限制 <el-uploadclass="avatar-uploader"action="http://upload.qiniu ...
Vue项目中遇到了大文件分片上传的问题
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...
问题：在vue项目中如何使用element-ui的照片墙功能？
遇到的问题: 在vue项目中如何使用element-ui的照片墙功能,限制只上传9张照片fileList?尤其是在编辑的情况下. 解决方法: <el-uploadaction="htt ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
【全栈项目上线（vue+node+mongodb）】06.nodejs服务上线（生产环境前后分离的vue项目中怎么解决跨域问题）...
以下操作使用下面项目为案例 https://github.com/itguide/vnshop ## 启动node服务克隆好项目后记得把依赖包安装好 npm i 使用 node 启动node服务 c ...
vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...

vue项目中-上传图片头像并裁剪成任意大小的实现

vue项目中-上传图片头像并裁剪成任意大小的实现相关推荐

最新文章

热门文章