parent
928ab131a8
commit
6706b92f9f
@ -1,3 +1,4 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
"usingComponents": {},
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
@ -0,0 +1,106 @@
|
||||
import WeCropper from '../../we-cropper/dist/we-cropper.min.js'
|
||||
|
||||
|
||||
const device = wx.getSystemInfoSync()
|
||||
const width = device.windowWidth
|
||||
const height = device.windowHeight - 30
|
||||
const app = getApp();
|
||||
|
||||
Page({
|
||||
data: {
|
||||
cropperOpt: {
|
||||
id: 'cropper',
|
||||
width,
|
||||
height,
|
||||
scale: 2.5,
|
||||
zoom: 8,
|
||||
cut: {
|
||||
x: (width - 300) / 2,
|
||||
y: (height - 300) / 2,
|
||||
width: 300,
|
||||
height: 300
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
touchStart(e) {
|
||||
console.log(e);
|
||||
this.mycropper.touchStart(e)
|
||||
},
|
||||
|
||||
touchMove(e) {
|
||||
console.log(e);
|
||||
this.mycropper.touchMove(e)
|
||||
},
|
||||
|
||||
touchEnd(e) {
|
||||
console.log(e);
|
||||
this.mycropper.touchEnd(e)
|
||||
},
|
||||
|
||||
getCropperImage() {
|
||||
console.warn("ontap: getCropImage")
|
||||
this.mycropper.getCropperImage((avatar) => {
|
||||
console.log(avatar);
|
||||
if (avatar) {
|
||||
console.info("avatar");
|
||||
console.log(avatar);
|
||||
app.client.upload_avatar({
|
||||
avatar_path: avatar,
|
||||
success: res=>{
|
||||
console.log("upload avatar success");
|
||||
console.log(res);
|
||||
},
|
||||
fail: error=>{
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error('获取图片失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
uploadTap() {
|
||||
const self = this
|
||||
|
||||
wx.chooseImage({
|
||||
count: 1,
|
||||
success(res) {
|
||||
const src = res.tempFilePaths[0]
|
||||
self.mycropper.pushOrign(src)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onLoad(option) {
|
||||
const {cropperOpt} = this.data
|
||||
const {src} = option
|
||||
|
||||
if (src) {
|
||||
Object.assign(cropperOpt, {src})
|
||||
this.mycropper = new WeCropper(cropperOpt);
|
||||
this.mycropper
|
||||
.on('ready', function (ctx) {
|
||||
console.info("ready");
|
||||
console.info(ctx);
|
||||
})
|
||||
.on('beforeImageLoad', (ctx) => {
|
||||
console.info("beforeImageLoad");
|
||||
wx.showToast({
|
||||
title: '上传中',
|
||||
icon: 'loading',
|
||||
duration: 3000
|
||||
})
|
||||
})
|
||||
.on('imageLoad', (ctx) => {
|
||||
console.info("imageLoad")
|
||||
wx.hideToast()
|
||||
})
|
||||
.on('beforeDraw', (ctx, instance) => {
|
||||
console.log(`before canvas draw,i can do something`)
|
||||
console.log(`current canvas context:`, ctx)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "设置头像"
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
<import src="/we-cropper/dist/we-cropper.wxml"/>
|
||||
<view class="cropper-wrapper">
|
||||
<template is="we-cropper" data="{{...cropperOpt}}" />
|
||||
<view class="operation flex-wrap">
|
||||
<button class="upload" bindtap="uploadTap">
|
||||
重新选择
|
||||
</button>
|
||||
<button type="primary" class="getCropperImage" bindtap="getCropperImage">
|
||||
确定
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
@ -0,0 +1,21 @@
|
||||
page{
|
||||
height: 100%
|
||||
}
|
||||
.cropper{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.operation{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.operation button{
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in new issue