93 lines
2.5 KiB
Vue
93 lines
2.5 KiB
Vue
<template>
|
|
<div style="height: 100%;width: 100%; display: flex; justify-content: center; align-items: center; background-color: black;" @mousemove.stop="emptyFunc">
|
|
<view class="nice-cropper" :style="{height: height, width: width, background: background}" @touchstart="start"
|
|
@touchmove.stop="move" @touchcancel="end" @touchend="end">
|
|
<image class="nice-cropper__image" :src="src"
|
|
:style="{transform: transformMeta, width: image.width + 'px', height: image.height + 'px'}" />
|
|
<view class="nice-cropper__ctrls"
|
|
:class="{'nice-cropper__ctrls--view' : view, 'nice-cropper__ctrls--border': showCtrlBorder, 'nice-cropper__ctrls--circle': view && circleView && maskType !== 'outline'}"
|
|
:style="ctrlStyle">
|
|
<view class="nice-cropper__corner nice-cropper__corner--lt" @touchstart="setCutMode('lt')" />
|
|
<view class="nice-cropper__corner nice-cropper__corner--rt" @touchstart="setCutMode('rt')" />
|
|
<view class="nice-cropper__corner nice-cropper__corner--rb" @touchstart="setCutMode('rb')" />
|
|
<view class="nice-cropper__corner nice-cropper__corner--lb" @touchstart="setCutMode('lb')" />
|
|
</view>
|
|
<canvas v-if="canvasId" :id="canvasId" :canvas-id="canvasId"
|
|
style="position: absolute;left:-500000px;top: -500000px"
|
|
:style="{width: ctrlWidth * canvasZoom+'px', height: ctrlHeight * canvasZoom + 'px'}" />
|
|
</view>
|
|
</div>
|
|
</template>
|
|
<script src="./cropper.js"></script>
|
|
<style>
|
|
.nice-cropper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nice-cropper__image {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
transform-origin: 50% 50%;
|
|
}
|
|
|
|
.nice-cropper__corner {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
position: absolute;
|
|
}
|
|
|
|
.nice-cropper__corner::after {
|
|
position: absolute;
|
|
left: -5px;
|
|
right: -5px;
|
|
bottom: -5px;
|
|
top: -5px;
|
|
content: '';
|
|
}
|
|
|
|
.nice-cropper__ctrls {
|
|
position: absolute;
|
|
box-shadow: inset 0 0 10rpx 0 rgba(0, 0, 0, .3);
|
|
}
|
|
|
|
.nice-cropper__ctrls--circle {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.nice-cropper__ctrls--border {
|
|
border: 2rpx solid #fff;
|
|
}
|
|
|
|
.nice-cropper__corner--lt {
|
|
left: 0;
|
|
top: 0;
|
|
border-top: 4rpx solid #FFF;
|
|
border-left: 4rpx solid #FFF;
|
|
}
|
|
|
|
.nice-cropper__corner--rt {
|
|
right: 0;
|
|
top: 0;
|
|
border-top: 4rpx solid #FFF;
|
|
border-right: 4rpx solid #FFF;
|
|
}
|
|
|
|
.nice-cropper__corner--rb {
|
|
right: 0;
|
|
bottom: 0;
|
|
border-right: 4rpx solid #FFF;
|
|
border-bottom: 4rpx solid #FFF;
|
|
}
|
|
|
|
.nice-cropper__corner--lb {
|
|
left: 0;
|
|
bottom: 0;
|
|
border-left: 4rpx solid #FFF;
|
|
border-bottom: 4rpx solid #FFF;
|
|
}
|
|
</style> |