feat: 首次提交
This commit is contained in:
peerless_hero
677
components/firstui/fui-image-cropper/fui-image-cropper.vue
Normal file
677
components/firstui/fui-image-cropper/fui-image-cropper.vue
Normal file
@ -0,0 +1,677 @@
|
||||
<!--本文件由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>
|
||||
Reference in New Issue
Block a user