677 lines
19 KiB
Vue
677 lines
19 KiB
Vue
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 861 4 0 72 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||
<template>
|
||
<view class="fui-image__cropper" @touchmove.stop.prevent="stop">
|
||
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
|
||
<image @touchstart="handler.touchstart" @touchmove="handler.touchmove" @touchend="handler.touchend"
|
||
@mousedown="handler.mousedown" class="fui-cropper__img"
|
||
:class="{'fui-cropper__img-hidden':!src || !initVal}" :src="src"
|
||
:style="{width: (imgWidth ? imgWidth : width) + 'px',height: imgHeight ? imgHeight + 'px' : 'auto',transitionDuration: ani ?'0.25s' : '0s'}"
|
||
mode="widthFix">
|
||
</image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-NVUE -->
|
||
<image ref="fui_cropper_img" class="fui-cropper__img" :src="src"
|
||
:style="{width: (imgWidth ? imgWidth : width) + 'px',height: imgHeight ? imgHeight + 'px' : 'auto'}"
|
||
mode="widthFix">
|
||
</image>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5 -->
|
||
<image @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" class="fui-cropper__img"
|
||
:class="{'fui-cropper__img-hidden':!src || !initVal}" :src="src"
|
||
:style="{width: (imgWidth ? imgWidth : width) + 'px',height: imgHeight ? imgHeight + 'px' : 'auto',transitionDuration: ani ?'0.25s' : '0s',transform:getTransform}"
|
||
mode="widthFix">
|
||
</image>
|
||
<!-- #endif -->
|
||
|
||
<!-- #ifdef APP-NVUE -->
|
||
<view class="fui-cropper__mask">
|
||
<view class="fui-cropper__top" :style="{height:(windowHeight-canvasHeight)/2+'px'}"></view>
|
||
<view class="fui-cropper__left" :style="{width:(windowWidth-canvasWidth)/2+'px',height:height+'px'}"></view>
|
||
<view class="fui-cropper__right" :style="{width:(windowWidth-canvasWidth)/2+'px',height:height+'px'}">
|
||
</view>
|
||
<view class="fui-cropper__bottom" :style="{height:(windowHeight-canvasHeight)/2+'px'}"></view>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
<view class="fui-cropper__mask"
|
||
:style="{ width: width + 'px', height: height + 'px', borderRadius: round ? '50%' : '0' }">
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
|
||
<view class="fui-cropper__border" :change:prop="handler.valsChange" :prop="changeval"
|
||
:data-width="width" :data-height="height" :data-windowHeight="windowHeight"
|
||
:data-windowWidth="windowWidth" :data-imgWidth="imgWidth" :data-imgHeight="imgHeight"
|
||
:data-imgTop="imgTop" :data-angle="angle"
|
||
:style="{ borderRadius: round ? '50%' : '0',borderColor:borderColor}"></view>
|
||
<!-- #endif -->
|
||
|
||
<!-- #ifdef APP-NVUE -->
|
||
<view class="fui-cropper__border"
|
||
:style="{width:width+'px',height:height+'px', borderRadius: round ? canvasWidth/2+'px' : '0',borderColor:borderColor}">
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5 -->
|
||
<view class="fui-cropper__border" :style="{ borderRadius: round ? '50%' : '0',borderColor:borderColor}">
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
<!-- #ifdef APP-NVUE -->
|
||
<view class="fui-cropper__real-el"
|
||
:style="{width: (imgWidth ? imgWidth : width) + 'px',height: imgHeight ? imgHeight + 'px' : 'auto'}"
|
||
@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" ref="fui_cropper_real"></view>
|
||
<!-- #endif -->
|
||
</view>
|
||
|
||
<!-- #ifndef APP-NVUE -->
|
||
<canvas canvas-id="fui_image_cropper" id="fui_image_cropper" :disable-scroll="true"
|
||
:style="{ width: nWidth * nScaleRatio + 'px', height: nWidth * nScaleRatio + 'px' }"
|
||
class="fui-cropper__canvas"></canvas>
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
|
||
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
|
||
<script src="./index.wxs" module="handler" lang="wxs"></script>
|
||
<!-- #endif -->
|
||
|
||
<script>
|
||
import mpjs from './mpjs.js'
|
||
import bindingx from './bindingx.js'
|
||
export default {
|
||
name: "fui-image-cropper",
|
||
mixins: [mpjs, bindingx],
|
||
props: {
|
||
src: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
//裁剪框高度 px
|
||
height: {
|
||
type: [Number, String],
|
||
default: 280
|
||
},
|
||
//裁剪框宽度 px
|
||
width: {
|
||
type: [Number, String],
|
||
default: 280
|
||
},
|
||
//是否为圆形裁剪框
|
||
round: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
borderColor: {
|
||
type: String,
|
||
default: '#B2B2B2'
|
||
},
|
||
// #ifndef MP-QQ
|
||
scaleRatio: {
|
||
type: [Number, String],
|
||
default: 2
|
||
},
|
||
// #endif
|
||
// #ifdef MP-QQ
|
||
scaleRatio: {
|
||
type: [Number, String],
|
||
default: 3
|
||
},
|
||
// #endif
|
||
//图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理
|
||
quality: {
|
||
type: Number,
|
||
default: 0.8
|
||
},
|
||
fileType: {
|
||
type: String,
|
||
default: 'png'
|
||
},
|
||
//是否为网络图片
|
||
network: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
watch: {
|
||
src(val) {
|
||
this.initVal && this.handleImage(val)
|
||
},
|
||
ani(val) {
|
||
clearTimeout(this.aniTimer);
|
||
if (val) {
|
||
this.aniTimer = setTimeout(() => {
|
||
this.ani = false;
|
||
}, 220);
|
||
}
|
||
},
|
||
scaleRatio(val) {
|
||
this.nScaleRatio = Number(val) || 2
|
||
},
|
||
width(val) {
|
||
this.nWidth = Number(val) || 280
|
||
},
|
||
height(val) {
|
||
this.nHeight = Number(val) || 280
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
windowHeight: 600,
|
||
windowWidth: 400,
|
||
cutX: 0,
|
||
cutY: 0,
|
||
imgWidth: 0,
|
||
imgHeight: 0,
|
||
scale: 1,
|
||
angle: 0,
|
||
ani: false,
|
||
imgTop: 0,
|
||
imgLeft: 0,
|
||
changeval: '',
|
||
initVal: false,
|
||
naturalWidth: 0,
|
||
naturalHeight: 0,
|
||
picturePath: '',
|
||
rotateAngle: 0,
|
||
nScaleRatio: 2,
|
||
nWidth: 280,
|
||
nHeight: 280
|
||
};
|
||
},
|
||
created() {
|
||
this.cutTimer = null;
|
||
this.aniTimer = null;
|
||
this.ctx = null;
|
||
this.nScaleRatio = Number(this.scaleRatio) || 2
|
||
this.nWidth = Number(this.width) || 280
|
||
this.nHeight = Number(this.height) || 280
|
||
},
|
||
mounted() {
|
||
let sys = uni.getSystemInfoSync();
|
||
this.windowHeight = sys.windowHeight
|
||
this.windowWidth = sys.windowWidth
|
||
this.imgTop = sys.windowHeight / 2;
|
||
this.imgLeft = sys.windowWidth / 2;
|
||
this.$nextTick(() => {
|
||
// #ifndef APP-NVUE
|
||
this.ctx = uni.createCanvasContext('fui_image_cropper', this);
|
||
// #endif
|
||
setTimeout(() => {
|
||
this.changeval = `1_${this.getRandom()}`;
|
||
this.initVal = true
|
||
setTimeout(() => {
|
||
this.src && this.handleImage(this.src)
|
||
}, 50);
|
||
}, 220);
|
||
})
|
||
},
|
||
methods: {
|
||
stop() {},
|
||
getRandom() {
|
||
return Math.ceil(Math.random() * 10e5).toString(36)
|
||
},
|
||
loading() {
|
||
uni.showLoading({
|
||
// #ifndef MP-ALIPAY
|
||
mask: true,
|
||
// #endif
|
||
title: '请稍候...'
|
||
});
|
||
},
|
||
reset() {
|
||
this.scale = 1;
|
||
this.angle = 0;
|
||
let sys = uni.getSystemInfoSync();
|
||
this.imgTop = sys.windowHeight / 2;
|
||
this.imgLeft = sys.windowWidth / 2;
|
||
this.changeval = `4_${this.getRandom()}`;
|
||
},
|
||
calcSize(width, height) {
|
||
let imgWidth = width,
|
||
imgHeight = height;
|
||
if (imgWidth > 0 && imgHeight > 0) {
|
||
if (imgWidth / imgHeight > this.nWidth / this.nHeight) {
|
||
imgHeight = this.nHeight;
|
||
imgWidth = (width / height) * imgHeight;
|
||
} else {
|
||
imgWidth = this.nWidth;
|
||
imgHeight = (height / width) * imgWidth;
|
||
}
|
||
} else {
|
||
imgWidth = uni.getSystemInfoSync().windowWidth;
|
||
imgHeight = 0;
|
||
}
|
||
this.imgWidth = imgWidth;
|
||
this.imgHeight = imgHeight;
|
||
this.changeval = `2_${this.getRandom()}`;
|
||
uni.hideLoading()
|
||
},
|
||
// #ifdef APP-NVUE
|
||
async compressImage(url, width, height, orientation) {
|
||
let imgUrl = url;
|
||
if (this.network) {
|
||
imgUrl = await this.getLocalImage(url);
|
||
if (!imgUrl) {
|
||
this.toast('网络图片处理失败~');
|
||
return;
|
||
}
|
||
}
|
||
let defaultAngle = {
|
||
up: 0,
|
||
down: 180,
|
||
left: 270,
|
||
right: 90
|
||
} [orientation] || 0;
|
||
let f_dst = `_documents/${this.getRandom()}.jpg`;
|
||
plus.zip.compressImage({
|
||
src: imgUrl,
|
||
dst: f_dst,
|
||
overwrite: true,
|
||
rotate: defaultAngle,
|
||
format: 'jpg'
|
||
},
|
||
i => {
|
||
this.picturePath = i.target;
|
||
this.calcSize(width, height);
|
||
this.changeval = `3_${this.getRandom()}`;
|
||
},
|
||
e => {
|
||
this.picturePath = imgUrl;
|
||
this.calcSize(width, height);
|
||
this.changeval = `3_${this.getRandom()}`;
|
||
}
|
||
);
|
||
},
|
||
// #endif
|
||
handleImage(src) {
|
||
this.reset();
|
||
this.loading();
|
||
uni.getImageInfo({
|
||
src: src,
|
||
success: res => {
|
||
let width = res.width;
|
||
let height = res.height;
|
||
this.naturalWidth = width;
|
||
this.naturalHeight = height;
|
||
let orientation = res.orientation;
|
||
if (orientation && orientation != 'up') {
|
||
//宽高传值颠倒
|
||
width = orientation == 'down' ? res.width : res.height;
|
||
height = orientation == 'down' ? res.height : res.width;
|
||
//此处需要测试，可能导致裁剪出错
|
||
// #ifdef APP-NVUE
|
||
this.compressImage(src, width, height, orientation);
|
||
// #endif
|
||
} else {
|
||
// #ifdef APP-NVUE
|
||
this.calcSize(width, height);
|
||
this.changeval = `3_${this.getRandom()}`;
|
||
// #endif
|
||
}
|
||
|
||
// #ifndef APP-NVUE
|
||
this.calcSize(width, height);
|
||
this.changeval = `3_${this.getRandom()}`;
|
||
// #endif
|
||
},
|
||
fail: err => {
|
||
this.calcSize(0, 0);
|
||
this.changeval = `3_${this.getRandom()}`;
|
||
}
|
||
});
|
||
},
|
||
change(e) {
|
||
this.cutX = e.cutX || 0;
|
||
this.cutY = e.cutY || 0;
|
||
this.imgWidth = e.imgWidth || this.imgWidth;
|
||
this.imgHeight = e.imgHeight || this.imgHeight;
|
||
this.scale = e.scale || 1;
|
||
this.angle = e.angle || 0;
|
||
this.imgTop = e.imgTop || 0;
|
||
this.imgLeft = e.imgLeft || 0;
|
||
},
|
||
async getLocalImage(src) {
|
||
return await new Promise((resolve, reject) => {
|
||
uni.downloadFile({
|
||
url: src,
|
||
success: res => {
|
||
resolve(res.tempFilePath);
|
||
},
|
||
fail: res => {
|
||
reject(false);
|
||
}
|
||
});
|
||
});
|
||
},
|
||
moveStop() {
|
||
clearTimeout(this.cutTimer);
|
||
this.cutTimer = setTimeout(() => {
|
||
this.changeval = `5_${this.getRandom()}`;
|
||
}, 600);
|
||
},
|
||
moveDuring() {
|
||
clearTimeout(this.cutTimer);
|
||
},
|
||
rotate() {
|
||
if (!this.src) {
|
||
this.toast('请选择要裁剪的图片！')
|
||
return;
|
||
}
|
||
this.ani = true;
|
||
let angle = this.angle + 90;
|
||
if (angle % 90) {
|
||
angle = Math.round(angle / 90) * 90;
|
||
}
|
||
this.angle = angle
|
||
this.moveStop();
|
||
this.changeval = `3_${this.getRandom()}`;
|
||
},
|
||
toast(text) {
|
||
uni.showToast({
|
||
title: text,
|
||
icon: 'none'
|
||
});
|
||
},
|
||
// #ifdef APP-NVUE
|
||
getImageByNvue(callback) {
|
||
let getCutImg = async () => {
|
||
let imgUrl = this.picturePath || this.src;
|
||
if (this.network) {
|
||
imgUrl = await this.getLocalImage(this.src);
|
||
if (!imgUrl) {
|
||
this.toast('网络图片处理失败~');
|
||
return;
|
||
}
|
||
}
|
||
let f_dst = `_documents/${this.getRandom()}.${this.fileType}`;
|
||
let multiple = Math.round(this.angle / 90);
|
||
let angle = 0,
|
||
x = 0,
|
||
y = 0,
|
||
left = 0,
|
||
top = 0,
|
||
clipHeight = 0,
|
||
clipWidth = 0;
|
||
let sys = uni.getSystemInfoSync();
|
||
let isAndroid = sys.platform.toLocaleLowerCase() == 'android';
|
||
|
||
if (multiple % 2 == 0) {
|
||
angle = this.angle % 360 == 0 || this.angle == 0 ? 0 : 180;
|
||
if (!isAndroid || (isAndroid && angle == 0)) {
|
||
x = this.imgLeft - (this.imgWidth * this.scale) / 2;
|
||
y = this.imgTop - (this.imgHeight * this.scale) / 2;
|
||
left = (((this.cutX - x) / this.imgWidth / this.scale) * 100).toFixed(2);
|
||
top = (((this.cutY - y) / this.imgHeight / this.scale) * 100).toFixed(2);
|
||
clipWidth = ((this.canvasWidth / this.imgWidth / this.scale) * 100).toFixed(2);
|
||
clipHeight = ((this.canvasHeight / this.imgHeight / this.scale) * 100).toFixed(2);
|
||
} else {
|
||
x = this.imgLeft - (this.imgWidth * this.scale) / 2;
|
||
y = this.imgTop - (this.imgHeight * this.scale) / 2;
|
||
left = (((this.imgWidth * this.scale - (this.cutX - x) - this.canvasWidth) / this
|
||
.imgWidth / this.scale) * 100).toFixed(2);
|
||
top = (((this.imgHeight * this.scale - (this.cutY - y) - this.canvasHeight) / this
|
||
.imgHeight / this.scale) * 100).toFixed(2);
|
||
clipWidth = ((this.canvasWidth / this.imgWidth / this.scale) * 100).toFixed(2);
|
||
clipHeight = ((this.canvasHeight / this.imgHeight / this.scale) * 100).toFixed(2);
|
||
}
|
||
} else {
|
||
angle = this.angle % 270 == 0 ? 270 : 90;
|
||
if (isAndroid) {
|
||
if (angle == 90) {
|
||
x = this.imgLeft - (this.imgHeight * this.scale) / 2;
|
||
y = this.imgTop - (this.imgWidth * this.scale) / 2;
|
||
top = (((this.imgHeight * this.scale - (this.cutX - x) - this.canvasHeight) / this
|
||
.imgHeight / this.scale) * 100).toFixed(2);
|
||
left = (((this.imgWidth * this.scale - (this.cutY - y) - this.canvasWidth) / this
|
||
.imgWidth / this.scale) * 100).toFixed(2);
|
||
clipHeight = ((this.canvasWidth / this.imgHeight / this.scale) * 100).toFixed(2);
|
||
clipWidth = ((this.canvasHeight / this.imgWidth / this.scale) * 100).toFixed(2);
|
||
} else {
|
||
x = this.imgLeft - (this.imgHeight * this.scale) / 2;
|
||
y = this.imgTop - (this.imgWidth * this.scale) / 2;
|
||
top = (((this.cutX - x) / this.imgHeight / this.scale) * 100).toFixed(2);
|
||
left = (((this.cutY - y) / this.imgWidth / this.scale) * 100).toFixed(2);
|
||
clipHeight = ((this.canvasWidth / this.imgHeight / this.scale) * 100).toFixed(2);
|
||
clipWidth = ((this.canvasHeight / this.imgWidth / this.scale) * 100).toFixed(2);
|
||
}
|
||
} else {
|
||
x = this.imgLeft - (this.imgHeight * this.scale) / 2;
|
||
y = this.imgTop - (this.imgWidth * this.scale) / 2;
|
||
left = (((this.cutX - x) / this.imgHeight / this.scale) * 100).toFixed(2);
|
||
top = (((this.cutY - y) / this.imgWidth / this.scale) * 100).toFixed(2);
|
||
clipWidth = ((this.canvasWidth / this.imgHeight / this.scale) * 100).toFixed(2);
|
||
clipHeight = ((this.canvasHeight / this.imgWidth / this.scale) * 100).toFixed(2);
|
||
}
|
||
}
|
||
let width = (this.imgWidth < this.naturalWidth ? this.naturalWidth : this.imgWidth) * this
|
||
.scale;
|
||
let height = (this.imgHeight < this.naturalHeight ? this.naturalHeight : this.imgHeight) * this
|
||
.scale;
|
||
width = `${width}px`;
|
||
height = `${height}px`;
|
||
left = Number(left) <= 0 ? 0 : left;
|
||
top = Number(top) <= 0 ? 0 : top;
|
||
plus.zip.compressImage({
|
||
src: imgUrl,
|
||
dst: f_dst,
|
||
quality: this.quality * 100,
|
||
overwrite: true,
|
||
format: this.fileType,
|
||
width: width,
|
||
height: height,
|
||
rotate: angle,
|
||
clip: {
|
||
top: `${top}%`,
|
||
left: `${left}%`,
|
||
width: `${clipWidth}%`,
|
||
height: `${clipHeight}%`
|
||
}
|
||
},
|
||
i => {
|
||
uni.hideLoading();
|
||
callback && callback(i.target)
|
||
},
|
||
e => {
|
||
console.log(e);
|
||
uni.hideLoading();
|
||
this.toast('图片裁剪失败,请稍候再试~');
|
||
}
|
||
);
|
||
};
|
||
setTimeout(() => {
|
||
getCutImg();
|
||
}, 20);
|
||
},
|
||
// #endif
|
||
//裁剪
|
||
cutting(callback) {
|
||
if (!this.src) {
|
||
this.toast('请选择要裁剪的图片！')
|
||
return;
|
||
}
|
||
this.loading();
|
||
// #ifdef APP-NVUE
|
||
this.getImageByNvue(callback)
|
||
// #endif
|
||
|
||
// #ifndef APP-NVUE
|
||
let draw = async () => {
|
||
let imgWidth = this.imgWidth * this.scale * this.nScaleRatio;
|
||
let imgHeight = this.imgHeight * this.scale * this.nScaleRatio;
|
||
let xpos = this.imgLeft - this.cutX;
|
||
let ypos = this.imgTop - this.cutY;
|
||
this.ctx.translate(xpos * this.nScaleRatio, ypos * this.nScaleRatio);
|
||
this.ctx.rotate((this.angle * Math.PI) / 180);
|
||
let src = this.src;
|
||
// #ifdef APP-PLUS || MP
|
||
if (this.network) {
|
||
src = await this.getLocalImage(this.src);
|
||
}
|
||
// #endif
|
||
this.ctx.drawImage(src, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);
|
||
this.ctx.draw(false, () => {
|
||
let params = {
|
||
width: this.nWidth * this.nScaleRatio,
|
||
height: Math.round(this.nHeight * this.nScaleRatio),
|
||
// #ifdef MP-QQ
|
||
destWidth: this.nWidth * this.nScaleRatio * 2,
|
||
destHeight: Math.round(this.nHeight) * this.nScaleRatio * 2,
|
||
// #endif
|
||
|
||
// #ifndef MP-QQ
|
||
destWidth: this.nWidth * this.nScaleRatio,
|
||
destHeight: Math.round(this.nHeight) * this.nScaleRatio,
|
||
// #endif
|
||
fileType: this.fileType,
|
||
quality: this.quality
|
||
};
|
||
setTimeout(() => {
|
||
// #ifdef MP-ALIPAY
|
||
this.ctx.toTempFilePath({
|
||
...params,
|
||
success: res => {
|
||
uni.hideLoading();
|
||
this.ctx.rotate(((360 - this.angle % 360) * Math
|
||
.PI) / 180);
|
||
this.ctx.translate(-xpos * this.nScaleRatio, -
|
||
ypos * this.nScaleRatio);
|
||
this.ctx.clearRect(0, 0, this.nWidth * this
|
||
.nScaleRatio, this.nHeight * this
|
||
.nScaleRatio);
|
||
this.ctx.draw();
|
||
callback && callback(res.apFilePath)
|
||
}
|
||
});
|
||
// #endif
|
||
|
||
// #ifndef MP-ALIPAY
|
||
uni.canvasToTempFilePath({
|
||
...params,
|
||
canvasId: 'fui_image_cropper',
|
||
success: res => {
|
||
uni.hideLoading();
|
||
callback && callback(res.tempFilePath)
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
}
|
||
},
|
||
this
|
||
);
|
||
// #endif
|
||
}, 80)
|
||
});
|
||
};
|
||
draw();
|
||
// #endif
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.fui-image__cropper {
|
||
background: rgba(0, 0, 0, 0.6);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.fui-cropper__img,
|
||
.fui-cropper__real-el {
|
||
/* #ifndef APP-NVUE */
|
||
backface-visibility: hidden;
|
||
/* #endif */
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 2;
|
||
transform-origin: center;
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.fui-cropper__img-hidden {
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
}
|
||
|
||
/* #endif */
|
||
.fui-cropper__mask {
|
||
position: fixed;
|
||
z-index: 4;
|
||
/* #ifndef APP-NVUE */
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
border: 3000px solid rgba(0, 0, 0, 0.5);
|
||
pointer-events: none;
|
||
/* #endif */
|
||
|
||
/* #ifdef APP-NVUE */
|
||
border-style: solid;
|
||
border-color: rgba(0, 0, 0, 0.5);
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* #endif */
|
||
}
|
||
|
||
.fui-cropper__border {
|
||
/* #ifndef APP-NVUE */
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
box-sizing: border-box;
|
||
pointer-events: none;
|
||
/* #endif */
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.fui-cropper__canvas {
|
||
position: fixed;
|
||
left: -3000px;
|
||
top: -3000px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
/* #ifdef APP-NVUE */
|
||
.fui-cropper__top {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.fui-cropper__left {
|
||
position: absolute;
|
||
left: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.fui-cropper__right {
|
||
position: absolute;
|
||
right: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.fui-cropper__bottom {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
/* #endif */
|
||
</style> |