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' }">
<vueCropper
ref="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">
<div
style="
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>
时间仓促,大家应该都能看懂,不懂请留言哈!