| | |
| | | <vue-cropper |
| | | ref="cropper" |
| | | :img="imgSrc" |
| | | :width="options.width" |
| | | :height="options.height" |
| | | :canScale="options.canScale" |
| | | :autoCrop="options.autoCrop" |
| | | :canMove="options.canMove" |
| | | :output-size="options.outputSize" |
| | | :centerBox="options.centerBox" |
| | | :autoCropWidth="options.autoCropWidth" |
| | | :autoCropHeight="options.autoCropHeight" |
| | |
| | | ></vue-cropper> |
| | | </div> |
| | | <div class="previews"> |
| | | <img style="width: 100px;height: 100px;border-radius: 50%;object-fit: cover" :src="cutImgSrc" alt="图片"> |
| | | <!-- <el-image--> |
| | | <!-- v-if="cutImgSrc"--> |
| | | <!-- style="width: 100px; height: 100px;vertical-align: middle;border-radius: 50%;"--> |
| | | <!-- :src="cutImgSrc"--> |
| | | <!-- fit="fill"></el-image>--> |
| | | <img style="width: 150px;height: 150px;border-radius1: 50%;object-fit: cover" :src="cutImgSrc" alt="图片"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | autoCrop: true, |
| | | canMove: false, |
| | | centerBox: true, |
| | | autoCropWidth: 200, |
| | | autoCropHeight: 200, |
| | | height: 500, |
| | | width: 500, |
| | | outputSize:{width: 500, height: 500 }, |
| | | autoCropWidth: 500, |
| | | autoCropHeight: 500, |
| | | fixed: true, |
| | | fixedNumber: [1, 1] |
| | | }, |
| | |
| | | }, |
| | | methods: { |
| | | getImagecropper(){ |
| | | return this.$refs.cropper |
| | | return this.$refs.cropper |
| | | }, |
| | | // 学习截图框变化事件 |
| | | realTime (data) { |
| | |
| | | .iconShot { |
| | | .icon-dialog { |
| | | .clip { |
| | | display: flex; |
| | | .img { |
| | | height: 400px; |
| | | flex: 7.5; |
| | | height: 500px; |
| | | //float: left; |
| | | // display: inline-block; |
| | | |
| | | .vue-cropper { |
| | | background-image: none; |
| | | } |
| | |
| | | |
| | | } |
| | | .previews { |
| | | width: 100%; |
| | | height: 100px; |
| | | position: relative; |
| | | //width: 100px; |
| | | flex: 2.5; |
| | | //float: right; |
| | | height: 200px; |
| | | //position: relative; |
| | | >img { |
| | | position: absolute; |
| | | left: 50%; |
| | | transform: translateX(-50%); |
| | | //position: absolute; |
| | | //left: 50%; |
| | | transform: translate(35%, 50px); |
| | | max-height: 100%; |
| | | } |
| | | } |