1293 lines
42 KiB
Plaintext
1293 lines
42 KiB
Plaintext
<template>
|
||
<view class="image-cropper" catchtouchmove="_preventTouchMove">
|
||
<view class="main" id="main_bc" @touchend="_cutTouchEnd" @touchstart="_cutTouchStart" @touchmove="_cutTouchMove">
|
||
<view class="content">
|
||
<view class="content_top bg_gray {{_flag_bright? '':'bg_black'}}"
|
||
style="height:{{cut_top}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
|
||
<view class="content_middle" style="height:{{height}}px;">
|
||
<view class="content_middle_left bg_gray {{_flag_bright? '':'bg_black'}}"
|
||
style="width:{{cut_left}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
|
||
<view class="content_middle_middle"
|
||
style="width:{{width}}px;height:{{height}}px;transition-duration: .3s;transition-property:{{_cut_animation?'':'background'}};">
|
||
<view class="border border-top-left" style="background: {{borderColor}}"></view>
|
||
<view class="border border-top-right" style="background: {{borderColor}}"></view>
|
||
<view class="border border-right-top" style="background: {{borderColor}}"></view>
|
||
<view class="border border-right-bottom" style="background: {{borderColor}}"></view>
|
||
<view class="border border-bottom-right" style="background: {{borderColor}}"></view>
|
||
<view class="border border-bottom-left" style="background: {{borderColor}}"></view>
|
||
<view class="border border-left-bottom" style="background: {{borderColor}}"></view>
|
||
<view class="border border-left-top" style="background: {{borderColor}}"></view>
|
||
</view>
|
||
<view class="content_middle_right bg_gray {{_flag_bright? '':'bg_black'}}"
|
||
style="transition-property:{{_cut_animation?'':'background'}}"></view>
|
||
</view>
|
||
<view class="content_bottom bg_gray {{_flag_bright?'':'bg_black'}}"
|
||
style="transition-property:{{_cut_animation?'':'background'}}"></view>
|
||
</view>
|
||
<image @load="imageLoad" bindtouchstart="_start" bindtouchmove="_move" bindtouchend="_end"
|
||
style="width:{{img_width ? img_width + 'px' : 'auto'}};height:{{img_height ? img_height + 'px' : 'auto'}};top:{{tanTop}};left:{{tanLeft}};transform:translate3d({{tanTop=='50%'?'-'+tanTop:_img_left-img_width/2+'px'}},{{tanLeft=='50%'?'-'+tanLeft:_img_top-img_height/2+'px'}},0) scale({{scale}}) rotate({{angle}}deg);transition-duration:{{_cut_animation?.4:0}}s;"
|
||
class="img"
|
||
:src="imgSrc"></image>
|
||
</view>
|
||
<canvas canvas-id="image-cropper" disable-scroll="true"
|
||
style="width:{{_canvas_width * export_scale}}px;height:{{_canvas_height * export_scale}}px;left:{{canvas_left}}px;top:{{canvas_top}}px"
|
||
class="image-cropper-canvas"></canvas>
|
||
</view>
|
||
<view class="main-box">
|
||
<view class="main-cancel ~flo_l ~font_30 ~text-center" @tap.stop="chooseimage">选择图片</view>
|
||
<view class="main-save ~flo_r ~font_30 ~text-center" @tap.stop="saveUpdate">确定</view>
|
||
</view>
|
||
<chooseImageTips :chooseShow.sync="chooseShow" @hideCut.user="hideCut" @imgSrcCut.user="imgSrcCut"></chooseImageTips>
|
||
</template>
|
||
<script>
|
||
import wepy from '@wepy/core'
|
||
wepy.component({
|
||
// config = {
|
||
// component: true
|
||
// }
|
||
// components = {chooseImageTips}
|
||
props: {
|
||
/**
|
||
* 图片路径
|
||
*/
|
||
imgSrc: {
|
||
type: String
|
||
},
|
||
/**
|
||
* 裁剪框颜色
|
||
*/
|
||
borderColor: {
|
||
type: String,
|
||
default: 'white'
|
||
},
|
||
/**
|
||
* 裁剪框高度
|
||
*/
|
||
height: {
|
||
type: Number,
|
||
default: 200
|
||
},
|
||
/**
|
||
* 裁剪框宽度
|
||
*/
|
||
width: {
|
||
type: Number,
|
||
default: 200
|
||
},
|
||
/**
|
||
* 裁剪框最小尺寸
|
||
*/
|
||
min_width: {
|
||
type: Number,
|
||
default: 100
|
||
},
|
||
min_height: {
|
||
type: Number,
|
||
default: 100
|
||
},
|
||
/**
|
||
* 裁剪框最大尺寸
|
||
*/
|
||
max_width: {
|
||
type: Number,
|
||
default: 300
|
||
},
|
||
'max_height': {
|
||
type: Number,
|
||
default: 300
|
||
},
|
||
/**
|
||
* 裁剪框禁止拖动
|
||
*/
|
||
disable_width: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
disable_height: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
/**
|
||
* 锁定裁剪框比例
|
||
*/
|
||
disable_ratio: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
/**
|
||
* 生成的图片尺寸相对剪裁框的比例
|
||
*/
|
||
export_scale: {
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
/**
|
||
* 生成的图片质量0-1
|
||
*/
|
||
quality: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
cut_top: {
|
||
type: Number,
|
||
default: 212
|
||
},
|
||
cut_left: {
|
||
type: Number,
|
||
default: 37
|
||
},
|
||
/**
|
||
* canvas上边距（不设置默认不显示）
|
||
*/
|
||
canvas_top: {
|
||
type: Number,
|
||
default: null
|
||
},
|
||
/**
|
||
* canvas左边距（不设置默认不显示）
|
||
*/
|
||
canvas_left: {
|
||
type: Number,
|
||
default: null
|
||
},
|
||
/**
|
||
* 图片宽度
|
||
*/
|
||
img_width: {
|
||
type: Number,
|
||
default: null
|
||
},
|
||
/**
|
||
* 图片高度
|
||
*/
|
||
img_height: {
|
||
type: Number,
|
||
default: null
|
||
},
|
||
/**
|
||
* 图片缩放比
|
||
*/
|
||
scale: {
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
/**
|
||
* 图片旋转角度
|
||
*/
|
||
angle: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
/**
|
||
* 判断是否是新图片
|
||
*/
|
||
newPic: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
/**
|
||
* 最小缩放比
|
||
*/
|
||
min_scale: {
|
||
type: Number,
|
||
default: 0.5
|
||
},
|
||
/**
|
||
* 最大缩放比
|
||
*/
|
||
max_scale: {
|
||
type: Number,
|
||
default: 2
|
||
},
|
||
/**
|
||
* 是否禁用旋转
|
||
*/
|
||
disable_rotate: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
/**
|
||
* 是否限制移动范围(剪裁框只能在图片内)
|
||
*/
|
||
limit_move: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data: {
|
||
el: 'image-cropper', // 暂时无用
|
||
info: wx.getSystemInfoSync(),
|
||
MOVE_THROTTLE: null, // 触摸移动节流settimeout
|
||
MOVE_THROTTLE_FLAG: true, // 节流标识
|
||
INIT_IMGWIDTH: 0, // 图片设置尺寸,此值不变（记录最初设定的尺寸）
|
||
INIT_IMGHEIGHT: 0, // 图片设置尺寸,此值不变（记录最初设定的尺寸）
|
||
TIME_BG: null, // 背景变暗延时函数
|
||
TIME_CUT_CENTER: null,
|
||
_touch_img_relative: [{
|
||
x: 0,
|
||
y: 0
|
||
}], // 鼠标和图片中心的相对位置
|
||
_flag_cut_touch: false, // 是否是拖动裁剪框
|
||
_hypotenuse_length: 0, // 双指触摸时斜边长度
|
||
_flag_img_endtouch: false, // 是否结束触摸
|
||
_flag_bright: true, // 背景是否亮
|
||
_canvas_overflow: true, // canvas缩略图是否在屏幕外面
|
||
_canvas_width: 200,
|
||
_canvas_height: 200,
|
||
origin_x: 0.5, // 图片旋转中心
|
||
origin_y: 0.5, // 图片旋转中心
|
||
_cut_animation: false, // 是否开启图片和裁剪框过渡
|
||
_img_top: wx.getSystemInfoSync().windowHeight / 2, // 图片上边距
|
||
_img_left: wx.getSystemInfoSync().windowWidth / 2, // 图片左边距
|
||
chooseShow: false,
|
||
tanTop: '50%',
|
||
tanLeft: '50%'
|
||
|
||
},
|
||
watch: {
|
||
// 监听截取框宽高变化
|
||
width(newV, oldV) {
|
||
if (newV < this.min_width) {
|
||
this.width = this.min_width
|
||
}
|
||
this._computeCutSize()
|
||
},
|
||
height(newV, oldV) {
|
||
if (newV < this.min_height) {
|
||
this.height = this.min_height
|
||
}
|
||
this._computeCutSize()
|
||
},
|
||
angle(newV, oldV) {
|
||
// 停止居中裁剪框，继续修改图片位置
|
||
this._moveStop()
|
||
if (this.limit_move) {
|
||
if (this.angle % 90) {
|
||
this.angle = Math.round(this.angle / 90) * 90
|
||
}
|
||
}
|
||
},
|
||
_cut_animation(newV, oldV) {
|
||
// 开启过渡300毫秒之后自动关闭
|
||
clearTimeout(this._cut_animation_time)
|
||
if (newV) {
|
||
this._cut_animation_time = setTimeout(() => {
|
||
this._cut_animation = false
|
||
}, 300)
|
||
}
|
||
},
|
||
limit_move(newV) {
|
||
if (newV) {
|
||
if (this.angle % 90) {
|
||
this.angle = Math.round(this.angle / 90) * 90
|
||
}
|
||
this._imgMarginDetectionScale()
|
||
!this._canvas_overflow && this._draw()
|
||
}
|
||
},
|
||
canvas_top() {
|
||
this._canvasDetectionPosition()
|
||
},
|
||
canvas_left() {
|
||
this._canvasDetectionPosition()
|
||
},
|
||
imgSrc(e) {
|
||
this.pushImg()
|
||
},
|
||
cut_top() {
|
||
this._cutDetectionPosition()
|
||
if (this.limit_move) {
|
||
!this._canvas_overflow && this._draw()
|
||
}
|
||
},
|
||
cut_left() {
|
||
this._cutDetectionPosition()
|
||
if (this.limit_move) {
|
||
!this._canvas_overflow && this._draw()
|
||
}
|
||
}
|
||
},
|
||
ready() {
|
||
this.info = wx.getSystemInfoSync()
|
||
this.INIT_IMGWIDTH = this.img_width
|
||
this.INIT_IMGHEIGHT = this.img_height
|
||
this._canvas_height = this.height
|
||
this._canvas_width = this.width
|
||
console.log('--9988')
|
||
this._initCanvas()
|
||
this.imgSrc && (this.imgSrc = this.imgSrc)
|
||
// 根据开发者设置的图片目标尺寸计算实际尺寸
|
||
this._initImageSize()
|
||
// 设置裁剪框大小>设置图片尺寸>绘制canvas
|
||
this._computeCutSize()
|
||
// 检查裁剪框是否在范围内
|
||
this._cutDetectionPosition()
|
||
// 检查canvas是否在范围内
|
||
this._canvasDetectionPosition()
|
||
this.setCutCenter()
|
||
this.$emit('load', {
|
||
cropper: this
|
||
})
|
||
},
|
||
// 渲染
|
||
methods: {
|
||
_draw(callback) {
|
||
console.log(this.imgSrc)
|
||
if (!this.imgSrc || !this.ctx) return
|
||
let draw = () => {
|
||
// 图片实际大小
|
||
let img_width = this.img_width * this.scale * this.export_scale
|
||
let img_height = this.img_height * this.scale * this.export_scale
|
||
// canvas和图片的相对距离
|
||
var xpos = this._img_left - this.cut_left
|
||
var ypos = this._img_top - this.cut_top
|
||
// 旋转画布
|
||
this.ctx.translate(xpos * this.export_scale, ypos * this.export_scale)
|
||
this.ctx.rotate(this.angle * Math.PI / 180)
|
||
this.ctx.drawImage(this.imgSrc, -img_width / 2, -img_height / 2, img_width, img_height)
|
||
this.ctx.draw(false, () => {
|
||
callback && callback()
|
||
})
|
||
}
|
||
console.log(this.ctx, 'this.ctx=333')
|
||
if (this.ctx && (this.ctx.width != this.width || this.ctx.height != this.height)) {
|
||
// 优化拖动裁剪框，所以必须把宽高设置放在离用户触发渲染最近的地方
|
||
this._canvas_height = this.height
|
||
this._canvas_width = this.width
|
||
draw()
|
||
this._canvas_height = this.height
|
||
this._canvas_width = this.width
|
||
} else {
|
||
draw()
|
||
}
|
||
},
|
||
|
||
chooseimage() {
|
||
let vm = this
|
||
vm.chooseShow = true
|
||
vm.newPic = 1
|
||
// wx.chooseImage({
|
||
// count: 1,
|
||
// // sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||
// sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||
// sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||
// success: (res) => {
|
||
// vm.imgSrc = res.tempFilePaths[0]
|
||
// console.log(vm.imgSrc)
|
||
// }
|
||
// })
|
||
},
|
||
async saveUpdate(event) {
|
||
// 生成图片并回调
|
||
await this._initCanvas()
|
||
let vm = this
|
||
console.log(this.imgSrc, '//')
|
||
if (!this.imgSrc) return
|
||
if (vm.newPic == 0) {
|
||
console.log('222')
|
||
vm.$emit('saveCut', {
|
||
url: this.imgSrc
|
||
})
|
||
return
|
||
}
|
||
let draw = () => {
|
||
// 图片实际大小
|
||
let img_width = this.img_width * this.scale * this.export_scale
|
||
let img_height = this.img_height * this.scale * this.export_scale
|
||
// canvas和图片的相对距离
|
||
var xpos = this._img_left - this.cut_left
|
||
var ypos = this._img_top - this.cut_top
|
||
// 旋转画布
|
||
vm.ctx.translate(xpos * vm.export_scale, ypos * vm.export_scale)
|
||
vm.ctx.rotate(this.angle * Math.PI / 180)
|
||
vm.ctx.drawImage(vm.imgSrc, -img_width / 2, -img_height / 2, img_width, img_height)
|
||
console.log(vm.ctx, '333')
|
||
vm.ctx.draw(false, () => {
|
||
console.log('444')
|
||
wx.canvasToTempFilePath({
|
||
width: vm.width * vm.export_scale,
|
||
height: Math.round(vm.height * vm.export_scale),
|
||
destWidth: vm.width * vm.export_scale,
|
||
destHeight: Math.round(vm.height) * vm.export_scale,
|
||
fileType: 'png',
|
||
quality: vm.quality,
|
||
canvasId: vm.el,
|
||
success: (res) => {
|
||
console.log(res.tempFilePath, '///')
|
||
vm.$emit('saveCut', {
|
||
url: res.tempFilePath,
|
||
width: vm.width * vm.export_scale,
|
||
height: vm.height * vm.export_scale
|
||
})
|
||
}
|
||
}, vm.$wx)
|
||
})
|
||
}
|
||
if (vm.ctx.width != vm.width || vm.ctx.height != vm.height) {
|
||
// 优化拖动裁剪框，所以必须把宽高设置放在离用户触发渲染最近的地方
|
||
vm._canvas_height = vm.height
|
||
vm._canvas_width = vm.width
|
||
draw()
|
||
vm._canvas_height = vm.height
|
||
vm._canvas_width = vm.width
|
||
} else {
|
||
draw()
|
||
}
|
||
},
|
||
_preventTouchMove(event) {
|
||
},
|
||
// 裁剪框处理
|
||
_cutTouchMove(e) {
|
||
if (this._flag_cut_touch && this.MOVE_THROTTLE_FLAG) {
|
||
// if (this.disable_ratio && (this.disable_width || this.disable_height)) return
|
||
// 节流
|
||
this.MOVE_THROTTLE_FLAG = false
|
||
this._move_throttle()
|
||
let width = this.width,
|
||
height = this.height,
|
||
cut_top = this.cut_top,
|
||
cut_left = this.cut_left,
|
||
size_correct = () => {
|
||
width = width <= this.max_width ? width >= this.min_width ? width : this.min_width : this.max_width
|
||
height = height <= this.max_height ? height >= this.min_height ? height : this.min_height : this.max_height
|
||
},
|
||
size_inspect = () => {
|
||
if ((width > this.max_width || width < this.min_width || height > this.max_height || height < this.min_height) && this.disable_ratio) {
|
||
size_correct()
|
||
return false
|
||
} else {
|
||
size_correct()
|
||
return true
|
||
}
|
||
}
|
||
height = this.CUT_START.height + ((this.CUT_START.corner > 1 && this.CUT_START.corner < 4 ? 1 : -1) * (this.CUT_START.y - e.touches[0].clientY))
|
||
switch (this.CUT_START.corner) {
|
||
case 1:
|
||
width = this.CUT_START.width + this.CUT_START.x - e.touches[0].clientX
|
||
if (this.disable_ratio) {
|
||
height = width / (this.width / this.height)
|
||
}
|
||
if (!size_inspect()) return
|
||
cut_left = this.CUT_START.cut_left - (width - this.CUT_START.width)
|
||
break
|
||
case 2:
|
||
width = this.CUT_START.width + this.CUT_START.x - e.touches[0].clientX
|
||
if (this.disable_ratio) {
|
||
height = width / (this.width / this.height)
|
||
}
|
||
if (!size_inspect()) return
|
||
cut_top = this.CUT_START.cut_top - (height - this.CUT_START.height)
|
||
cut_left = this.CUT_START.cut_left - (width - this.CUT_START.width)
|
||
break
|
||
case 3:
|
||
width = this.CUT_START.width - this.CUT_START.x + e.touches[0].clientX
|
||
if (this.disable_ratio) {
|
||
height = width / (this.width / this.height)
|
||
}
|
||
if (!size_inspect()) return
|
||
cut_top = this.CUT_START.cut_top - (height - this.CUT_START.height)
|
||
break
|
||
case 4:
|
||
width = this.CUT_START.width - this.CUT_START.x + e.touches[0].clientX
|
||
if (this.disable_ratio) {
|
||
height = width / (this.width / this.height)
|
||
}
|
||
if (!size_inspect()) return
|
||
break
|
||
}
|
||
if (!this.disable_width && !this.disable_height) {
|
||
this.width = width
|
||
this.cut_left = cut_left
|
||
this.height = height
|
||
this.cut_top = cut_top
|
||
} else if (!this.disable_width) {
|
||
this.width = width
|
||
this.cut_left = cut_left
|
||
} else if (!this.disable_height) {
|
||
this.height = height
|
||
this.cut_top = cut_top
|
||
}
|
||
this._imgMarginDetectionScale()
|
||
}
|
||
},
|
||
_cutTouchStart(e) {
|
||
let currentX = e.touches[0].clientX
|
||
let currentY = e.touches[0].clientY
|
||
let cutbox_top4 = this.cut_top + this.height - 30
|
||
let cutbox_bottom4 = this.cut_top + this.height + 20
|
||
let cutbox_left4 = this.cut_left + this.width - 30
|
||
let cutbox_right4 = this.cut_left + this.width + 30
|
||
|
||
let cutbox_top3 = this.cut_top - 30
|
||
let cutbox_bottom3 = this.cut_top + 30
|
||
let cutbox_left3 = this.cut_left + this.width - 30
|
||
let cutbox_right3 = this.cut_left + this.width + 30
|
||
|
||
let cutbox_top2 = this.cut_top - 30
|
||
let cutbox_bottom2 = this.cut_top + 30
|
||
let cutbox_left2 = this.cut_left - 30
|
||
let cutbox_right2 = this.cut_left + 30
|
||
|
||
let cutbox_top1 = this.cut_top + this.height - 30
|
||
let cutbox_bottom1 = this.cut_top + this.height + 30
|
||
let cutbox_left1 = this.cut_left - 30
|
||
let cutbox_right1 = this.cut_left + 30
|
||
if (currentX > cutbox_left4 && currentX < cutbox_right4 && currentY > cutbox_top4 && currentY < cutbox_bottom4) {
|
||
this._moveDuring()
|
||
this._flag_cut_touch = true
|
||
this._flag_img_endtouch = true
|
||
this.CUT_START = {
|
||
width: this.width,
|
||
height: this.height,
|
||
x: currentX,
|
||
y: currentY,
|
||
corner: 4
|
||
}
|
||
} else if (currentX > cutbox_left3 && currentX < cutbox_right3 && currentY > cutbox_top3 && currentY < cutbox_bottom3) {
|
||
this._moveDuring()
|
||
this._flag_cut_touch = true
|
||
this._flag_img_endtouch = true
|
||
this.CUT_START = {
|
||
width: this.width,
|
||
height: this.height,
|
||
x: currentX,
|
||
y: currentY,
|
||
cut_top: this.cut_top,
|
||
cut_left: this.cut_left,
|
||
corner: 3
|
||
}
|
||
} else if (currentX > cutbox_left2 && currentX < cutbox_right2 && currentY > cutbox_top2 && currentY < cutbox_bottom2) {
|
||
this._moveDuring()
|
||
this._flag_cut_touch = true
|
||
this._flag_img_endtouch = true
|
||
this.CUT_START = {
|
||
width: this.width,
|
||
height: this.height,
|
||
cut_top: this.cut_top,
|
||
cut_left: this.cut_left,
|
||
x: currentX,
|
||
y: currentY,
|
||
corner: 2
|
||
}
|
||
} else if (currentX > cutbox_left1 && currentX < cutbox_right1 && currentY > cutbox_top1 && currentY < cutbox_bottom1) {
|
||
this._moveDuring()
|
||
this._flag_cut_touch = true
|
||
this._flag_img_endtouch = true
|
||
this.CUT_START = {
|
||
width: this.width,
|
||
height: this.height,
|
||
cut_top: this.cut_top,
|
||
cut_left: this.cut_left,
|
||
x: currentX,
|
||
y: currentY,
|
||
corner: 1
|
||
}
|
||
}
|
||
},
|
||
_cutTouchEnd(e) {
|
||
this._moveStop()
|
||
this._flag_cut_touch = false
|
||
// console.log(e,'_cutTouchEnd;;;')
|
||
},
|
||
// 点击中间剪裁框处理
|
||
_click(event) {
|
||
console.log(event)
|
||
if (!this.imgSrc) {
|
||
// 调起上传
|
||
this.chooseimage()
|
||
return
|
||
}
|
||
this._draw(() => {
|
||
let x = event.detail ? event.detail.x : event.touches[0].clientX
|
||
let y = event.detail ? event.detail.y : event.touches[0].clientY
|
||
if ((x >= this.cut_left && x <= (this.cut_left + this.width)) && (y >= this.cut_top && y <= (this.cut_top + this.height))) {
|
||
// 生成图片并回调
|
||
wx.canvasToTempFilePath({
|
||
width: this.width * this.export_scale,
|
||
height: Math.round(this.height * this.export_scale),
|
||
destWidth: this.width * this.export_scale,
|
||
destHeight: Math.round(this.height) * this.export_scale,
|
||
fileType: 'png',
|
||
quality: this.quality,
|
||
canvasId: this.el,
|
||
success: (res) => {
|
||
this.$emit('tapcut', {
|
||
url: res.tempFilePath,
|
||
width: this.width * this.export_scale,
|
||
height: this.height * this.export_scale
|
||
})
|
||
}
|
||
}, this.$wx)
|
||
}
|
||
})
|
||
},
|
||
|
||
imageLoad(e) {
|
||
this.$emit('imageload', this.imageObject)
|
||
wx.hideLoading() // 重置图片角度、缩放、位置
|
||
this.imgReset()
|
||
setTimeout(() => {
|
||
}, 100)
|
||
},
|
||
// 开始触摸
|
||
_start(event) {
|
||
this._flag_img_endtouch = false
|
||
if (event.touches.length == 1) {
|
||
// 单指拖动
|
||
this._touch_img_relative[0] = {
|
||
x: (event.touches[0].clientX - this._img_left),
|
||
y: (event.touches[0].clientY - this._img_top)
|
||
}
|
||
} else {
|
||
// 双指放大
|
||
let width = Math.abs(event.touches[0].clientX - event.touches[1].clientX)
|
||
let height = Math.abs(event.touches[0].clientY - event.touches[1].clientY)
|
||
this._touch_img_relative = [{
|
||
x: (event.touches[0].clientX - this._img_left),
|
||
y: (event.touches[0].clientY - this._img_top)
|
||
}, {
|
||
x: (event.touches[1].clientX - this._img_left),
|
||
y: (event.touches[1].clientY - this._img_top)
|
||
}]
|
||
this._hypotenuse_length = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))
|
||
}
|
||
!this._canvas_overflow && this._draw()
|
||
},
|
||
_move(event) {
|
||
// console.log('asssssss',event)
|
||
if (this._flag_img_endtouch || !this.MOVE_THROTTLE_FLAG) return
|
||
this.MOVE_THROTTLE_FLAG = false
|
||
this._move_throttle()
|
||
this._moveDuring()
|
||
if (event.touches.length == 1) {
|
||
// 单指拖动
|
||
let left = (event.touches[0].clientX - this._touch_img_relative[0].x),
|
||
top = (event.touches[0].clientY - this._touch_img_relative[0].y)
|
||
// 图像边缘检测,防止截取到空白
|
||
this._img_left = left
|
||
this._img_top = top
|
||
this._imgMarginDetectionPosition()
|
||
this._img_left = this._img_left
|
||
this._img_top = this._img_top
|
||
} else {
|
||
// 双指放大
|
||
let width = (Math.abs(event.touches[0].clientX - event.touches[1].clientX)),
|
||
height = (Math.abs(event.touches[0].clientY - event.touches[1].clientY)),
|
||
hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)),
|
||
scale = this.scale * (hypotenuse / this._hypotenuse_length),
|
||
current_deg = 0
|
||
scale = scale <= this.min_scale ? this.min_scale : scale
|
||
scale = scale >= this.max_scale ? this.max_scale : scale
|
||
// 图像边缘检测,防止截取到空白
|
||
this.scale = scale
|
||
this._imgMarginDetectionScale()
|
||
// 双指旋转(如果没禁用旋转)
|
||
let _touch_img_relative = [{
|
||
x: (event.touches[0].clientX - this._img_left),
|
||
y: (event.touches[0].clientY - this._img_top)
|
||
}, {
|
||
x: (event.touches[1].clientX - this._img_left),
|
||
y: (event.touches[1].clientY - this._img_top)
|
||
}]
|
||
if (!this.disable_rotate) {
|
||
let first_atan = 180 / Math.PI * Math.atan2(_touch_img_relative[0].y, _touch_img_relative[0].x)
|
||
let first_atan_old = 180 / Math.PI * Math.atan2(this._touch_img_relative[0].y, this._touch_img_relative[0].x)
|
||
let second_atan = 180 / Math.PI * Math.atan2(_touch_img_relative[1].y, _touch_img_relative[1].x)
|
||
let second_atan_old = 180 / Math.PI * Math.atan2(this._touch_img_relative[1].y, this._touch_img_relative[1].x)
|
||
// 当前旋转的角度
|
||
let first_deg = first_atan - first_atan_old,
|
||
second_deg = second_atan - second_atan_old
|
||
if (first_deg != 0) {
|
||
current_deg = first_deg
|
||
} else if (second_deg != 0) {
|
||
current_deg = second_deg
|
||
}
|
||
}
|
||
this._touch_img_relative = _touch_img_relative
|
||
this._hypotenuse_length = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))
|
||
|
||
this.angle = this.angle + current_deg
|
||
this.scale = this.scale
|
||
}
|
||
!this._canvas_overflow && this._draw()
|
||
},
|
||
// 结束操作
|
||
_end(event) {
|
||
this._flag_img_endtouch = true
|
||
this._moveStop()
|
||
// console.log(event)
|
||
},
|
||
hideCut(e) {
|
||
this.chooseShow = e.chooseShow
|
||
},
|
||
imgSrcCut(e) {
|
||
this.imgSrc = e.imgSrc
|
||
},
|
||
/**
|
||
* 上传图片
|
||
*/
|
||
upload() {
|
||
let that = this
|
||
wx.chooseImage({
|
||
count: 1,
|
||
sizeType: ['original', 'compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success(res) {
|
||
const tempFilePaths = res.tempFilePaths[0]
|
||
console.log('Img Temp Paths: ' + tempFilePaths)
|
||
that.pushImg(tempFilePaths)
|
||
wx.showLoading({
|
||
title: '加载中...'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 返回图片信息
|
||
*/
|
||
getImg(getCallback) {
|
||
this._draw(() => {
|
||
wx.canvasToTempFilePath({
|
||
width: this.width * this.export_scale,
|
||
height: Math.round(this.height * this.export_scale),
|
||
destWidth: this.width * this.export_scale,
|
||
destHeight: Math.round(this.height) * this.export_scale,
|
||
fileType: 'png',
|
||
quality: this.quality,
|
||
canvasId: this.el,
|
||
success: (res) => {
|
||
getCallback({
|
||
url: res.tempFilePath,
|
||
width: this.width * this.export_scale,
|
||
height: this.height * this.export_scale
|
||
})
|
||
}
|
||
}, this)
|
||
})
|
||
},
|
||
/**
|
||
* 设置图片动画
|
||
* {
|
||
* x:10,//图片在原有基础上向下移动10px
|
||
* y:10,//图片在原有基础上向右移动10px
|
||
* angle:10,//图片在原有基础上旋转10deg
|
||
* scale:0.5,//图片在原有基础上增加0.5倍
|
||
* }
|
||
*/
|
||
setTransform(transform) {
|
||
if (!transform) return
|
||
if (!this.disable_rotate) {
|
||
this.angle = transform.angle ? this.angle + transform.angle : this.angle
|
||
}
|
||
var scale = this.scale
|
||
if (transform.scale) {
|
||
scale = this.scale + transform.scale
|
||
scale = scale <= this.min_scale ? this.min_scale : scale
|
||
scale = scale >= this.max_scale ? this.max_scale : scale
|
||
}
|
||
this.scale = scale
|
||
let cutX = this.cut_left
|
||
let cutY = this.cut_top
|
||
if (transform.cutX) {
|
||
this.cut_left = cutX + transform.cutX
|
||
}
|
||
if (transform.cutY) {
|
||
this.cut_top = cutY + transform.cutY
|
||
}
|
||
this._img_top = transform.y ? this._img_top + transform.y : this._img_top
|
||
this._img_left = transform.x ? this._img_left + transform.x : this._img_left
|
||
// 图像边缘检测,防止截取到空白
|
||
this._imgMarginDetectionScale()
|
||
// 停止居中裁剪框，继续修改图片位置
|
||
this._moveDuring()
|
||
this.scale = this.scale
|
||
this._img_top = this._img_top
|
||
this._img_left = this._img_left
|
||
|
||
!this._canvas_overflow && this._draw()
|
||
// 可以居中裁剪框了
|
||
this._moveStop()// 结束操作
|
||
},
|
||
/**
|
||
* 设置剪裁框尺寸
|
||
*/
|
||
setCutSize(w, h) {
|
||
this.width = w
|
||
this.height = h
|
||
this._computeCutSize()
|
||
},
|
||
/**
|
||
* 设置剪裁框和图片居中
|
||
*/
|
||
setCutCenter() {
|
||
let cut_top = (this.info.windowHeight - this.height) * 0.5
|
||
let cut_left = (this.info.windowWidth - this.width) * 0.5
|
||
// 顺序不能变
|
||
this._img_top = this._img_top - this.cut_top + cut_top
|
||
this.cut_top = cut_top
|
||
this._img_left = this._img_left - this.cut_left + cut_left
|
||
this.cut_left = cut_left
|
||
},
|
||
_setCutCenter() {
|
||
let cut_top = (this.info.windowHeight - this.height) * 0.5
|
||
let cut_left = (this.info.windowWidth - this.width) * 0.5
|
||
this.cut_top = cut_top
|
||
this.cut_left = cut_left
|
||
},
|
||
/**
|
||
* 设置剪裁框宽度-即将废弃
|
||
*/
|
||
setWidth(width) {
|
||
this.width = width
|
||
this._computeCutSize()
|
||
},
|
||
/**
|
||
* 设置剪裁框高度-即将废弃
|
||
*/
|
||
setHeight(height) {
|
||
this.height = height
|
||
this._computeCutSize()
|
||
},
|
||
/**
|
||
* 是否锁定旋转
|
||
*/
|
||
setDisableRotate(value) {
|
||
this.disable_rotate = value
|
||
},
|
||
/**
|
||
* 是否限制移动
|
||
*/
|
||
setLimitMove(value) {
|
||
this._cut_animation = true
|
||
this.limit_move = !!value
|
||
},
|
||
/**
|
||
* 初始化图片，包括位置、大小、旋转角度
|
||
*/
|
||
imgReset() {
|
||
this.scale = 1
|
||
this.angle = 0
|
||
this.tanLeft = 0
|
||
this.tanTop = 0
|
||
this._img_top = wx.getSystemInfoSync().windowHeight / 2
|
||
this._img_left = wx.getSystemInfoSync().windowWidth / 2
|
||
},
|
||
/**
|
||
* 加载（更换）图片
|
||
*/
|
||
pushImg(src) {
|
||
console.log('pushing img: ' + src)
|
||
if (src) {
|
||
this.imgSrc = src
|
||
// 发现是手动赋值直接返回，交给watch处理
|
||
return
|
||
}
|
||
|
||
wx.getImageInfo({
|
||
src: this.imgSrc,
|
||
success: (res) => {
|
||
console.log('----------------------', res)
|
||
this.imageObject = res
|
||
// 图片非本地路径需要换成本地路径
|
||
if (this.imgSrc.search(/tmp/) == -1) {
|
||
this.imgSrc = res.path
|
||
}
|
||
// 计算最后图片尺寸
|
||
this._imgComputeSize()
|
||
if (this.limit_move) {
|
||
// 限制移动，不留空白处理
|
||
this._imgMarginDetectionScale()
|
||
}
|
||
this._draw()
|
||
},
|
||
fail: (err) => {
|
||
this.imgSrc = ''
|
||
console.log(err)
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 设置图片放大缩小
|
||
*/
|
||
setScale(scale) {
|
||
if (!scale) return
|
||
this.scale = scale
|
||
!this._canvas_overflow && this._draw()
|
||
},
|
||
/**
|
||
* 设置图片旋转角度
|
||
*/
|
||
setAngle(angle) {
|
||
if (!angle) return
|
||
this._cut_animation = true
|
||
this.angle = angle
|
||
this._imgMarginDetectionScale()
|
||
!this._canvas_overflow && this._draw()
|
||
},
|
||
_initCanvas() {
|
||
// 初始化canvas
|
||
// if (!this.ctx) {
|
||
let vm = this
|
||
this.ctx = wx.createCanvasContext('image-cropper', this.$wx)
|
||
console.log(this.ctx, '=====')
|
||
// }
|
||
},
|
||
|
||
/**
|
||
* 根据开发者设置的图片目标尺寸计算实际尺寸
|
||
*/
|
||
_initImageSize() {
|
||
// 处理宽高特殊单位 %>px
|
||
if (this.INIT_IMGWIDTH && typeof this.INIT_IMGWIDTH === 'string' && this.INIT_IMGWIDTH.indexOf('%') != -1) {
|
||
let width = this.INIT_IMGWIDTH.replace('%', '')
|
||
this.INIT_IMGWIDTH = this.img_width = this.info.windowWidth / 100 * width
|
||
}
|
||
if (this.INIT_IMGHEIGHT && typeof this.INIT_IMGHEIGHT === 'string' && this.INIT_IMGHEIGHT.indexOf('%') != -1) {
|
||
let height = this.img_height.replace('%', '')
|
||
this.INIT_IMGHEIGHT = this.img_height = this.info.windowHeight / 100 * height
|
||
}
|
||
},
|
||
/**
|
||
* 检测剪裁框位置是否在允许的范围内(屏幕内)
|
||
*/
|
||
_cutDetectionPosition() {
|
||
let _cutDetectionPositionTop = () => {
|
||
// 检测上边距是否在范围内
|
||
if (this.cut_top < 0) {
|
||
this.cut_top = 0
|
||
}
|
||
if (this.cut_top > this.info.windowHeight - this.height) {
|
||
this.cut_top = this.info.windowHeight - this.height
|
||
}
|
||
}, _cutDetectionPositionLeft = () => {
|
||
// 检测左边距是否在范围内
|
||
if (this.cut_left < 0) {
|
||
this.cut_left = 0
|
||
}
|
||
if (this.cut_left > this.info.windowWidth - this.width) {
|
||
this.cut_left = this.info.windowWidth - this.width
|
||
}
|
||
}
|
||
// 裁剪框坐标处理（如果只写一个参数则另一个默认为0，都不写默认居中）
|
||
if (this.cut_top == null && this.cut_left == null) {
|
||
this._setCutCenter()
|
||
} else if (this.cut_top != null && this.cut_left != null) {
|
||
_cutDetectionPositionTop()
|
||
_cutDetectionPositionLeft()
|
||
} else if (this.cut_top != null && this.cut_left == null) {
|
||
_cutDetectionPositionTop()
|
||
this.cut_left = (this.info.windowWidth - this.width) / 2
|
||
} else if (this.cut_top == null && this.cut_left != null) {
|
||
_cutDetectionPositionLeft()
|
||
this.cut_top = (this.info.windowHeight - this.height) / 2
|
||
}
|
||
},
|
||
/**
|
||
* 检测canvas位置是否在允许的范围内(屏幕内)如果在屏幕外则不开启实时渲染
|
||
* 如果只写一个参数则另一个默认为0，都不写默认超出屏幕外
|
||
*/
|
||
_canvasDetectionPosition() {
|
||
if (this.canvas_top == null && this.canvas_left == null) {
|
||
this._canvas_overflow = false
|
||
this.canvas_top = -5000
|
||
this.canvas_left = -5000
|
||
} else if (this.canvas_top != null && this.canvas_left != null) {
|
||
if (this.canvas_top < -this.height || this.canvas_top > this.info.windowHeight) {
|
||
this._canvas_overflow = true
|
||
} else {
|
||
this._canvas_overflow = false
|
||
}
|
||
} else if (this.canvas_top != null && this.canvas_left == null) {
|
||
this.canvas_left = 0
|
||
} else if (this.canvas_top == null && this.canvas_left != null) {
|
||
this.canvas_top = 0
|
||
if (this.canvas_left < -this.width || this.canvas_left > this.info.windowWidth) {
|
||
this._canvas_overflow = true
|
||
} else {
|
||
this._canvas_overflow = false
|
||
}
|
||
}
|
||
},
|
||
/**
|
||
* 图片边缘检测-位置
|
||
*/
|
||
_imgMarginDetectionPosition(scale) {
|
||
if (!this.limit_move) return
|
||
let left = this._img_left
|
||
let top = this._img_top
|
||
var scaleV2 = scale || this.scale
|
||
let img_width = this.img_width
|
||
let img_height = this.img_height
|
||
if (this.angle / 90 % 2) {
|
||
img_width = this.img_height
|
||
img_height = this.img_width
|
||
}
|
||
left = this.cut_left + img_width * scaleV2 / 2 >= left ? left : this.cut_left + img_width * scaleV2 / 2
|
||
left = this.cut_left + this.width - img_width * scaleV2 / 2 <= left ? left : this.cut_left + this.width - img_width * scaleV2 / 2
|
||
top = this.cut_top + img_height * scaleV2 / 2 >= top ? top : this.cut_top + img_height * scaleV2 / 2
|
||
top = this.cut_top + this.height - img_height * scaleV2 / 2 <= top ? top : this.cut_top + this.height - img_height * scaleV2 / 2
|
||
this._img_left = left
|
||
this._img_top = top
|
||
this.scale = scaleV2
|
||
},
|
||
/**
|
||
* 图片边缘检测-缩放
|
||
*/
|
||
_imgMarginDetectionScale() {
|
||
if (!this.limit_move) return
|
||
let scale = this.scale
|
||
let img_width = this.img_width
|
||
let img_height = this.img_height
|
||
if (this.angle / 90 % 2) {
|
||
img_width = this.img_height
|
||
img_height = this.img_width
|
||
}
|
||
if (img_width * scale < this.width) {
|
||
scale = this.width / img_width
|
||
}
|
||
if (img_height * scale < this.height) {
|
||
scale = Math.max(scale, this.height / img_height)
|
||
}
|
||
this._imgMarginDetectionPosition(scale)
|
||
},
|
||
/**
|
||
* 计算图片尺寸
|
||
*/
|
||
_imgComputeSize() {
|
||
let img_width = this.img_width,
|
||
img_height = this.img_height
|
||
if (!this.INIT_IMGHEIGHT && !this.INIT_IMGWIDTH) {
|
||
// 默认按图片最小边 = 对应裁剪框尺寸
|
||
img_width = this.imageObject.width
|
||
img_height = this.imageObject.height
|
||
if (img_width / img_height > this.width / this.height) {
|
||
img_height = this.height
|
||
img_width = this.imageObject.width / this.imageObject.height * img_height
|
||
} else {
|
||
img_width = this.width
|
||
img_height = this.imageObject.height / this.imageObject.width * img_width
|
||
}
|
||
} else if (this.INIT_IMGHEIGHT && !this.INIT_IMGWIDTH) {
|
||
img_width = this.imageObject.width / this.imageObject.height * this.INIT_IMGHEIGHT
|
||
} else if (!this.INIT_IMGHEIGHT && this.INIT_IMGWIDTH) {
|
||
img_height = this.imageObject.height / this.imageObject.width * this.INIT_IMGWIDTH
|
||
}
|
||
console.log(img_width)
|
||
console.log(img_height)
|
||
this.img_width = img_width
|
||
this.img_height = img_height
|
||
},
|
||
// 改变截取框大小
|
||
_computeCutSize() {
|
||
if (this.width > this.info.windowWidth) {
|
||
this.width = his.info.windowWidth
|
||
} else if (this.width + this.cut_left > this.info.windowWidth) {
|
||
this.cut_left = this.info.windowWidth - this.cut_left
|
||
}
|
||
if (this.height > this.info.windowHeight) {
|
||
this.height = this.info.windowHeight
|
||
} else if (this.height + this.cut_top > this.info.windowHeight) {
|
||
this.cut_top = this.info.windowHeight - this.cut_top
|
||
}
|
||
!this._canvas_overflow && this._draw()
|
||
},
|
||
|
||
_move_throttle() {
|
||
// 安卓需要节流
|
||
if (this.info.platform == 'android') {
|
||
clearTimeout(this.MOVE_THROTTLE)
|
||
this.MOVE_THROTTLE = setTimeout(() => {
|
||
this.MOVE_THROTTLE_FLAG = true
|
||
}, 1000 / 40)
|
||
return this.MOVE_THROTTLE_FLAG
|
||
} else {
|
||
this.MOVE_THROTTLE_FLAG = true
|
||
}
|
||
},
|
||
|
||
// 停止移动时需要做的操作
|
||
_moveStop() {
|
||
// 清空之前的自动居中延迟函数并添加最新的
|
||
clearTimeout(this.TIME_CUT_CENTER)
|
||
this.TIME_CUT_CENTER = setTimeout(() => {
|
||
// 动画启动
|
||
if (!this._cut_animation) {
|
||
this._cut_animation = true
|
||
}
|
||
this.setCutCenter()
|
||
}, 1000)
|
||
// 清空之前的背景变化延迟函数并添加最新的
|
||
clearTimeout(this.TIME_BG)
|
||
this.TIME_BG = setTimeout(() => {
|
||
if (this._flag_bright) {
|
||
this._flag_bright = false
|
||
}
|
||
}, 2000)
|
||
},
|
||
// 移动中
|
||
_moveDuring() {
|
||
// 清空之前的自动居中延迟函数
|
||
clearTimeout(this.TIME_CUT_CENTER)
|
||
// 清空之前的背景变化延迟函数
|
||
clearTimeout(this.TIME_BG)
|
||
// 高亮背景
|
||
if (!this._flag_bright) {
|
||
this._flag_bright = true
|
||
}
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
<style lang="less">
|
||
.main-box{
|
||
width: 100%;
|
||
height: 10vh;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 999999;
|
||
padding: 0 10vw;
|
||
.main-cancel,.main-save{
|
||
background: #d1d1d1;
|
||
padding: 8rpx 0;
|
||
width: 200rpx;
|
||
border-radius: 6rpx;
|
||
color: #D92553;
|
||
}
|
||
.main-save{
|
||
color: white;
|
||
background: #D92553;
|
||
}
|
||
}
|
||
.image-cropper{
|
||
background:rgba(14, 13, 13,.8);
|
||
position: fixed;
|
||
top:0;
|
||
left:0;
|
||
width:100vw;
|
||
height:100vh;
|
||
z-index: 1;
|
||
}
|
||
.main{
|
||
position: absolute;
|
||
width:100vw;
|
||
height:100vh;
|
||
overflow: hidden;
|
||
}
|
||
.content{
|
||
z-index: 9;
|
||
position: absolute;
|
||
width:100vw;
|
||
height:100vh;
|
||
display: flex;
|
||
flex-direction:column;
|
||
pointer-events:none;
|
||
}
|
||
.bg_black{
|
||
background: rgba(0, 0, 0, 0.8)!important;
|
||
}
|
||
.bg_gray{
|
||
background: rgba(0, 0, 0, 0.45);
|
||
transition-duration: .35s;
|
||
}
|
||
.content>.content_top{
|
||
pointer-events:none;
|
||
}
|
||
.content>.content_middle{
|
||
display: flex;
|
||
height: 200px;
|
||
width:100%;
|
||
}
|
||
.content_middle_middle{
|
||
width:200px;
|
||
box-sizing:border-box;
|
||
position: relative;
|
||
transition-duration: .3s;
|
||
}
|
||
.content_middle_right{
|
||
flex: auto;
|
||
}
|
||
.content>.content_bottom{
|
||
flex: auto;
|
||
}
|
||
.image-cropper .img{
|
||
z-index: 2;
|
||
top:0;
|
||
left:0;
|
||
position: absolute;
|
||
border:none;
|
||
width:100%;
|
||
backface-visibility: hidden;
|
||
transform-origin:center;
|
||
}
|
||
.image-cropper-canvas{
|
||
position: fixed;
|
||
background: white;
|
||
width:150px;
|
||
height:150px;
|
||
z-index: 10;
|
||
top:-200%;
|
||
pointer-events:none;
|
||
}
|
||
.border{
|
||
background: white;
|
||
pointer-events:auto;
|
||
position:absolute;
|
||
}
|
||
.border-top-left{
|
||
left:-2.5px;
|
||
top:-2.5px;
|
||
height:2.5px;
|
||
width:33rpx;
|
||
}
|
||
.border-top-right{
|
||
right:-2.5px;
|
||
top:-2.5px;
|
||
height:2.5px;
|
||
width:33rpx;
|
||
}
|
||
.border-right-top{
|
||
top:-1px;
|
||
width:2.5px;
|
||
height:30rpx;
|
||
right:-2.5px;
|
||
}
|
||
.border-right-bottom{
|
||
width:2.5px;
|
||
height:30rpx;
|
||
right:-2.5px;
|
||
bottom:-1px;
|
||
}
|
||
.border-bottom-left{
|
||
height:2.5px;
|
||
width:33rpx;
|
||
bottom:-2.5px;
|
||
left:-2.5px;
|
||
}
|
||
.border-bottom-right{
|
||
height:2.5px;
|
||
width:33rpx;
|
||
bottom:-2.5px;
|
||
right:-2.5px;
|
||
}
|
||
.border-left-top{
|
||
top:-1px;
|
||
width:2.5px;
|
||
height:30rpx;
|
||
left:-2.5px;
|
||
}
|
||
.border-left-bottom{
|
||
width:2.5px;
|
||
height:30rpx;
|
||
left:-2.5px;
|
||
bottom:-1px;
|
||
}
|
||
</style>
|
||
<config>
|
||
{
|
||
usingComponents: {
|
||
chooseImageTips: '~@/components/chooseImageTips',
|
||
}
|
||
}
|
||
</config>
|