uview-plus 3.8.18 → 3.8.32

package/components/u-cropper/u-cropper.vue

@@ -1,37 +1,31 @@
 <template>
 	<view class="u-cropper">
 		<!-- <image :src="imgSrc.imgSrc" @click="select" :style="[ imgStyle ]" class="my-avatar"></image> -->
-		<canvas :canvas-id="'avatar-canvas-' + instanceId" :id="'avatar-canvas-' + instanceId" class="my-canvas"
-			:style="{top: styleTop, height: cvsStyleHeight}" disable-scroll="false"></canvas>
-		<canvas :canvas-id="'oper-canvas-' + instanceId" :id="'oper-canvas-' + instanceId" class="oper-canvas"
-			:style="{top: styleTop, height: cvsStyleHeight}"
-			disable-scroll="false" @touchstart="start" @touchmove="move" @touchend="end"></canvas>
-		<canvas :canvas-id="'prv-canvas-' + instanceId" :id="'prv-canvas-' + instanceId" class="prv-canvas"
-			disable-scroll="false" @touchstart="hideImg" :style="{ height: cvsStyleHeight, top: prvTop }"></canvas>
-		<view class="oper-wrapper" :style="{display: styleDisplay}">
+		<canvas :canvas-id="'avatar-canvas-' + instanceId" :id="'avatar-canvas-' + instanceId" class="my-canvas" :style="{ top: styleTop, height: cvsStyleHeight }" disable-scroll="false"></canvas>
+		<canvas :canvas-id="'oper-canvas-' + instanceId" :id="'oper-canvas-' + instanceId" class="oper-canvas" :style="{ top: styleTop, height: cvsStyleHeight }" disable-scroll="false" @touchstart="start" @touchmove="move" @touchend="end"></canvas>
+		<canvas :canvas-id="'prv-canvas-' + instanceId" :id="'prv-canvas-' + instanceId" class="prv-canvas" disable-scroll="false" @touchstart="hideImg" :style="{ height: cvsStyleHeight, top: prvTop }"></canvas>
+		<view class="oper-wrapper" :style="{ display: styleDisplay }">
 			<view class="oper">
 				<view class="btn-wrapper" v-if="showOper">
-					<view @click="select"  hover-class="hover" :style="{width: btnWidth}">
+					<view @click="select" hover-class="hover" :style="{ width: btnWidth }">
 						<text>{{ t("up.common.re-select") }}</text>
 					</view>
-					<view @click="close"  hover-class="hover" :style="{width: btnWidth}">
+					<view @click="close" hover-class="hover" :style="{ width: btnWidth }">
 						<text>{{ t("up.common.close") }}</text>
 					</view>
-					<view @click="rotate"  hover-class="hover" :style="{width: btnWidth, display: btnDsp}">
+					<view @click="rotate" hover-class="hover" :style="{ width: btnWidth, display: btnDsp }">
 						<text>{{ t("up.common.rotate") }}</text>
 					</view>
-					<view @click="preview" hover-class="hover" :style="{width: btnWidth}">
+					<view @click="preview" hover-class="hover" :style="{ width: btnWidth }">
 						<text>{{ t("up.common.preview") }}</text>
 					</view>
-					<view @click="confirm"  hover-class="hover" :style="{width: btnWidth}">
+					<view @click="confirm" hover-class="hover" :style="{ width: btnWidth }">
 						<text>{{ t("up.common.confirm") }}</text>
 					</view>
 				</view>
 				<view class="clr-wrapper" v-else>
-					<slider class="my-slider" @change="colorChange"
-					block-size="25" value="0" min="-100" max="100" activeColor="red"
-					backgroundColor="green" block-color="grey" show-value></slider>
-					<view @click="prvUpload"  hover-class="hover" :style="{width: btnWidth}">
+					<slider class="my-slider" @change="colorChange" block-size="25" value="0" min="-100" max="100" activeColor="red" backgroundColor="green" block-color="grey" show-value></slider>
+					<view @click="prvUpload" hover-class="hover" :style="{ width: btnWidth }">
 						<text>{{ t("up.common.confirm") }}</text>
 					</view>
 				</view>
@@ -39,7 +33,7 @@
 		</view>
 		<view @click="chooseImage(0, {})" v-if="styleDisplay == 'none'">
 			<slot>
-				
+
 			</slot>
 		</view>
 	</view>
@@ -86,7 +80,7 @@
 			}
 		},
 		emits: ['avtinit', 'confirm'],
-		props:{
+		props: {
 			minScale: '',
 			maxScale: '',
 			canScale: true,
@@ -107,6 +101,11 @@
 			exportWidth: '260rpx',
 			// 导出图片高度，用于设置最终导出图片的高度
 			exportHeight: '260rpx',
+			// 画布填充色，默认透明，可传 'black'、'#ffffff' 等
+			fillColor: {
+				type: String,
+				default: 'transparent'
+			},
 		},
 		created() {
 			this.ctxCanvas = uni.createCanvasContext('avatar-canvas-' + this.instanceId, this);
@@ -125,7 +124,7 @@
 			this.noBar = this.noTab === true ? 1 : 0;
 			this.stc = this.stretch;
 			this.lck = this.lock;
-			if(this.isin) {
+			if (this.isin) {
 				this.btnWidth = '24%';
 				this.btnDsp = 'none';
 			} else {
@@ -133,12 +132,12 @@
 				this.btnDsp = 'flex';
 			}
 
-			if(this.noBar) {
+			if (this.noBar) {
 				this.moreHeight = 0;
 				this.windowResize();
 			} else {
 				uni.showTabBar({
-					complete:(res) => {
+					complete: (res) => {
 						this.moreHeight = (res.errMsg === 'showTabBar:ok') ? 50 : 0;
 						this.windowResize();
 					}
@@ -159,7 +158,7 @@
 				this.cvsStyleHeight = this.windowHeight - tabHeight + 'px';
 				// #endif
 				// #ifdef APP-PLUS
-				if(this.platform === 'android') {
+				if (this.platform === 'android') {
 					this.windowHeight = sysInfo.screenHeight + sysInfo.statusBarHeight;
 					this.cvsStyleHeight = this.windowHeight - tabHeight + 'px';
 				} else {
@@ -171,20 +170,20 @@
 				this.windowHeight = sysInfo.windowHeight + this.moreHeight;
 				this.cvsStyleHeight = this.windowHeight - tabHeight - this.safeAreaInsetsBottom - 2 + 'px';
 				// #endif
-				this.pxRatio = this.windowWidth/750;
+				this.pxRatio = this.windowWidth / 750;
 
 				let style = this.avatarStyle;
-				if(style && style !== true && (style=style.trim()) ) {
+				if (style && style !== true && (style = style.trim())) {
 					style = style.split(';');
 					let obj = {};
-					for( let v of style ) {
-						if(!v) continue;
+					for (let v of style) {
+						if (!v) continue;
 						v = v.trim().split(':');
-						if(v[1].indexOf('rpx') >= 0) {
+						if (v[1].indexOf('rpx') >= 0) {
 							let arr = v[1].trim().split(' ');
-							for( let k in arr ) {
-								if(!arr[k]) continue;
-								if(arr[k].indexOf('rpx') >= 0) {
+							for (let k in arr) {
+								if (!arr[k]) continue;
+								if (arr[k].indexOf('rpx') >= 0) {
 									arr[k] = parseFloat(arr[k]) * this.pxRatio + 'px';
 								}
 							}
@@ -195,24 +194,24 @@
 					this.imgStyle = obj;
 				}
 
-				this.expWidth && (this.expWidth = this.expWidth.indexOf('rpx') >= 0 ? parseInt(this.expWidth)*this.pxRatio : parseInt(this.expWidth));
-				this.expHeight && (this.expHeight = this.expHeight.indexOf('rpx') >= 0 ? parseInt(this.expHeight)*this.pxRatio : parseInt(this.expHeight));
+				this.expWidth && (this.expWidth = this.expWidth.indexOf('rpx') >= 0 ? parseInt(this.expWidth) * this.pxRatio : parseInt(this.expWidth));
+				this.expHeight && (this.expHeight = this.expHeight.indexOf('rpx') >= 0 ? parseInt(this.expHeight) * this.pxRatio : parseInt(this.expHeight));
 
-				if(this.styleDisplay === 'flex') {
+				if (this.styleDisplay === 'flex') {
 					this.drawInit(true);
 				}
 				this.hideImg();
 			},
 			select() {
-				if(this.fSelecting) return;
+				if (this.fSelecting) return;
 				this.fSelecting = true;
-				setTimeout(()=>{ this.fSelecting = false; }, 500);
-
+				setTimeout(() => { this.fSelecting = false; }, 500);
+				const self = this
 				uni.chooseImage({
 					count: 1,
 					sizeType: ['original', 'compressed'],
 					sourceType: ['album', 'camera'],
-					success: (r)=>{
+					success: (r) => {
 						uni.showLoading({ mask: true });
 						let path = this.imgPath = r.tempFilePaths[0];
 						uni.getImageInfo({
@@ -221,15 +220,15 @@
 								this.imgWidth = r.width;
 								this.imgHeight = r.height;
 								this.path = path;
-								if( !this.hasSel ) {
+								if (!this.hasSel) {
 									let style = this.selStyle || {};
-									if( this.arWidth && this.arHeight ) {
-										let areaWidth  = this.arWidth.indexOf('rpx')  >= 0 ? parseInt(this.arWidth)  * this.pxRatio: parseInt(this.arWidth),
-											areaHeight = this.arHeight.indexOf('rpx') >= 0 ? parseInt(this.arHeight) * this.pxRatio: parseInt(this.arHeight);
+									if (this.arWidth && this.arHeight) {
+										let areaWidth = this.arWidth.indexOf('rpx') >= 0 ? parseInt(this.arWidth) * this.pxRatio : parseInt(this.arWidth),
+											areaHeight = this.arHeight.indexOf('rpx') >= 0 ? parseInt(this.arHeight) * this.pxRatio : parseInt(this.arHeight);
 										style.width = areaWidth + 'px';
 										style.height = areaHeight + 'px';
-										style.top = (this.windowHeight - areaHeight - tabHeight)/2 + 'px';
-										style.left = (this.windowWidth - areaWidth)/2 + 'px';
+										style.top = (this.windowHeight - areaHeight - tabHeight) / 2 + 'px';
+										style.left = (this.windowWidth - areaWidth) / 2 + 'px';
 									} else {
 										uni.showModal({
 											title: t("up.cropper.emptyWidhtOrHeight"),
@@ -240,7 +239,7 @@
 									this.selStyle = style;
 								}
 
-								if(	this.noBar ) {
+								if (this.noBar) {
 									this.drawInit(true);
 								} else {
 									uni.hideTabBar({
@@ -250,7 +249,7 @@
 									});
 								}
 							},
-							fail: ()=>{
+							fail: () => {
 								uni.showToast({
 									title: "error3",
 									duration: 2000,
@@ -260,13 +259,15 @@
 								uni.hideLoading();
 							}
 						});
+					}, fail(err) {
+						self.$emit('cancel')
 					}
 				})
 			},
 			confirm() {
-				if(this.fUploading)	return;
+				if (this.fUploading) return;
 				this.fUploading = true;
-				setTimeout(()=>{ this.fUploading = false; }, 1000)
+				setTimeout(() => { this.fUploading = false; }, 1000)
 
 				let style = this.selStyle,
 					x = parseInt(style.left),
@@ -298,17 +299,17 @@
 					canvasId: 'avatar-canvas-' + this.instanceId,
 					fileType: 'png',
 					quality: this.qlty,
-					success: (r)=>{
+					success: (r) => {
 						r = r.tempFilePath;
 						// #ifdef H5
-						this.btop(r).then((r)=> {
-							if(this.expWidth && this.expHeight) {
+						this.btop(r).then((r) => {
+							if (this.expWidth && this.expHeight) {
 								let ctxCanvas = this.ctxCanvas;
 								expWidth = this.expWidth,
-								expHeight = this.expHeight;
+									expHeight = this.expHeight;
 
 								ctxCanvas.drawImage(r, 0, 0, expWidth, expHeight);
-								ctxCanvas.draw(false,()=>{
+								ctxCanvas.draw(false, () => {
 									uni.canvasToTempFilePath({
 										x: 0,
 										y: 0,
@@ -319,13 +320,13 @@
 										canvasId: 'avatar-canvas-' + this.instanceId,
 										fileType: 'png',
 										quality: this.qlty,
-										success: (r)=>{
+										success: (r) => {
 											r = r.tempFilePath;
-											this.btop(r).then((r)=> {
-												this.$emit("confirm", {avatar: this.imgSrc, path: r, index: this.indx, data: this.rtn});
+											this.btop(r).then((r) => {
+												this.$emit("confirm", { avatar: this.imgSrc, path: r, index: this.indx, data: this.rtn });
 											});
 										},
-										fail: ()=>{
+										fail: () => {
 											uni.showToast({
 												title: "error0",
 												duration: 2000,
@@ -334,15 +335,15 @@
 									});
 								});
 							} else {
-								this.$emit("confirm", {avatar: this.imgSrc, path: r, index: this.indx, data: this.rtn});
+								this.$emit("confirm", { avatar: this.imgSrc, path: r, index: this.indx, data: this.rtn });
 							}
 						})
 						// #endif
 						// #ifndef H5
-						this.$emit("confirm", {avatar: this.imgSrc, path: r, index: this.indx, data: this.rtn});
+						this.$emit("confirm", { avatar: this.imgSrc, path: r, index: this.indx, data: this.rtn });
 						// #endif
 					},
-					fail: (res)=>{
+					fail: (res) => {
 						uni.showToast({
 							title: "error1",
 							duration: 2000,
@@ -356,9 +357,9 @@
 			},
 			// 用户点击"预览"模式下的"确认"按钮时被调用，用于将预览的裁剪结果上传
 			prvUpload() {
-				if(this.fPrvUploading)	return;
+				if (this.fPrvUploading) return;
 				this.fPrvUploading = true;
-				setTimeout(()=>{ this.fPrvUploading = false; }, 1000)
+				setTimeout(() => { this.fPrvUploading = false; }, 1000)
 
 				let style = this.selStyle,
 					destWidth = parseInt(style.width),
@@ -393,17 +394,17 @@
 					canvasId: 'prv-canvas-' + this.instanceId,
 					fileType: 'png',
 					quality: this.qlty,
-					success: (r)=>{
+					success: (r) => {
 						r = r.tempFilePath;
 						// #ifdef H5
-						this.btop(r).then((r)=> {
-							if(this.expWidth && this.expHeight) {
+						this.btop(r).then((r) => {
+							if (this.expWidth && this.expHeight) {
 								let ctxCanvas = this.ctxCanvas;
 								expWidth = this.expWidth,
-								expHeight = this.expHeight;
+									expHeight = this.expHeight;
 
 								ctxCanvas.drawImage(r, 0, 0, expWidth, expHeight);
-								ctxCanvas.draw(false, ()=>{
+								ctxCanvas.draw(false, () => {
 									uni.canvasToTempFilePath({
 										x: 0,
 										y: 0,
@@ -414,13 +415,13 @@
 										canvasId: 'avatar-canvas-' + this.instanceId,
 										fileType: 'png',
 										quality: this.qlty,
-										success: (r)=>{
+										success: (r) => {
 											r = r.tempFilePath;
-											this.btop(r).then((r)=> {
-												this.$emit("confirm", {avatar: this.imgSrc, path: r, index: this.indx, data: this.rtn});
+											this.btop(r).then((r) => {
+												this.$emit("confirm", { avatar: this.imgSrc, path: r, index: this.indx, data: this.rtn });
 											});
 										},
-										fail: ()=>{
+										fail: () => {
 											uni.showToast({
 												title: "error0",
 												duration: 2000,
@@ -429,15 +430,15 @@
 									});
 								});
 							} else {
-								this.$emit("confirm", {avatar: this.imgSrc, path: r, index: this.indx, data: this.rtn});
+								this.$emit("confirm", { avatar: this.imgSrc, path: r, index: this.indx, data: this.rtn });
 							}
 						})
 						// #endif
 						// #ifndef H5
-						this.$emit("confirm", {avatar: this.imgSrc, path: r, index: this.indx, data: this.rtn});
+						this.$emit("confirm", { avatar: this.imgSrc, path: r, index: this.indx, data: this.rtn });
 						// #endif
 					},
-					fail: ()=>{
+					fail: () => {
 						uni.showToast({
 							title: "error_prv",
 							duration: 2000,
@@ -449,12 +450,12 @@
 					}
 				}, this);
 			},
-			drawInit(ini=false) {
+			drawInit(ini = false) {
 				let allWidth = this.windowWidth,
 					allHeight = this.windowHeight,
 					imgWidth = this.imgWidth,
 					imgHeight = this.imgHeight,
-					imgRadio = imgWidth/imgHeight,
+					imgRadio = imgWidth / imgHeight,
 					useWidth = allWidth - 40,
 					useHeight = allHeight - tabHeight - 80,
 					pixelRatio = this.pixelRatio,
@@ -465,13 +466,13 @@
 				this.fixHeight = 0;
 				this.lckWidth = 0;
 				this.lckHeight = 0;
-				switch(this.stc) {
+				switch (this.stc) {
 					case 'x': this.fixWidth = 1; break;
 					case 'y': this.fixHeight = 1; break;
-					case 'long': if(imgRadio > 1) this.fixWidth = 1; else this.fixHeight = 1; break;
-					case 'short': if(imgRadio > 1) this.fixHeight = 1; else this.fixWidth = 1; break;
-					case 'longSel': if(selWidth > selHeight) this.fixWidth = 1; else this.fixHeight = 1; break;
-					case 'shortSel': if(selWidth > selHeight) this.fixHeight = 1; else this.fixWidth = 1; break;
+					case 'long': if (imgRadio > 1) this.fixWidth = 1; else this.fixHeight = 1; break;
+					case 'short': if (imgRadio > 1) this.fixHeight = 1; else this.fixWidth = 1; break;
+					case 'longSel': if (selWidth > selHeight) this.fixWidth = 1; else this.fixHeight = 1; break;
+					case 'shortSel': if (selWidth > selHeight) this.fixHeight = 1; else this.fixWidth = 1; break;
 				}
 				// lck 用于控制裁剪框的宽度和高度锁定行为
 				// 'x': 锁定宽度，不允许水平方向调整
@@ -480,56 +481,56 @@
 				// 'short': 根据图片短边锁定，如果图片横向较长则锁定高度，否则锁定宽度
 				// 'longSel': 根据选择框的长边锁定，如果选择框宽度大于高度则锁定宽度，否则锁定高度
 				// 'shortSel': 根据选择框的短边锁定，如果选择框宽度大于高度则锁定高度，否则锁定宽度
-				switch(this.lck) {
+				switch (this.lck) {
 					case 'x': this.lckWidth = 1; break;
 					case 'y': this.lckHeight = 1; break;
-					case 'long': if(imgRadio > 1) this.lckWidth = 1; else this.lckHeight = 1; break;
-					case 'short': if(imgRadio > 1) this.lckHeight = 1; else this.lckWidth = 1; break;
-					case 'longSel': if(selWidth > selHeight) this.lckWidth = 1; else this.lckHeight = 1; break;
-					case 'shortSel': if(selWidth > selHeight) this.lckHeight = 1; else this.lckWidth = 1; break;
+					case 'long': if (imgRadio > 1) this.lckWidth = 1; else this.lckHeight = 1; break;
+					case 'short': if (imgRadio > 1) this.lckHeight = 1; else this.lckWidth = 1; break;
+					case 'longSel': if (selWidth > selHeight) this.lckWidth = 1; else this.lckHeight = 1; break;
+					case 'shortSel': if (selWidth > selHeight) this.lckHeight = 1; else this.lckWidth = 1; break;
 				}
-				if( this.fixWidth ) {
+				if (this.fixWidth) {
 					useWidth = selWidth;
-					useHeight = useWidth/imgRadio;
-				} else if( this.fixHeight ) {
+					useHeight = useWidth / imgRadio;
+				} else if (this.fixHeight) {
 					useHeight = selHeight;
-					useWidth = useHeight*imgRadio;
-				} else if( imgRadio < 1 ) {
-					if( imgHeight < useHeight ) {
+					useWidth = useHeight * imgRadio;
+				} else if (imgRadio < 1) {
+					if (imgHeight < useHeight) {
 						useWidth = imgWidth;
 						useHeight = imgHeight;
 					} else {
 						useHeight = useHeight;
-						useWidth = useHeight*imgRadio;
+						useWidth = useHeight * imgRadio;
 					}
 				} else {
-					if( imgWidth < useWidth ) {
+					if (imgWidth < useWidth) {
 						useWidth = imgWidth;
 						useHeight = imgHeight;
 					} else {
 						useWidth = useWidth;
-						useHeight = useWidth/imgRadio;
+						useHeight = useWidth / imgRadio;
 					}
 				}
-				if( this.isin ) {
+				if (this.isin) {
 					this.scaleWidth = 0;
 					this.scaleHeight = 0;
-					if(useWidth < selWidth) {
+					if (useWidth < selWidth) {
 						useWidth = selWidth;
-						useHeight = useWidth/imgRadio;
+						useHeight = useWidth / imgRadio;
 						this.lckHeight = 0;
 					}
-					if(useHeight < selHeight) {
+					if (useHeight < selHeight) {
 						useHeight = selHeight;
-						useWidth = useHeight*imgRadio;
+						useWidth = useHeight * imgRadio;
 						this.lckWidth = 0;
 					}
 				}
 
 				this.scaleSize = 1;
 				this.rotateDeg = 0;
-				this.posWidth = (allWidth-useWidth)/2;
-				this.posHeight = (allHeight-useHeight-tabHeight)/2;
+				this.posWidth = (allWidth - useWidth) / 2;
+				this.posHeight = (allHeight - useHeight - tabHeight) / 2;
 				this.useWidth = useWidth;
 				this.useHeight = useHeight;
 
@@ -547,39 +548,39 @@
 				ctxCanvasOper.setStrokeStyle('grey');
 				ctxCanvasOper.setGlobalAlpha(0.4);
 				ctxCanvasOper.setFillStyle('black');
-				ctxCanvasOper.strokeRect( left, top, width, height );
+				ctxCanvasOper.strokeRect(left, top, width, height);
 				ctxCanvasOper.fillRect(0, 0, this.windowWidth, top);
 				ctxCanvasOper.fillRect(0, top, left, height);
-				ctxCanvasOper.fillRect(0, top+height, this.windowWidth, this.windowHeight-height-top-tabHeight);
-				ctxCanvasOper.fillRect(left+width, top,this.windowWidth-width-left, height);
+				ctxCanvasOper.fillRect(0, top + height, this.windowWidth, this.windowHeight - height - top - tabHeight);
+				ctxCanvasOper.fillRect(left + width, top, this.windowWidth - width - left, height);
 				ctxCanvasOper.setStrokeStyle('red');
-				ctxCanvasOper.moveTo(left+20, top);ctxCanvasOper.lineTo(left, top);ctxCanvasOper.lineTo(left, top+20);
-				ctxCanvasOper.moveTo(left+width-20, top);ctxCanvasOper.lineTo(left+width, top);ctxCanvasOper.lineTo(left+width, top+20);
-				ctxCanvasOper.moveTo(left+20, top+height);ctxCanvasOper.lineTo(left, top+height);ctxCanvasOper.lineTo(left, top+height-20);
-				ctxCanvasOper.moveTo(left+width-20, top+height);ctxCanvasOper.lineTo(left+width, top+height);ctxCanvasOper.lineTo(left+width, top+height-20);
-				
+				ctxCanvasOper.moveTo(left + 20, top); ctxCanvasOper.lineTo(left, top); ctxCanvasOper.lineTo(left, top + 20);
+				ctxCanvasOper.moveTo(left + width - 20, top); ctxCanvasOper.lineTo(left + width, top); ctxCanvasOper.lineTo(left + width, top + 20);
+				ctxCanvasOper.moveTo(left + 20, top + height); ctxCanvasOper.lineTo(left, top + height); ctxCanvasOper.lineTo(left, top + height - 20);
+				ctxCanvasOper.moveTo(left + width - 20, top + height); ctxCanvasOper.lineTo(left + width, top + height); ctxCanvasOper.lineTo(left + width, top + height - 20);
+
 				// 绘制控制点（四个角）
 				const controlPointSize = 10;
 				ctxCanvasOper.setFillStyle('white');
 				ctxCanvasOper.setStrokeStyle('grey');
 				ctxCanvasOper.setLineWidth(1);
 				// 左上角
-				ctxCanvasOper.fillRect(left - controlPointSize/2, top - controlPointSize/2, controlPointSize, controlPointSize);
-				ctxCanvasOper.strokeRect(left - controlPointSize/2, top - controlPointSize/2, controlPointSize, controlPointSize);
+				ctxCanvasOper.fillRect(left - controlPointSize / 2, top - controlPointSize / 2, controlPointSize, controlPointSize);
+				ctxCanvasOper.strokeRect(left - controlPointSize / 2, top - controlPointSize / 2, controlPointSize, controlPointSize);
 				// 右上角
-				ctxCanvasOper.fillRect(left + width - controlPointSize/2, top - controlPointSize/2, controlPointSize, controlPointSize);
-				ctxCanvasOper.strokeRect(left + width - controlPointSize/2, top - controlPointSize/2, controlPointSize, controlPointSize);
+				ctxCanvasOper.fillRect(left + width - controlPointSize / 2, top - controlPointSize / 2, controlPointSize, controlPointSize);
+				ctxCanvasOper.strokeRect(left + width - controlPointSize / 2, top - controlPointSize / 2, controlPointSize, controlPointSize);
 				// 左下角
-				ctxCanvasOper.fillRect(left - controlPointSize/2, top + height - controlPointSize/2, controlPointSize, controlPointSize);
-				ctxCanvasOper.strokeRect(left - controlPointSize/2, top + height - controlPointSize/2, controlPointSize, controlPointSize);
+				ctxCanvasOper.fillRect(left - controlPointSize / 2, top + height - controlPointSize / 2, controlPointSize, controlPointSize);
+				ctxCanvasOper.strokeRect(left - controlPointSize / 2, top + height - controlPointSize / 2, controlPointSize, controlPointSize);
 				// 右下角
-				ctxCanvasOper.fillRect(left + width - controlPointSize/2, top + height - controlPointSize/2, controlPointSize, controlPointSize);
-				ctxCanvasOper.strokeRect(left + width - controlPointSize/2, top + height - controlPointSize/2, controlPointSize, controlPointSize);
-				
+				ctxCanvasOper.fillRect(left + width - controlPointSize / 2, top + height - controlPointSize / 2, controlPointSize, controlPointSize);
+				ctxCanvasOper.strokeRect(left + width - controlPointSize / 2, top + height - controlPointSize / 2, controlPointSize, controlPointSize);
+
 				ctxCanvasOper.stroke();
 
-				ctxCanvasOper.draw(false, ()=>{
-					if( ini ) {
+				ctxCanvasOper.draw(false, () => {
+					if (ini) {
 						this.styleDisplay = 'flex';
 						// #ifdef H5
 						this.styleTop = this.drawTop + 'px';
@@ -587,7 +588,9 @@
 						// #ifndef H5
 						this.styleTop = '0';
 						// #endif
-						ctxCanvas.setFillStyle('black');
+						if (this.fillColor && this.fillColor !== 'transparent') {
+							ctxCanvas.setFillStyle(this.fillColor);
+						}
 						this.drawImage();
 					}
 				});
@@ -596,14 +599,16 @@
 			},
 			drawImage() {
 				let tm_now = Date.now();
-				if(tm_now - this.drawTm < 20) return;
+				if (tm_now - this.drawTm < 20) return;
 				this.drawTm = tm_now;
 				let ctxCanvas = this.ctxCanvas;
-				ctxCanvas.fillRect(0, 0, this.windowWidth, this.windowHeight-tabHeight);
-				ctxCanvas.translate(this.posWidth+this.useWidth/2, this.posHeight+this.useHeight/2);
+				if (this.fillColor && this.fillColor !== 'transparent') {
+					ctxCanvas.fillRect(0, 0, this.windowWidth, this.windowHeight - tabHeight);
+				}
+				ctxCanvas.translate(this.posWidth + this.useWidth / 2, this.posHeight + this.useHeight / 2);
 				ctxCanvas.scale(this.scaleSize, this.scaleSize);
-				ctxCanvas.rotate(this.rotateDeg * Math.PI/180);
-				ctxCanvas.drawImage(this.imgPath, -this.useWidth/2, -this.useHeight/2, this.useWidth, this.useHeight);
+				ctxCanvas.rotate(this.rotateDeg * Math.PI / 180);
+				ctxCanvas.drawImage(this.imgPath, -this.useWidth / 2, -this.useHeight / 2, this.useWidth, this.useHeight);
 				ctxCanvas.draw(false);
 			},
 			hideImg() {
@@ -614,16 +619,19 @@
 				this.target = null;
 			},
 			close() {
+				console.log('up-cropper close');
+
 				this.styleDisplay = 'none';
 				this.styleTop = '-10000px';
 				this.hasSel = false;
 				this.hideImg();
 				this.noBar || uni.showTabBar();
+				this.$emit('cancel');
 			},
 			preview() {
-				if(this.fPreviewing) return;
+				if (this.fPreviewing) return;
 				this.fPreviewing = true;
-				setTimeout(()=>{ this.fPreviewing = false; }, 1000);
+				setTimeout(() => { this.fPreviewing = false; }, 1000);
 				let style = this.selStyle,
 					x = parseInt(style.left),
 					y = parseInt(style.top),
@@ -640,7 +648,7 @@
 					canvasId: 'avatar-canvas-' + this.instanceId,
 					fileType: 'png',
 					quality: this.qlty,
-					success: (r)=>{
+					success: (r) => {
 						// console.log(r)
 						this.prvImgTmp = r = r.tempFilePath;
 
@@ -651,40 +659,42 @@
 							prvHeight = parseInt(this.selStyle.height),
 							useWidth = prvX - 40,
 							useHeight = prvY - 80,
-							radio = useWidth/prvWidth,
-							rHeight = prvHeight*radio;
-							if(rHeight < useHeight) {
-								prvWidth = useWidth;
-								prvHeight = rHeight;
-							} else {
-								radio = useHeight/prvHeight;
-								prvWidth *= radio;
-								prvHeight = useHeight;
-							}
-						ctxCanvasPrv.setFillStyle('black');
-						ctxCanvasPrv.fillRect(0, 0, prvX, prvY);
-						ctxCanvasPrv.fillRect(x, y, width, height);
-						this.prvX = prvX = (prvX-prvWidth)/2;
-						this.prvY = prvY = (prvY-prvHeight)/2;
+							radio = useWidth / prvWidth,
+							rHeight = prvHeight * radio;
+						if (rHeight < useHeight) {
+							prvWidth = useWidth;
+							prvHeight = rHeight;
+						} else {
+							radio = useHeight / prvHeight;
+							prvWidth *= radio;
+							prvHeight = useHeight;
+						}
+						if (this.fillColor && this.fillColor !== 'transparent') {
+							ctxCanvasPrv.setFillStyle(this.fillColor);
+							ctxCanvasPrv.fillRect(0, 0, prvX, prvY);
+							ctxCanvasPrv.fillRect(x, y, width, height);
+						}
+						this.prvX = prvX = (prvX - prvWidth) / 2;
+						this.prvY = prvY = (prvY - prvHeight) / 2;
 						this.prvWidth = prvWidth;
 						this.prvHeight = prvHeight;
 						ctxCanvasPrv.drawImage(r, prvX, prvY, prvWidth, prvHeight);
 						ctxCanvasPrv.draw(false, () => {
 							// #ifdef H5
-							this.btop(this.prvImgTmp).then((r)=> {
+							this.btop(this.prvImgTmp).then((r) => {
 								this.showOper = false;
 								this.prvTop = this.drawTop + 'px';
 							})
 							// #endif
 							// #ifndef H5
-							if( this.platform != 'android' ) {
+							if (this.platform != 'android') {
 								this.showOper = false;
 							}
 							this.prvTop = '0';
 							// #endif
 						});
 					},
-					fail: ()=>{
+					fail: () => {
 						uni.showToast({
 							title: "error2",
 							duration: 2000,
@@ -695,8 +705,8 @@
 					}
 				}, this);
 			},
-			chooseImage(index=undefined, params=undefined, data=undefined) {
-				if(params) {
+			chooseImage(index = undefined, params = undefined, data = undefined) {
+				if (params) {
 					console.log(params)
 					let areaWidth = params.areaWidth || this.areaWidth,
 						areaHeight = params.areaHeight || this.areaHeight,
@@ -711,10 +721,10 @@
 						stretch = params.stretch,
 						inner = params.inner,
 						lock = params.lock;
-						console.log('areaWidth', this.areaWidth)
+					console.log('areaWidth', this.areaWidth)
 
-					expWidth && (this.expWidth = expWidth.indexOf('rpx') >= 0 ? parseInt(expWidth)*this.pxRatio : parseInt(expWidth));
-					expHeight && (this.expHeight = expHeight.indexOf('rpx') >= 0 ? parseInt(expHeight)*this.pxRatio : parseInt(expHeight));
+					expWidth && (this.expWidth = expWidth.indexOf('rpx') >= 0 ? parseInt(expWidth) * this.pxRatio : parseInt(expWidth));
+					expHeight && (this.expHeight = expHeight.indexOf('rpx') >= 0 ? parseInt(expHeight) * this.pxRatio : parseInt(expHeight));
 					this.letRotate = canRotate === false ? 0 : 1;
 					this.letScale = canScale === false ? 0 : 1;
 					// 设置是否允许调整裁剪框大小
@@ -725,7 +735,7 @@
 					this.stc = stretch;
 					this.isin = inner === true ? 1 : 0;
 					this.lck = lock;
-					if(this.isin) {
+					if (this.isin) {
 						this.btnWidth = '24%';
 						this.btnDsp = 'none';
 					} else {
@@ -733,13 +743,13 @@
 						this.btnDsp = 'flex';
 					}
 
-					if( areaWidth && areaHeight) {
-						areaWidth  = areaWidth.indexOf('rpx')  >= 0 ? parseInt(areaWidth)  * this.pxRatio: parseInt(areaWidth);
-						areaHeight = areaHeight.indexOf('rpx') >= 0 ? parseInt(areaHeight) * this.pxRatio: parseInt(areaHeight);
+					if (areaWidth && areaHeight) {
+						areaWidth = areaWidth.indexOf('rpx') >= 0 ? parseInt(areaWidth) * this.pxRatio : parseInt(areaWidth);
+						areaHeight = areaHeight.indexOf('rpx') >= 0 ? parseInt(areaHeight) * this.pxRatio : parseInt(areaHeight);
 						this.selStyle.width = areaWidth + 'px';
 						this.selStyle.height = areaHeight + 'px';
-						this.selStyle.top = (this.windowHeight - areaHeight - tabHeight)/2 + 'px';
-						this.selStyle.left = (this.windowWidth - areaWidth)/2 + 'px';
+						this.selStyle.top = (this.windowHeight - areaHeight - tabHeight) / 2 + 'px';
+						this.selStyle.left = (this.windowWidth - areaWidth) / 2 + 'px';
 						// console.log(this.selStyle);
 						this.hasSel = true;
 					}
@@ -750,27 +760,27 @@
 			},
 			rotate() {
 				// #ifdef APP-PLUS
-				if(this.platform === 'android') {
-					if(this.fRotateing) return;
+				if (this.platform === 'android') {
+					if (this.fRotateing) return;
 					this.fRotateing = true;
-					setTimeout(()=>{ this.fRotateing = false; }, 500);
+					setTimeout(() => { this.fRotateing = false; }, 500);
 				}
 				// #endif
 
 				// if(this.letRotate) {
-					this.rotateDeg += 90 - this.rotateDeg%90;
-					this.drawImage();
+				this.rotateDeg += 90 - this.rotateDeg % 90;
+				this.drawImage();
 				// }
 			},
 			start(e) {
 				let touches = e.touches,
-				touch0 = touches[0],
-				touch1 = touches[1];
+					touch0 = touches[0],
+					touch1 = touches[1];
 
 				this.touch0 = touch0;
 				this.touch1 = touch1;
 
-				if( touch1 ) {
+				if (touch1) {
 					let x = touch1.x - touch0.x,
 						y = touch1.y - touch0.y;
 					this.fgDistance = Math.sqrt(x * x + y * y);
@@ -786,7 +796,7 @@
 						const top = parseInt(style.top);
 						const width = parseInt(style.width);
 						const height = parseInt(style.height);
-						
+
 						// 检查四个控制点
 						if (Math.abs(x - left) < controlPointSize && Math.abs(y - top) < controlPointSize) {
 							this.resizeHandle = 'top-left';
@@ -809,57 +819,57 @@
 					touch0 = touches[0],
 					touch1 = touches[1];
 
-				if( touch1 ) {
+				if (touch1) {
 					let x = touch1.x - touch0.x,
 						y = touch1.y - touch0.y,
 						fgDistance = Math.sqrt(x * x + y * y),
 						scaleSize = 0.005 * (fgDistance - this.fgDistance),
 						beScaleSize = this.scaleSize + scaleSize;
 
-					do	{
-						if( !this.letScale ) break;
-						if( beScaleSize < this.mnScale) break;
-						if( beScaleSize > this.mxScale) break;
-						if(this.isin) {
-							let	imgWidth = this.useWidth*beScaleSize,
-								imgHeight = this.useHeight*beScaleSize,
-								rx0 = this.posWidth+this.useWidth/2,
-								ry0 = this.posHeight+this.useHeight/2,
-								l = rx0-imgWidth/2, t = ry0-imgHeight/2,
-								r = l+imgWidth,	    b = t+imgHeight,
+					do {
+						if (!this.letScale) break;
+						if (beScaleSize < this.mnScale) break;
+						if (beScaleSize > this.mxScale) break;
+						if (this.isin) {
+							let imgWidth = this.useWidth * beScaleSize,
+								imgHeight = this.useHeight * beScaleSize,
+								rx0 = this.posWidth + this.useWidth / 2,
+								ry0 = this.posHeight + this.useHeight / 2,
+								l = rx0 - imgWidth / 2, t = ry0 - imgHeight / 2,
+								r = l + imgWidth, b = t + imgHeight,
 								left = parseInt(this.selStyle.left),
 								top = parseInt(this.selStyle.top),
 								width = parseInt(this.selStyle.width),
 								height = parseInt(this.selStyle.height);
-								if(left < l || left+width > r || top < t || top+height > b) break;
-								this.scaleWidth = (this.useWidth-imgWidth)/2;
-								this.scaleHeight = (this.useHeight-imgHeight)/2;
+							if (left < l || left + width > r || top < t || top + height > b) break;
+							this.scaleWidth = (this.useWidth - imgWidth) / 2;
+							this.scaleHeight = (this.useHeight - imgHeight) / 2;
 						}
 
 						this.scaleSize = beScaleSize;
-					} while(0);
+					} while (0);
 					this.fgDistance = fgDistance;
 
-					if(touch1.x !== touch0.x && this.letRotate) {
-						x = (this.touch1.y - this.touch0.y)/(this.touch1.x - this.touch0.x);
-						y = (touch1.y - touch0.y)/(touch1.x - touch0.x);
-						this.rotateDeg += Math.atan((y-x)/(1+x*y)) * 180/Math.PI;
+					if (touch1.x !== touch0.x && this.letRotate) {
+						x = (this.touch1.y - this.touch0.y) / (this.touch1.x - this.touch0.x);
+						y = (touch1.y - touch0.y) / (touch1.x - touch0.x);
+						this.rotateDeg += Math.atan((y - x) / (1 + x * y)) * 180 / Math.PI;
 						this.touch0 = touch0;
 						this.touch1 = touch1;
 					}
 
 					this.drawImage();
-				} else if( this.touch0 ) {
+				} else if (this.touch0) {
 					// 只有在允许调整大小时才处理裁剪框大小调整
 					if (this.resizeHandle && this.letChangeSize) {
-						const style = {...this.selStyle};
+						const style = { ...this.selStyle };
 						const left = parseInt(style.left);
 						const top = parseInt(style.top);
 						const width = parseInt(style.width);
 						const height = parseInt(style.height);
 						const minWidth = 50;
 						const minHeight = 50;
-						
+
 						switch (this.resizeHandle) {
 							case 'top-left':
 								style.left = touch0.x + 'px';
@@ -882,11 +892,11 @@
 								style.height = (touch0.y - top) + 'px';
 								break;
 						}
-						
+
 						// 确保最小尺寸
 						if (parseInt(style.width) >= minWidth && parseInt(style.height) >= minHeight) {
 							// 确保裁剪框不超出屏幕边界
-							if (parseInt(style.left) >= 0 && 
+							if (parseInt(style.left) >= 0 &&
 								parseInt(style.top) >= 0 &&
 								(parseInt(style.left) + parseInt(style.width)) <= this.windowWidth &&
 								(parseInt(style.top) + parseInt(style.height)) <= (this.windowHeight - tabHeight)) {
@@ -901,38 +911,38 @@
 							y = touch0.y - this.touch0.y,
 							beX = this.posWidth + x,
 							beY = this.posHeight + y;
-						if(this.isin) {
-							let	imgWidth = this.useWidth*this.scaleSize,
-								imgHeight = this.useHeight*this.scaleSize,
-								rx0 = beX+this.useWidth/2,
-								ry0 = beY+this.useHeight/2,
-								l = rx0-imgWidth/2, t = ry0-imgHeight/2,
-								r = l+imgWidth,	    b = t+imgHeight,
+						if (this.isin) {
+							let imgWidth = this.useWidth * this.scaleSize,
+								imgHeight = this.useHeight * this.scaleSize,
+								rx0 = beX + this.useWidth / 2,
+								ry0 = beY + this.useHeight / 2,
+								l = rx0 - imgWidth / 2, t = ry0 - imgHeight / 2,
+								r = l + imgWidth, b = t + imgHeight,
 								left = parseInt(this.selStyle.left),
 								top = parseInt(this.selStyle.top),
 								width = parseInt(this.selStyle.width),
 								height = parseInt(this.selStyle.height);
-								if(!this.lckWidth && Math.abs(x) < 100) {
-									if(left >= l && left+width <= r) {
-										this.posWidth  = beX;
-									} else if(left < l){
-										this.posWidth = left - this.scaleWidth;
-									} else if(left+width > r) {
-										this.posWidth = left-(imgWidth-width) - this.scaleWidth;
-									}
+							if (!this.lckWidth && Math.abs(x) < 100) {
+								if (left >= l && left + width <= r) {
+									this.posWidth = beX;
+								} else if (left < l) {
+									this.posWidth = left - this.scaleWidth;
+								} else if (left + width > r) {
+									this.posWidth = left - (imgWidth - width) - this.scaleWidth;
 								}
-								if(!this.lckHeight && Math.abs(y) < 100) {
-									if(top >= t && top+height <= b) {
-										this.posHeight  = beY;
-									} else if(top < t) {
-										this.posHeight = top - this.scaleHeight;
-									} else if(top+height > b) {
-										this.posHeight = top-(imgHeight-height) - this.scaleHeight;
-									}
+							}
+							if (!this.lckHeight && Math.abs(y) < 100) {
+								if (top >= t && top + height <= b) {
+									this.posHeight = beY;
+								} else if (top < t) {
+									this.posHeight = top - this.scaleHeight;
+								} else if (top + height > b) {
+									this.posHeight = top - (imgHeight - height) - this.scaleHeight;
 								}
+							}
 						} else {
-							if( Math.abs(x) < 100 && !this.lckWidth) this.posWidth  = beX;
-							if( Math.abs(y) < 100 && !this.lckHeight) this.posHeight = beY;
+							if (Math.abs(x) < 100 && !this.lckWidth) this.posWidth = beX;
+							if (Math.abs(y) < 100 && !this.lckHeight) this.posHeight = beY;
 						}
 
 						this.touch0 = touch0;
@@ -944,7 +954,7 @@
 				let touches = e.touches,
 					touch0 = touches && touches[0],
 					touch1 = touches && touches[1];
-				if(touch0) {
+				if (touch0) {
 					this.touch0 = touch0;
 				} else {
 					this.touch0 = null;
@@ -953,7 +963,7 @@
 				}
 			},
 			getImgData() {
-				return new Promise((resolve, reject)=>{
+				return new Promise((resolve, reject) => {
 					let prvX = this.prvX,
 						prvY = this.prvY,
 						prvWidth = this.prvWidth,
@@ -981,13 +991,13 @@
 			},
 			async colorChange(e) {
 				let tm_now = Date.now();
-				if(tm_now - this.prvTm < 100) return;
+				if (tm_now - this.prvTm < 100) return;
 				this.prvTm = tm_now;
 
 				uni.showLoading({ mask: true });
 
-				if( !this.prvImgData ) {
-					if( !(this.prvImgData = await this.getImgData().catch((res)=>{
+				if (!this.prvImgData) {
+					if (!(this.prvImgData = await this.getImgData().catch((res) => {
 						uni.showToast({
 							title: "error_read",
 							duration: 2000,
@@ -999,88 +1009,88 @@
 				let data = this.prvImgData,
 					target = this.target,
 					i = e.detail.value,
-					r,g,b,a,h,s,l,d,p,q,t,min,max,hK,tR,tG,tB;
+					r, g, b, a, h, s, l, d, p, q, t, min, max, hK, tR, tG, tB;
 
-				if( i === 0 ) {
+				if (i === 0) {
 					target = data;
 				} else {
-					i = (i+100)/200;
-					if( i < 0.005 ) i = 0;
-					if( i > 0.995 ) i = 1;
-					for( let n = data.length-1; n >= 0; n-=4 ) {
-						r = data[n-3] / 255;
-						g = data[n-2] / 255;
-						b = data[n-1] / 255;
-						max = Math.max(r,g,b);
-						min = Math.min(r,g,b);
-						d = max-min;
-						if ( max === min ){
-							h = 0 ;
-						}else if( max === r && g>=b ){
-							h = 60*( (g-b)/d ) ;
-						}else if( max === r && g<b ){
-							h = 60*( (g-b)/d ) + 360 ;
-						}else if( max === g ){
-							h = 60*( (b-r)/d ) + 120 ;
-						}else if( max === b ){
-							h = 60*( (r-g)/d ) + 240 ;
+					i = (i + 100) / 200;
+					if (i < 0.005) i = 0;
+					if (i > 0.995) i = 1;
+					for (let n = data.length - 1; n >= 0; n -= 4) {
+						r = data[n - 3] / 255;
+						g = data[n - 2] / 255;
+						b = data[n - 1] / 255;
+						max = Math.max(r, g, b);
+						min = Math.min(r, g, b);
+						d = max - min;
+						if (max === min) {
+							h = 0;
+						} else if (max === r && g >= b) {
+							h = 60 * ((g - b) / d);
+						} else if (max === r && g < b) {
+							h = 60 * ((g - b) / d) + 360;
+						} else if (max === g) {
+							h = 60 * ((b - r) / d) + 120;
+						} else if (max === b) {
+							h = 60 * ((r - g) / d) + 240;
 						}
-						l = (max+min)/2 ;
-						if ( l===0 || max===min ){
-							s = 0 ;
-						}else if( 0<l && l<=0.5 ){
-							s = d/(2*l) ;
-						}else if( l>0.5 ){
-							s = d/(2-2*l) ;
+						l = (max + min) / 2;
+						if (l === 0 || max === min) {
+							s = 0;
+						} else if (0 < l && l <= 0.5) {
+							s = d / (2 * l);
+						} else if (l > 0.5) {
+							s = d / (2 - 2 * l);
 						}
 						data[n] && (a = data[n]);
 
-						if ( i < 0.5 ){
-							s = s*i/0.5 ;
-						}else if ( i > 0.5 ){
-							s = 2*s + 2*i - (s*i/0.5) - 1 ;
+						if (i < 0.5) {
+							s = s * i / 0.5;
+						} else if (i > 0.5) {
+							s = 2 * s + 2 * i - (s * i / 0.5) - 1;
 						}
 
-						if ( s === 0 ){
-							r = g = b = Math.round( l*255 ) ;
-						}else{
-							if ( l<0.5 ){
-								q = l * ( 1 + s ) ;
-							}else if( l>=0.5 ){
-								q = l + s - ( l * s ) ;
+						if (s === 0) {
+							r = g = b = Math.round(l * 255);
+						} else {
+							if (l < 0.5) {
+								q = l * (1 + s);
+							} else if (l >= 0.5) {
+								q = l + s - (l * s);
 							}
-							p = 2*l-q ;
-							hK = h/360 ;
-							tR = hK + 1/3 ;
-							tG = hK ;
-							tB = hK - 1/3 ;
-							let correctRGB = (t)=>{
-								if( t<0 ){
-									return t + 1.0 ;
+							p = 2 * l - q;
+							hK = h / 360;
+							tR = hK + 1 / 3;
+							tG = hK;
+							tB = hK - 1 / 3;
+							let correctRGB = (t) => {
+								if (t < 0) {
+									return t + 1.0;
 								}
-								if( t>1 ){
-									return t - 1.0 ;
+								if (t > 1) {
+									return t - 1.0;
 								}
-								return t ;
-							} ;
-							let createRGB = (t)=>{
-								if ( t<(1/6) ){
-									return p+((q-p)*6*t) ;
-								}else if( t>=(1/6) && t<(1/2) ){
-									return q ;
-								}else if( t>=(1/2) && t<(2/3) ){
-									return p+((q-p)*6*((2/3)-t)) ;
+								return t;
+							};
+							let createRGB = (t) => {
+								if (t < (1 / 6)) {
+									return p + ((q - p) * 6 * t);
+								} else if (t >= (1 / 6) && t < (1 / 2)) {
+									return q;
+								} else if (t >= (1 / 2) && t < (2 / 3)) {
+									return p + ((q - p) * 6 * ((2 / 3) - t));
 								}
-								return p ;
-							} ;
-							r = tR = Math.round( createRGB( correctRGB( tR ) )*255 ) ;
-							g = tG = Math.round( createRGB( correctRGB( tG ) )*255 ) ;
-							b = tB = Math.round( createRGB( correctRGB( tB ) )*255 ) ;
+								return p;
+							};
+							r = tR = Math.round(createRGB(correctRGB(tR)) * 255);
+							g = tG = Math.round(createRGB(correctRGB(tG)) * 255);
+							b = tB = Math.round(createRGB(correctRGB(tB)) * 255);
 						}
-						a && ( target[n] = a ) ;
-						target[n-3] = r;
-						target[n-2] = g;
-						target[n-1] = b;
+						a && (target[n] = a);
+						target[n - 3] = r;
+						target[n - 2] = g;
+						target[n - 1] = b;
 					}
 				}
 				let prvX = this.prvX,
@@ -1088,8 +1098,10 @@
 					prvWidth = this.prvWidth,
 					prvHeight = this.prvHeight;
 
-				this.ctxCanvasPrv.setFillStyle('black');
-				this.ctxCanvasPrv.fillRect(prvX, prvY, prvWidth, prvHeight);
+				if (this.fillColor && this.fillColor !== 'transparent') {
+					this.ctxCanvasPrv.setFillStyle(this.fillColor);
+					this.ctxCanvasPrv.fillRect(prvX, prvY, prvWidth, prvHeight);
+				}
 				this.ctxCanvasPrv.draw(true);
 
 				// #ifdef APP-PLUS||H5
@@ -1117,7 +1129,7 @@
 				}, this);
 			},
 			btop(base64) {
-				return new Promise(function(resolve, reject) {
+				return new Promise(function (resolve, reject) {
 					var arr = base64.split(','),
 						mime = arr[0].match(/:(.*?);/)[1],
 						bstr = atob(arr[1]),
@@ -1134,98 +1146,108 @@
 </script>
 
 <style lang="scss" scoped>
-.u-cropper {
-	.my-canvas{
-		display: flex;
-		position: fixed !important;
-		background: #000000;
-		left: 0;
-		z-index: 100000;
-		width: 100%;
-	}
-	.my-avatar {
-		width: 150rpx;
-		height: 150rpx;
-		border-radius: 100%;
-	}
-	.oper-canvas {
-		display: flex;
-		position: fixed !important;
-		left: 0;
-		z-index: 100001;
-		width: 100%;
-	}
-	.prv-canvas {
-		display: flex;
-		position: fixed !important;
-		background: #000000;
-		left: 0;
-		z-index: 200000;
-		width: 100%;
-	}
-	.oper-wrapper {
-		height: 50px;
-		position: fixed !important;
-		box-sizing: border-box;
-		border: 1px solid #F1F1F1;
-		background: #ffffff;
-		width: 100%;
-		left: 0;
-		bottom: 0;
-		z-index: 100009;
-		flex-direction: row;
-	}
-	.oper {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		padding: 10rpx 20rpx;
-		width: 100%;
-		height: 100%;
-		box-sizing: border-box;
-		align-self: center;
-	}
-	.btn-wrapper {
-		display: flex;
-		flex-direction: row;
-		/* #ifndef H5 */
-		flex-grow: 1;
-		/* #endif */
-		/* #ifdef H5 */
-		height: 50px;
-		/* #endif */
-		justify-content: space-between;
-	}
-	.btn-wrapper view {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 16px;
-		color: #333;
-		border: 1px solid #f1f1f1;
-		border-radius: 6%;
-	}
-	.hover {
-		background: #f1f1f1;
-		border-radius: 6%;
-	}
-	.clr-wrapper {
-		display: flex;
-		flex-direction: row;
-		flex-grow: 1;
-	}
-	.clr-wrapper view {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 16px;
-		color: #333;
-		border: 1px solid #f1f1f1;
-		border-radius: 6%;
-	}
-	.my-slider {
-		flex-grow: 1;
+	.u-cropper {
+		.my-canvas {
+			display: flex;
+			position: fixed !important;
+			background: #000000;
+			left: 0;
+			z-index: 100000;
+			width: 100%;
+		}
+
+		.my-avatar {
+			width: 150rpx;
+			height: 150rpx;
+			border-radius: 100%;
+		}
+
+		.oper-canvas {
+			display: flex;
+			position: fixed !important;
+			left: 0;
+			z-index: 100001;
+			width: 100%;
+		}
+
+		.prv-canvas {
+			display: flex;
+			position: fixed !important;
+			background: #000000;
+			left: 0;
+			z-index: 200000;
+			width: 100%;
+		}
+
+		.oper-wrapper {
+			height: 50px;
+			position: fixed !important;
+			box-sizing: border-box;
+			border: 1px solid #F1F1F1;
+			background: #ffffff;
+			width: 100%;
+			left: 0;
+			bottom: 0;
+			z-index: 100009;
+			flex-direction: row;
+		}
+
+		.oper {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			padding: 10rpx 20rpx;
+			width: 100%;
+			height: 100%;
+			box-sizing: border-box;
+			align-self: center;
+		}
+
+		.btn-wrapper {
+			display: flex;
+			flex-direction: row;
+			/* #ifndef H5 */
+			flex-grow: 1;
+			/* #endif */
+			/* #ifdef H5 */
+			height: 50px;
+			/* #endif */
+			justify-content: space-between;
+		}
+
+		.btn-wrapper view {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 16px;
+			color: #333;
+			border: 1px solid #f1f1f1;
+			border-radius: 6%;
+		}
+
+		.hover {
+			background: #f1f1f1;
+			border-radius: 6%;
+		}
+
+		.clr-wrapper {
+			display: flex;
+			flex-direction: row;
+			flex-grow: 1;
+		}
+
+		.clr-wrapper view {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 16px;
+			color: #333;
+			border: 1px solid #f1f1f1;
+			border-radius: 6%;
+		}
+
+		.my-slider {
+			flex-grow: 1;
+		}
 	}
-}
 </style>
-