直播开发app,VUE图片裁剪,打码,旋转功能
直播开发app,VUE图片裁剪,打码,旋转功能
1,先下载插件。
cnpm install image-mosaic -D
cnpm install --save vue-cropper
2,在components目录下创建一个imageEdit文件夹,文件夹下创建index.vue,index.vue中内容如下:
<template>
<div>
<el-dialog
title=""
:visible.sync="dialogImg"
:close-on-click-modal="false"
width="70%"
top="5vh"
:before-close="handleClose"
>
<div v-loading="isLoading" class="edit-img">
<vueCropper
ref="cropper"
:img="editImgUrl"
:info="false"
:output-type="'png'"
:info-true="true"
:can-move="true"
:can-scale="true"
:can-move-box="true"
:auto-crop-width="400"
:auto-crop-height="400"
:mode="'cover'"
:center-box="true"
:enlarge="2"
:full="true"
:max-img-size="200000"
@imgLoad="imgLoadCrop"
/>
<div v-if="isMosaic" class="tumo-img">
<canvas id="canvas" />
</div>
<div class="button-group">
<div class="button-item" @click="rotateHandle(1)">左旋90</div>
<div class="button-item" @click="rotateHandle(2)">右旋90</div>
<div class="button-item" @click="cropHandle">{{ indexTab==1?'裁 剪':'取消裁剪' }}</div>
<div class="button-item" @click="mosaicHandle">{{ !isMosaic?'打 码':'取消打码' }}</div>
<div class="button-item" @click="saveHandle">保 存</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
import Mosaic from 'image-mosaic'
import { upLoad1 } from '@/api/files-management'
export default {
components: {
VueCropper
},
props: {
dialogImg: {
type: Boolean,
default: () => false
},
imgPath: {
type: String,
default: () => ''
}
},
data() {
return {
editImgUrl: '', // 编辑后的图片
indexTab: 1, // 1是裁剪,2是取消裁剪
isMosaic: false, // 是否打码
isLoading: true
}
}
以上就是直播开发app,VUE图片裁剪,打码,旋转功能, 更多内容欢迎关注之后的文章