提交 ea5f0377 编写于 作者: bo.dang's avatar bo.dang

裁剪缩放优化

上级 ccf332a5
...@@ -3,9 +3,14 @@ ...@@ -3,9 +3,14 @@
<div :class="{'rc-cropper__canvasCrop1': cropOption.uploadType == 1, 'rc-cropper__canvasCrop2': cropOption.uploadType == 2}"> <div :class="{'rc-cropper__canvasCrop1': cropOption.uploadType == 1, 'rc-cropper__canvasCrop2': cropOption.uploadType == 2}">
<img :src="originImg" v-if="!cropper"> <img :src="originImg" v-if="!cropper">
<canvas :id="originImg" ref="canvas"/> <canvas :id="originImg" ref="canvas"/>
<!--<div class="rc-cropper__iconCrop">-->
<!--<el-tooltip content="确认裁剪" placement="right" v-if="cropper">-->
<!--<el-button type="primary" size="mini" @click="sureCropper()" style="margin-top:530px;margin-right: 320px;"><i class="el-icon-check">确认裁剪</i></el-button>-->
<!--</el-tooltip>-->
<!--</div>-->
<div class="rc-cropper__iconCrop"> <div class="rc-cropper__iconCrop">
<el-tooltip content="确认裁剪" placement="right" v-if="cropper"> <el-tooltip content="确认裁剪" placement="right" v-if="cropper">
<el-button type="primary" size="mini" @click="sureCropper()" style="margin-top:530px;margin-right: 320px;"><i class="el-icon-check">确认裁剪</i></el-button> <el-button type="primary" size="mini" @click="sureCropper()"><i class="el-icon-check">确认裁剪</i></el-button>
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
...@@ -128,13 +133,13 @@ ...@@ -128,13 +133,13 @@
guides: true, guides: true,
highlight: true, highlight: true,
cropBoxMovable: true, cropBoxMovable: true,
zoomable: true, // zoomable: true,
cropBoxResizable: vm.cropOption.cropBoxResizable,//是否显示等比例缩放 cropBoxResizable: vm.cropOption.cropBoxResizable,//是否显示等比例缩放
minCropBoxWidth: vm.cropOption.minCropBoxWidth,// 剪切区域的最小宽度 minCropBoxWidth: vm.cropOption.minCropBoxWidth,// 剪切区域的最小宽度
minCropBoxHeight: vm.cropOption.minCropBoxHeight, // 剪切区域的最小高度 minCropBoxHeight: vm.cropOption.minCropBoxHeight, // 剪切区域的最小高度
// minContainerHeight: 500, // minContainerHeight: 500,
// minCanvasHeight: 500, // minCanvasHeight: 500,
restore: true, // restore: true,
toggleDragModeOnDblclick: false, toggleDragModeOnDblclick: false,
// aspectRatio: 75/42, // aspectRatio: 75/42,
aspectRatio: this.cropOption.aspectRatio,// 显示等比例缩放的比例 aspectRatio: this.cropOption.aspectRatio,// 显示等比例缩放的比例
...@@ -250,8 +255,8 @@ ...@@ -250,8 +255,8 @@
.rc-cropper__iconCrop { .rc-cropper__iconCrop {
position: absolute; position: absolute;
// left: 46%; // left: 46%;
right: 13%; right: 45%;
top: 15%; top: 91%;
} }
.el-tooltip { .el-tooltip {
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册