9 changed files with 1647 additions and 17 deletions
-
10pages.json
-
2pages/indexEntry/enroll/enroll.vue
-
76pages/mineEntry/personaInfo/personaInfo.vue
-
284pages/mineEntry/uAvatarCropper/uAvatarCropper.vue
-
1265pages/mineEntry/uAvatarCropper/weCropper.js
-
23pages/tabbar/learnCar/comp/topInfo.vue
-
2pages/tabbar/mine/index.vue
-
BINstatic/images/mineIcon/camera.png
-
2uni_modules/zeng-calen/components/zeng-calen/zeng-calen.vue
@ -0,0 +1,284 @@ |
|||||
|
<template> |
||||
|
<view class="content"> |
||||
|
<view class="cropper-wrapper" :style="{ height: cropperOpt.height + 'px' }"> |
||||
|
<canvas |
||||
|
class="cropper" |
||||
|
:disable-scroll="true" |
||||
|
@touchstart="touchStart" |
||||
|
@touchmove="touchMove" |
||||
|
@touchend="touchEnd" |
||||
|
:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }" |
||||
|
canvas-id="cropper" |
||||
|
id="cropper" |
||||
|
></canvas> |
||||
|
<canvas |
||||
|
class="cropper" |
||||
|
:disable-scroll="true" |
||||
|
:style="{ |
||||
|
position: 'fixed', |
||||
|
top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`, |
||||
|
left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`, |
||||
|
width: `${cropperOpt.width * cropperOpt.pixelRatio}px`, |
||||
|
height: `${cropperOpt.height * cropperOpt.pixelRatio}` |
||||
|
}" |
||||
|
canvas-id="targetId" |
||||
|
id="targetId" |
||||
|
></canvas> |
||||
|
</view> |
||||
|
<view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }"> |
||||
|
<view class="upload" @click="uploadTap">取消</view> |
||||
|
<view class="getCropperImage" @click="getCropperImage(false)">完成</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import WeCropper from './weCropper.js'; |
||||
|
export default { |
||||
|
props: { |
||||
|
// 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色， |
||||
|
// mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)" |
||||
|
boundStyle: { |
||||
|
type: Object, |
||||
|
default() { |
||||
|
return { |
||||
|
lineWidth: 4, |
||||
|
borderColor: 'rgb(245, 245, 245)', |
||||
|
mask: 'rgba(0, 0, 0, 0.35)' |
||||
|
}; |
||||
|
} |
||||
|
}, |
||||
|
avatarSrc: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
// // 裁剪框宽度，单位rpx |
||||
|
// rectWidth: { |
||||
|
// type: [String, Number], |
||||
|
// default: 400 |
||||
|
// }, |
||||
|
// // 裁剪框高度，单位rpx |
||||
|
// rectHeight: { |
||||
|
// type: [String, Number], |
||||
|
// default: 400 |
||||
|
// }, |
||||
|
// // 输出图片宽度，单位rpx |
||||
|
// destWidth: { |
||||
|
// type: [String, Number], |
||||
|
// default: 400 |
||||
|
// }, |
||||
|
// // 输出图片高度，单位rpx |
||||
|
// destHeight: { |
||||
|
// type: [String, Number], |
||||
|
// default: 400 |
||||
|
// }, |
||||
|
// // 输出的图片类型，如果发现裁剪的图片很大，可能是因为设置为了"png"，改成"jpg"即可 |
||||
|
// fileType: { |
||||
|
// type: String, |
||||
|
// default: 'jpg', |
||||
|
// }, |
||||
|
// // 生成的图片质量 |
||||
|
// // H5上无效，目前不考虑使用此参数 |
||||
|
// quality: { |
||||
|
// type: [Number, String], |
||||
|
// default: 1 |
||||
|
// } |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// 底部导航的高度 |
||||
|
bottomNavHeight: 50, |
||||
|
originWidth: 200, |
||||
|
width: 0, |
||||
|
height: 0, |
||||
|
cropperOpt: { |
||||
|
id: 'cropper', |
||||
|
targetId: 'targetCropper', |
||||
|
pixelRatio: 1, |
||||
|
width: 0, |
||||
|
height: 0, |
||||
|
scale: 2.5, |
||||
|
zoom: 8, |
||||
|
cut: { |
||||
|
x: (this.width - this.originWidth) / 2, |
||||
|
y: (this.height - this.originWidth) / 2, |
||||
|
width: this.originWidth, |
||||
|
height: this.originWidth |
||||
|
}, |
||||
|
boundStyle: { |
||||
|
lineWidth: uni.upx2px(this.boundStyle.lineWidth), |
||||
|
mask: this.boundStyle.mask, |
||||
|
color: this.boundStyle.borderColor |
||||
|
} |
||||
|
}, |
||||
|
// 裁剪框和输出图片的尺寸，高度默认等于宽度 |
||||
|
// 输出图片宽度，单位px |
||||
|
destWidth: 200, |
||||
|
// 裁剪框宽度，单位px |
||||
|
rectWidth: 350, |
||||
|
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可 |
||||
|
fileType: 'png', |
||||
|
src: '', // 选择的图片路径，用于在点击确定时，判断是否选择了图片 |
||||
|
}; |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
|
||||
|
let rectInfo = uni.getSystemInfoSync(); |
||||
|
this.width = rectInfo.windowWidth; |
||||
|
this.height = rectInfo.windowHeight - this.bottomNavHeight; |
||||
|
this.cropperOpt.width = this.width; |
||||
|
this.cropperOpt.height = this.height; |
||||
|
this.cropperOpt.pixelRatio = rectInfo.pixelRatio; |
||||
|
|
||||
|
if (this.destWidth) this.destWidth = this.destWidth; |
||||
|
if (this.rectWidth) { |
||||
|
let rectWidth = Number(this.rectWidth); |
||||
|
this.cropperOpt.cut = { |
||||
|
x: (this.width - rectWidth) / 2, |
||||
|
y: (this.height - rectWidth) / 2, |
||||
|
width: rectWidth, |
||||
|
height: rectWidth |
||||
|
}; |
||||
|
} |
||||
|
this.rectWidth = this.rectWidth; |
||||
|
if (this.fileType) this.fileType = this.fileType; |
||||
|
// 初始化 |
||||
|
this.cropper = new WeCropper(this.cropperOpt) |
||||
|
.on('ready', ctx => { |
||||
|
// wecropper is ready for work! |
||||
|
}) |
||||
|
.on('beforeImageLoad', ctx => { |
||||
|
// before picture loaded, i can do something |
||||
|
}) |
||||
|
.on('imageLoad', ctx => { |
||||
|
// picture loaded |
||||
|
}) |
||||
|
.on('beforeDraw', (ctx, instance) => { |
||||
|
// before canvas draw,i can do something |
||||
|
}); |
||||
|
// 设置导航栏样式，以免用户在page.json中没有设置为黑色背景 |
||||
|
uni.setNavigationBarColor({ |
||||
|
frontColor: '#ffffff', |
||||
|
backgroundColor: '#000000' |
||||
|
}); |
||||
|
this.src = encodeURI(options.url) |
||||
|
// 获取裁剪图片资源后，给data添加src属性及其值 |
||||
|
this.cropper.pushOrign(this.src); |
||||
|
}, |
||||
|
methods: { |
||||
|
touchStart(e) { |
||||
|
this.cropper.touchStart(e); |
||||
|
}, |
||||
|
touchMove(e) { |
||||
|
this.cropper.touchMove(e); |
||||
|
}, |
||||
|
touchEnd(e) { |
||||
|
this.cropper.touchEnd(e); |
||||
|
}, |
||||
|
getCropperImage(isPre = false) { |
||||
|
if(!this.src) return this.$u.toast('请先选择图片再裁剪'); |
||||
|
|
||||
|
let cropper_opt = { |
||||
|
destHeight: Number(this.destWidth), // uni.canvasToTempFilePath要求这些参数为数值 |
||||
|
destWidth: Number(this.destWidth), |
||||
|
fileType: this.fileType |
||||
|
}; |
||||
|
this.cropper.getCropperImage(cropper_opt, (path, err) => { |
||||
|
if (err) { |
||||
|
uni.showModal({ |
||||
|
title: '温馨提示', |
||||
|
content: err.message |
||||
|
}); |
||||
|
} else { |
||||
|
if (isPre) { |
||||
|
uni.previewImage({ |
||||
|
current: '', // 当前显示图片的 http 链接 |
||||
|
urls: [path] // 需要预览的图片 http 链接列表 |
||||
|
}); |
||||
|
} else { |
||||
|
uni.$emit('uAvatarCropper', path); |
||||
|
// console.log(path) |
||||
|
uni.navigateBack() |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
uploadTap() { |
||||
|
uni.navigateBack() |
||||
|
return |
||||
|
const self = this; |
||||
|
uni.chooseImage({ |
||||
|
count: 1, // 默认9 |
||||
|
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 |
||||
|
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 |
||||
|
success: (res) => { |
||||
|
self.src = res.tempFilePaths[0]; |
||||
|
// 获取裁剪图片资源后，给data添加src属性及其值 |
||||
|
|
||||
|
self.cropper.pushOrign(this.src); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
@import '@/uni_modules/uview-ui/libs/css/components.scss'; |
||||
|
|
||||
|
.content { |
||||
|
background: rgba(255, 255, 255, 1); |
||||
|
} |
||||
|
|
||||
|
.cropper { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
z-index: 11; |
||||
|
} |
||||
|
|
||||
|
.cropper-buttons { |
||||
|
background-color: #000000; |
||||
|
color: #eee; |
||||
|
} |
||||
|
|
||||
|
.cropper-wrapper { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
background-color: #000; |
||||
|
} |
||||
|
|
||||
|
.cropper-buttons { |
||||
|
width: 100vw; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.cropper-buttons .upload, |
||||
|
.cropper-buttons .getCropperImage { |
||||
|
width: 50%; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.cropper-buttons .upload { |
||||
|
text-align: left; |
||||
|
padding-left: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.cropper-buttons .getCropperImage { |
||||
|
text-align: right; |
||||
|
padding-right: 50rpx; |
||||
|
} |
||||
|
</style> |
||||
1265
pages/mineEntry/uAvatarCropper/weCropper.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
|
After Width: 46 | Height: 46 | Size: 1.3 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue