21 changed files with 1421 additions and 63 deletions
-
2config/api.js
-
3config/site.config.js
-
9manifest.json
-
15pages.json
-
6pages/carEntry/signature/signature.vue
-
1pages/indexEntry/enroll/payment/payh5.vue
-
1pages/indexEntry/enroll/payment/payment.vue
-
12pages/indexEntry/findShcool/findShcool.vue
-
6pages/indexEntry/findShcool/screen/screen.vue
-
20pages/mineEntry/myOrder/detail/comp/refundInfo.vue
-
7pages/mineEntry/myOrder/detail/detail.vue
-
74pages/mineEntry/personaInfo/personaInfo.vue
-
9pages/mineEntry/refund/comp/myform.vue
-
16pages/mineEntry/refund/refund.vue
-
285pages/mineEntry/uAvatarCropper/uAvatarCropper - 副本.vue
-
260pages/mineEntry/uAvatarCropper/uAvatarCropper.vue
-
709pages/mineEntry/uAvatarCropper/weCropper.js
-
2pages/tabbar/index/comp/coachItem.vue
-
26pages/tabbar/index/index.vue
-
10pages/tabbar/mine/index.vue
-
7store/modules/user.js
@ -0,0 +1,285 @@ |
|||
<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); |
|||
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 '@/node_modules/uview-ui/libs/css/style.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; |
|||
// @include vue-flex; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
width: 100%; |
|||
background-color: #000; |
|||
} |
|||
|
|||
.cropper-buttons { |
|||
width: 100vw; |
|||
// @include vue-flex; |
|||
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> |
|||
@ -0,0 +1,260 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<view class="cropper-wrapper" style="height:617px"> |
|||
<canvas |
|||
class="cropper" |
|||
disable-scroll="true" |
|||
@touchstart="touchStart" |
|||
@touchmove="touchMove" |
|||
@touchend="touchEnd" |
|||
:style="{ width: cropperOpt.width, height: cropperOpt.height }" |
|||
canvas-id="cropper" |
|||
></canvas> |
|||
</view> |
|||
<view class="cropper-buttons"> |
|||
<view class="upload" @tap="uploadTap">重新选择</view> |
|||
<view class="getCropperImage" @tap="getCropperImage">确定</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import weCropper from './weCropper'; |
|||
const device = uni.getSystemInfoSync(); |
|||
const width = device.windowWidth; |
|||
const height = device.windowHeight - 50; |
|||
console.log(device); |
|||
import { uploadImgApi } from '@/config/utils.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
cropperOpt: { |
|||
id: 'cropper', |
|||
width: width, |
|||
height: height, |
|||
scale: 2.5, |
|||
zoom: 8, |
|||
cut: { |
|||
x: (width - 240) / 2, |
|||
y: (height - 320) / 2, |
|||
width: 240, |
|||
height: 320 |
|||
} |
|||
}, |
|||
weCropper: '' |
|||
}; |
|||
}, |
|||
methods: { |
|||
back() { |
|||
uni.redirectTo({ |
|||
url: '../infoDetail/infoDetail' |
|||
}); |
|||
}, |
|||
touchStart(e) { |
|||
this.weCropper.touchStart(e); |
|||
}, |
|||
touchMove(e) { |
|||
this.weCropper.touchMove(e); |
|||
}, |
|||
touchEnd(e) { |
|||
this.weCropper.touchEnd(e); |
|||
}, |
|||
convertBase64UrlToBlob(dataURI, type) { |
|||
var binary = atob(dataURI.split(',')[1]); |
|||
var array = []; |
|||
for (var i = 0; i < binary.length; i++) { |
|||
array.push(binary.charCodeAt(i)); |
|||
} |
|||
return new Blob([new Uint8Array(array)], { type: type }, { filename: '1111.jpg' }); |
|||
}, |
|||
blobToDataURL(blob) { |
|||
var a = new FileReader(); |
|||
a.readAsDataURL(blob); //读取文件保存在result中 |
|||
a.onload = function(e) { |
|||
var getRes = e.target.result; //读取的结果在result中 |
|||
console.log(getRes); |
|||
}; |
|||
}, |
|||
getCropperImage() { |
|||
console.log('点击了确定') |
|||
let _this = this; |
|||
//let pathurl = url + '/user/upload';上传服务器地址 |
|||
this.weCropper.getCropperImage(avatar => { |
|||
console.log('有图片吗？') |
|||
console.log(avatar) |
|||
if (avatar) { |
|||
// 获取到裁剪后的图片 |
|||
// 获取到裁剪后的图片 |
|||
uploadImgApi(avatar, 'avatar').then((res)=>{ |
|||
console.log(res) |
|||
uni.setStorageSync('avatarBase64', res) |
|||
uni.navigateBack() |
|||
}).catch(()=>{ |
|||
_this.$u.toast('上传失败，请重试') |
|||
}) |
|||
//下面是上传到服务器的方法 |
|||
// uni.uploadFile({ |
|||
// url: pathurl, |
|||
// filePath: avatar, |
|||
// name: 'file', |
|||
// formData: { token: token, userId: userId}, |
|||
// success: res => { |
|||
// console.log('uploadImage success, res is:', res); |
|||
// uni.showToast({ |
|||
// title: '上传成功', |
|||
// icon: 'success', |
|||
// duration: 1000 |
|||
// }); |
|||
// }, |
|||
// ail: err => { |
|||
// console.log('uploadImage fail', err); |
|||
// uni.showModal({ |
|||
// content: err.errMsg, |
|||
// showCancel: false |
|||
// }); |
|||
// uni.hideLoading(); |
|||
// }, |
|||
// complete: () => { |
|||
// console.log('complate'); |
|||
// } |
|||
// }); |
|||
} else { |
|||
console.log('获取图片失败，请稍后重试'); |
|||
} |
|||
}); |
|||
}, |
|||
uploadTap() { |
|||
const self = this; |
|||
|
|||
uni.chooseImage({ |
|||
count: 1, // 默认9 |
|||
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有 |
|||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 |
|||
success(res) { |
|||
let src = res.tempFilePaths[0]; |
|||
// 获取裁剪图片资源后，给data添加src属性及其值 |
|||
|
|||
self.weCropper.pushOrign(src); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
// do something |
|||
const cropperOpt = this.cropperOpt; |
|||
const src = option.src; |
|||
if (src) { |
|||
Object.assign(cropperOpt, { |
|||
src |
|||
}); |
|||
|
|||
this.weCropper = new weCropper(cropperOpt) |
|||
.on('ready', function(ctx) {}) |
|||
.on('beforeImageLoad', ctx => { |
|||
uni.showToast({ |
|||
title: '上传中', |
|||
icon: 'loading', |
|||
duration: 3000 |
|||
}); |
|||
}) |
|||
.on('imageLoad', ctx => { |
|||
uni.hideToast(); |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
.content { |
|||
background: rgba(255, 255, 255, 1); |
|||
} |
|||
|
|||
.head-list { |
|||
height: 43px; |
|||
width: 100%; |
|||
background: #ffffff; |
|||
justify-content: center; |
|||
align-items: center; |
|||
display: flex; |
|||
border-bottom: 1px solid rgba(244, 244, 244, 1); |
|||
} |
|||
|
|||
.head-info { |
|||
text-align: center; |
|||
font-size: 18px; |
|||
color: #000000; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.save-box { |
|||
position: absolute; |
|||
right: 0px; |
|||
width: 50px; |
|||
height: 43px; |
|||
line-height: 43px; |
|||
} |
|||
|
|||
.save { |
|||
color: rgba(98, 111, 252, 1); |
|||
font-size: 16px; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
.icon-back { |
|||
margin-top: 11px; |
|||
width: 10px; |
|||
height: 18px; |
|||
color: #000000; |
|||
margin-left: 6px; |
|||
} |
|||
|
|||
.icon-back-box { |
|||
display: block; |
|||
position: absolute; |
|||
left: 6px; |
|||
height: 43px; |
|||
width: 30px; |
|||
align-items: center; |
|||
} |
|||
.cropper { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.cropper-buttons { |
|||
background-color: rgba(0, 0, 0, 0.95); |
|||
color: #04b00f; |
|||
} |
|||
.cropper-wrapper { |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
width: 100%; |
|||
background-color: #F0F0F0; |
|||
} |
|||
|
|||
.cropper-buttons { |
|||
width: 100vw; |
|||
height: 50px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
line-height: 50px; |
|||
} |
|||
|
|||
.cropper-buttons .upload, |
|||
.cropper-buttons .getCropperImage { |
|||
width: 50%; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,709 @@ |
|||
(function(global, factory) { |
|||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : |
|||
typeof define === 'function' && define.amd ? define(factory) : |
|||
(global.weCropper = factory()); |
|||
}(this, (function() { |
|||
'use strict'; |
|||
|
|||
/** |
|||
* Created by sail on 2017/6/11. |
|||
*/ |
|||
var device = void 0; |
|||
var TOUCH_STATE = ['touchstarted', 'touchmoved', 'touchended']; |
|||
|
|||
function firstLetterUpper(str) { |
|||
return str.charAt(0).toUpperCase() + str.slice(1); |
|||
} |
|||
|
|||
function setTouchState(instance) { |
|||
for (var _len = arguments.length, arg = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { |
|||
arg[_key - 1] = arguments[_key]; |
|||
} |
|||
|
|||
TOUCH_STATE.forEach(function(key, i) { |
|||
if (arg[i] !== undefined) { |
|||
instance[key] = arg[i]; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function validator(instance, o) { |
|||
Object.defineProperties(instance, o); |
|||
} |
|||
|
|||
function getDevice() { |
|||
if (!device) { |
|||
device = wx.getSystemInfoSync(); |
|||
} |
|||
return device; |
|||
} |
|||
|
|||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function(obj) { |
|||
return typeof obj; |
|||
} : function(obj) { |
|||
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; |
|||
}; |
|||
|
|||
|
|||
|
|||
|
|||
var classCallCheck = function(instance, Constructor) { |
|||
if (!(instance instanceof Constructor)) { |
|||
throw new TypeError("Cannot call a class as a function"); |
|||
} |
|||
}; |
|||
|
|||
var createClass = function() { |
|||
function defineProperties(target, props) { |
|||
for (var i = 0; i < props.length; i++) { |
|||
var descriptor = props[i]; |
|||
descriptor.enumerable = descriptor.enumerable || false; |
|||
descriptor.configurable = true; |
|||
if ("value" in descriptor) descriptor.writable = true; |
|||
Object.defineProperty(target, descriptor.key, descriptor); |
|||
} |
|||
} |
|||
|
|||
return function(Constructor, protoProps, staticProps) { |
|||
if (protoProps) defineProperties(Constructor.prototype, protoProps); |
|||
if (staticProps) defineProperties(Constructor, staticProps); |
|||
return Constructor; |
|||
}; |
|||
}(); |
|||
|
|||
|
|||
|
|||
|
|||
var slicedToArray = function() { |
|||
function sliceIterator(arr, i) { |
|||
var _arr = []; |
|||
var _n = true; |
|||
var _d = false; |
|||
var _e = undefined; |
|||
|
|||
try { |
|||
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { |
|||
_arr.push(_s.value); |
|||
|
|||
if (i && _arr.length === i) break; |
|||
} |
|||
} catch (err) { |
|||
_d = true; |
|||
_e = err; |
|||
} finally { |
|||
try { |
|||
if (!_n && _i["return"]) _i["return"](); |
|||
} finally { |
|||
if (_d) throw _e; |
|||
} |
|||
} |
|||
|
|||
return _arr; |
|||
} |
|||
|
|||
return function(arr, i) { |
|||
if (Array.isArray(arr)) { |
|||
return arr; |
|||
} else if (Symbol.iterator in Object(arr)) { |
|||
return sliceIterator(arr, i); |
|||
} else { |
|||
throw new TypeError("Invalid attempt to destructure non-iterable instance"); |
|||
} |
|||
}; |
|||
}(); |
|||
|
|||
var tmp = {}; |
|||
|
|||
var DEFAULT = { |
|||
id: { |
|||
default: 'cropper', |
|||
get: function get$$1() { |
|||
return tmp.id; |
|||
}, |
|||
set: function set$$1(value) { |
|||
if (typeof value !== 'string') {} |
|||
tmp.id = value; |
|||
} |
|||
}, |
|||
width: { |
|||
default: 750, |
|||
get: function get$$1() { |
|||
return tmp.width; |
|||
}, |
|||
set: function set$$1(value) { |
|||
tmp.width = value; |
|||
} |
|||
}, |
|||
height: { |
|||
default: 750, |
|||
get: function get$$1() { |
|||
return tmp.height; |
|||
}, |
|||
set: function set$$1(value) { |
|||
tmp.height = value; |
|||
} |
|||
}, |
|||
scale: { |
|||
default: 2.5, |
|||
get: function get$$1() { |
|||
return tmp.scale; |
|||
}, |
|||
set: function set$$1(value) { |
|||
tmp.scale = value; |
|||
} |
|||
}, |
|||
zoom: { |
|||
default: 5, |
|||
get: function get$$1() { |
|||
return tmp.zoom; |
|||
}, |
|||
set: function set$$1(value) { |
|||
tmp.zoom = value; |
|||
} |
|||
}, |
|||
src: { |
|||
default: 'cropper', |
|||
get: function get$$1() { |
|||
return tmp.src; |
|||
}, |
|||
set: function set$$1(value) { |
|||
tmp.src = value; |
|||
} |
|||
}, |
|||
cut: { |
|||
default: {}, |
|||
get: function get$$1() { |
|||
return tmp.cut; |
|||
}, |
|||
set: function set$$1(value) { |
|||
tmp.cut = value; |
|||
} |
|||
}, |
|||
onReady: { |
|||
default: null, |
|||
get: function get$$1() { |
|||
return tmp.ready; |
|||
}, |
|||
set: function set$$1(value) { |
|||
tmp.ready = value; |
|||
} |
|||
}, |
|||
onBeforeImageLoad: { |
|||
default: null, |
|||
get: function get$$1() { |
|||
return tmp.beforeImageLoad; |
|||
}, |
|||
set: function set$$1(value) { |
|||
tmp.beforeImageLoad = value; |
|||
} |
|||
}, |
|||
onImageLoad: { |
|||
default: null, |
|||
get: function get$$1() { |
|||
return tmp.imageLoad; |
|||
}, |
|||
set: function set$$1(value) { |
|||
tmp.imageLoad = value; |
|||
} |
|||
}, |
|||
onBeforeDraw: { |
|||
default: null, |
|||
get: function get$$1() { |
|||
return tmp.beforeDraw; |
|||
}, |
|||
set: function set$$1(value) { |
|||
tmp.beforeDraw = value; |
|||
} |
|||
} |
|||
}; |
|||
|
|||
/** |
|||
* Created by sail on 2017/6/11. |
|||
*/ |
|||
function prepare() { |
|||
var self = this; |
|||
|
|||
var _getDevice = getDevice(), |
|||
windowWidth = _getDevice.windowWidth; |
|||
|
|||
self.attachPage = function() { |
|||
var pages = getCurrentPages |
|||
// 获取到当前page上下文
|
|||
(); |
|||
var pageContext = pages[pages.length - 1]; |
|||
// 把this依附在Page上下文的wecropper属性上，便于在page钩子函数中访问
|
|||
pageContext.wecropper = self; |
|||
}; |
|||
|
|||
self.createCtx = function() { |
|||
var id = self.id; |
|||
|
|||
if (id) { |
|||
self.ctx = wx.createCanvasContext(id); |
|||
} |
|||
}; |
|||
|
|||
self.deviceRadio = windowWidth / 750; |
|||
self.deviceRadio=self.deviceRadio.toFixed(2) |
|||
} |
|||
|
|||
/** |
|||
* |
|||
*/ |
|||
function observer() { |
|||
var self = this; |
|||
|
|||
var EVENT_TYPE = ['ready', 'beforeImageLoad', 'beforeDraw', 'imageLoad']; |
|||
|
|||
self.on = function(event, fn) { |
|||
if (EVENT_TYPE.indexOf(event) > -1) { |
|||
if (typeof fn === 'function') { |
|||
event === 'ready' ? fn(self) : self['on' + firstLetterUpper(event)] = fn; |
|||
} |
|||
} |
|||
return self; |
|||
}; |
|||
} |
|||
|
|||
/** |
|||
* Created by sail on 2017/6/11. |
|||
*/ |
|||
function methods() { |
|||
var self = this; |
|||
|
|||
var deviceRadio = self.deviceRadio; |
|||
console.log(JSON.stringify(self)); |
|||
|
|||
var boundWidth = self.width; // 裁剪框默认宽度，即整个画布宽度
|
|||
var boundHeight = self.height; // 裁剪框默认高度，即整个画布高度
|
|||
var _self$cut = self.cut, |
|||
_self$cut$x = _self$cut.x, |
|||
x = _self$cut$x === undefined ? 0 : _self$cut$x, |
|||
_self$cut$y = _self$cut.y, |
|||
y = _self$cut$y === undefined ? 0 : _self$cut$y, |
|||
_self$cut$width = _self$cut.width, |
|||
width = _self$cut$width === undefined ? boundWidth : _self$cut$width, |
|||
_self$cut$height = _self$cut.height, |
|||
height = _self$cut$height === undefined ? boundHeight : _self$cut$height; |
|||
|
|||
|
|||
self.updateCanvas = function() { |
|||
if (self.croperTarget) { |
|||
|
|||
// 画布绘制图片
|
|||
self.ctx.drawImage(self.croperTarget, self.imgLeft, self.imgTop, self.scaleWidth, self.scaleHeight); |
|||
} |
|||
typeof self.onBeforeDraw === 'function' && self.onBeforeDraw(self.ctx, self); |
|||
|
|||
self.setBoundStyle // 设置边界样式
|
|||
(); |
|||
self.ctx.draw(); |
|||
return self; |
|||
}; |
|||
|
|||
self.pushOrign = function(src) { |
|||
self.src = src; |
|||
|
|||
typeof self.onBeforeImageLoad === 'function' && self.onBeforeImageLoad(self.ctx, self); |
|||
|
|||
uni.getImageInfo({ |
|||
src: src, |
|||
success: function success(res) { |
|||
var innerAspectRadio = res.width / res.height; |
|||
self.croperTarget = res.path||src; |
|||
if (innerAspectRadio < width / height) { |
|||
self.rectX = x; |
|||
self.baseWidth = width; |
|||
self.baseHeight = width / innerAspectRadio; |
|||
self.rectY = y - Math.abs((height - self.baseHeight) / 2); |
|||
} else { |
|||
self.rectY = y; |
|||
self.baseWidth = height * innerAspectRadio; |
|||
self.baseHeight = height; |
|||
self.rectX = x - Math.abs((width - self.baseWidth) / 2); |
|||
} |
|||
|
|||
self.imgLeft = self.rectX; |
|||
self.imgTop = self.rectY; |
|||
self.scaleWidth = self.baseWidth; |
|||
self.scaleHeight = self.baseHeight; |
|||
|
|||
self.updateCanvas(); |
|||
|
|||
typeof self.onImageLoad === 'function' && self.onImageLoad(self.ctx, self); |
|||
} |
|||
}); |
|||
|
|||
self.update(); |
|||
return self; |
|||
}; |
|||
|
|||
self.getCropperImage = function() { |
|||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { |
|||
args[_key] = arguments[_key]; |
|||
} |
|||
|
|||
var id = self.id; |
|||
|
|||
var ARG_TYPE = toString.call(args[0]); |
|||
switch (ARG_TYPE) { |
|||
case '[object Object]': |
|||
var _args$0$quality = args[0].quality, |
|||
quality = _args$0$quality === undefined ? 10 : _args$0$quality; |
|||
console.log("quality--"+quality); |
|||
|
|||
uni.canvasToTempFilePath({ |
|||
canvasId: id, |
|||
x: x, |
|||
y: y, |
|||
width: width, |
|||
height: height, |
|||
destWidth: width * quality / (deviceRadio * 10), |
|||
destHeight: height * quality / (deviceRadio * 10), |
|||
success: function success(res) { |
|||
console.log(res); |
|||
typeof args[args.length - 1] === 'function' && args[args.length - 1](res.tempFilePath); |
|||
} |
|||
}); |
|||
break; |
|||
case '[object Function]': |
|||
uni.canvasToTempFilePath({ |
|||
canvasId: id, |
|||
x: x, |
|||
y: y, |
|||
fileType:"jpg", |
|||
width: width, |
|||
height: height, |
|||
destWidth: width , |
|||
destHeight: height, |
|||
success: function success(res) { |
|||
|
|||
typeof args[args.length - 1] === 'function' && args[args.length - 1](res.tempFilePath); |
|||
} |
|||
}); |
|||
break; |
|||
} |
|||
|
|||
return self; |
|||
}; |
|||
} |
|||
|
|||
/** |
|||
* Created by sail on 2017/6/11. |
|||
*/ |
|||
function update() { |
|||
var self = this; |
|||
if (!self.src) return; |
|||
|
|||
self.__oneTouchStart = function(touch) { |
|||
self.touchX0 = touch.x; |
|||
self.touchY0 = touch.y; |
|||
}; |
|||
|
|||
self.__oneTouchMove = function(touch) { |
|||
var xMove = void 0, |
|||
yMove = void 0; |
|||
//计算单指移动的距离
|
|||
if (self.touchended) { |
|||
return self.updateCanvas(); |
|||
} |
|||
xMove = touch.x - self.touchX0; |
|||
yMove = touch.y - self.touchY0; |
|||
|
|||
var imgLeft = self.rectX + xMove; |
|||
var imgTop = self.rectY + yMove; |
|||
|
|||
self.outsideBound(imgLeft, imgTop); |
|||
|
|||
self.updateCanvas(); |
|||
}; |
|||
|
|||
self.__twoTouchStart = function(touch0, touch1) { |
|||
var xMove = void 0, |
|||
yMove = void 0, |
|||
oldDistance = void 0; |
|||
|
|||
self.touchX1 = self.rectX + self.scaleWidth / 2; |
|||
self.touchY1 = self.rectY + self.scaleHeight / 2; |
|||
|
|||
//计算两指距离
|
|||
xMove = touch1.x - touch0.x; |
|||
yMove = touch1.y - touch0.y; |
|||
oldDistance = Math.sqrt(xMove * xMove + yMove * yMove); |
|||
|
|||
self.oldDistance = oldDistance; |
|||
}; |
|||
|
|||
self.__twoTouchMove = function(touch0, touch1) { |
|||
var xMove = void 0, |
|||
yMove = void 0, |
|||
newDistance = void 0; |
|||
var scale = self.scale, |
|||
zoom = self.zoom; |
|||
// 计算二指最新距离
|
|||
|
|||
xMove = touch1.x - touch0.x; |
|||
yMove = touch1.y - touch0.y; |
|||
newDistance = Math.sqrt(xMove * xMove + yMove * yMove |
|||
|
|||
// 使用0.005的缩放倍数具有良好的缩放体验
|
|||
); |
|||
self.newScale = self.oldScale + 0.001 * zoom * (newDistance - self.oldDistance); |
|||
|
|||
// 设定缩放范围
|
|||
self.newScale <= 1 && (self.newScale = 1); |
|||
self.newScale >= scale && (self.newScale = scale); |
|||
|
|||
self.scaleWidth = self.newScale * self.baseWidth; |
|||
self.scaleHeight = self.newScale * self.baseHeight; |
|||
var imgLeft = self.touchX1 - self.scaleWidth / 2; |
|||
var imgTop = self.touchY1 - self.scaleHeight / 2; |
|||
|
|||
self.outsideBound(imgLeft, imgTop); |
|||
|
|||
self.updateCanvas(); |
|||
}; |
|||
|
|||
self.__xtouchEnd = function() { |
|||
self.oldScale = self.newScale; |
|||
self.rectX = self.imgLeft; |
|||
self.rectY = self.imgTop; |
|||
}; |
|||
} |
|||
|
|||
/** |
|||
* Created by sail on 2017/6/11. |
|||
*/ |
|||
|
|||
var handle = { |
|||
// 图片手势初始监测
|
|||
touchStart: function touchStart(e) { |
|||
var self = this; |
|||
var _e$touches = slicedToArray(e.touches, 2), |
|||
touch0 = _e$touches[0], |
|||
touch1 = _e$touches[1]; |
|||
|
|||
console.log(JSON.stringify(touch1)); |
|||
if(!touch0.x){ |
|||
touch0.x=touch0.clientX; |
|||
touch0.y=touch0.clientY; |
|||
if(touch1){ |
|||
touch1.x=touch1.clientX; |
|||
touch1.y=touch1.clientY; |
|||
} |
|||
} |
|||
|
|||
setTouchState(self, true, null, null |
|||
|
|||
//计算第一个触摸点的位置，并参照改点进行缩放
|
|||
); |
|||
self.__oneTouchStart(touch0 |
|||
|
|||
// 两指手势触发
|
|||
); |
|||
if (e.touches.length >= 2) { |
|||
self.__twoTouchStart(touch0, touch1); |
|||
} |
|||
}, |
|||
|
|||
|
|||
// 图片手势动态缩放
|
|||
touchMove: function touchMove(e) { |
|||
var self = this; |
|||
|
|||
var _e$touches2 = slicedToArray(e.touches, 2), |
|||
touch0 = _e$touches2[0], |
|||
touch1 = _e$touches2[1]; |
|||
if(!touch0.x){ |
|||
touch0.x=touch0.clientX; |
|||
touch0.y=touch0.clientY; |
|||
if(touch1){ |
|||
touch1.x=touch1.clientX; |
|||
touch1.y=touch1.clientY; |
|||
} |
|||
} |
|||
setTouchState(self, null, true |
|||
|
|||
// 单指手势时触发
|
|||
); |
|||
if (e.touches.length === 1) { |
|||
self.__oneTouchMove(touch0); |
|||
} |
|||
// 两指手势触发
|
|||
if (e.touches.length >= 2) { |
|||
self.__twoTouchMove(touch0, touch1); |
|||
} |
|||
}, |
|||
touchEnd: function touchEnd(e) { |
|||
var self = this; |
|||
|
|||
setTouchState(self, false, false, true); |
|||
self.__xtouchEnd(); |
|||
} |
|||
}; |
|||
|
|||
/** |
|||
* Created by sail on 1017/6/12. |
|||
*/ |
|||
function cut() { |
|||
var self = this; |
|||
var deviceRadio = self.deviceRadio; |
|||
|
|||
var boundWidth = self.width; // 裁剪框默认宽度，即整个画布宽度
|
|||
var boundHeight = self.height; |
|||
// 裁剪框默认高度，即整个画布高度
|
|||
var _self$cut = self.cut, |
|||
_self$cut$x = _self$cut.x, |
|||
x = _self$cut$x === undefined ? 0 : _self$cut$x, |
|||
_self$cut$y = _self$cut.y, |
|||
y = _self$cut$y === undefined ? 0 : _self$cut$y, |
|||
_self$cut$width = _self$cut.width, |
|||
width = _self$cut$width === undefined ? boundWidth : _self$cut$width, |
|||
_self$cut$height = _self$cut.height, |
|||
height = _self$cut$height === undefined ? boundHeight : _self$cut$height; |
|||
|
|||
/** |
|||
* 设置边界 |
|||
* @param imgLeft 图片左上角横坐标值 |
|||
* @param imgTop 图片左上角纵坐标值 |
|||
*/ |
|||
|
|||
self.outsideBound = function(imgLeft, imgTop) { |
|||
self.imgLeft = imgLeft >= x ? x : self.scaleWidth + imgLeft - x <= width ? x + width - self.scaleWidth : imgLeft; |
|||
|
|||
self.imgTop = imgTop >= y ? y : self.scaleHeight + imgTop - y <= height ? y + height - self.scaleHeight : imgTop; |
|||
}; |
|||
|
|||
/** |
|||
* 设置边界样式 |
|||
* @param color 边界颜色 |
|||
*/ |
|||
self.setBoundStyle = function() { |
|||
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, |
|||
_ref$color = _ref.color, |
|||
color = _ref$color === undefined ? '#04b00f' : _ref$color, |
|||
_ref$mask = _ref.mask, |
|||
mask = _ref$mask === undefined ? 'rgba(0, 0, 0, 0.3)' : _ref$mask, |
|||
_ref$lineWidth = _ref.lineWidth, |
|||
lineWidth = _ref$lineWidth === undefined ? 1 : _ref$lineWidth; |
|||
|
|||
// 绘制半透明层
|
|||
self.ctx.beginPath(); |
|||
self.ctx.setFillStyle(mask); |
|||
self.ctx.fillRect(0, 0, x, boundHeight); |
|||
self.ctx.fillRect(x, 0, width, y); |
|||
self.ctx.fillRect(x, y + height, width, boundHeight - y - height); |
|||
self.ctx.fillRect(x + width, 0, boundWidth - x - width, boundHeight); |
|||
self.ctx.fill |
|||
|
|||
// 设置边界左上角样式
|
|||
// 为使边界样式处于边界外边缘，此时x、y均要减少lineWidth
|
|||
(); |
|||
self.ctx.beginPath(); |
|||
self.ctx.setStrokeStyle(color); |
|||
self.ctx.setLineWidth(lineWidth); |
|||
self.ctx.moveTo(x - lineWidth, y + 10 - lineWidth); |
|||
self.ctx.lineTo(x - lineWidth, y - lineWidth); |
|||
self.ctx.lineTo(x + 10 - lineWidth, y - lineWidth); |
|||
self.ctx.stroke |
|||
|
|||
// 设置边界左下角样式
|
|||
// 为使边界样式处于边界外边缘，此时x要减少lineWidth、y要增加lineWidth
|
|||
(); |
|||
self.ctx.beginPath(); |
|||
self.ctx.setStrokeStyle(color); |
|||
self.ctx.setLineWidth(lineWidth); |
|||
self.ctx.moveTo(x - lineWidth, y + height - 10 + lineWidth); |
|||
self.ctx.lineTo(x - lineWidth, y + height + lineWidth); |
|||
self.ctx.lineTo(x + 10 - lineWidth, y + height + lineWidth); |
|||
self.ctx.stroke |
|||
|
|||
// 设置边界右上角样式
|
|||
// 为使边界样式处于边界外边缘，此时x要增加lineWidth、y要减少lineWidth
|
|||
(); |
|||
self.ctx.beginPath(); |
|||
self.ctx.setStrokeStyle(color); |
|||
self.ctx.setLineWidth(lineWidth); |
|||
self.ctx.moveTo(x + width - 10 + lineWidth, y - lineWidth); |
|||
self.ctx.lineTo(x + width + lineWidth, y - lineWidth); |
|||
self.ctx.lineTo(x + width + lineWidth, y + 10 - lineWidth); |
|||
self.ctx.stroke |
|||
|
|||
// 设置边界右下角样式
|
|||
// 为使边界样式处于边界外边缘，此时x、y均要增加lineWidth
|
|||
(); |
|||
self.ctx.beginPath(); |
|||
self.ctx.setStrokeStyle(color); |
|||
self.ctx.setLineWidth(lineWidth); |
|||
self.ctx.moveTo(x + width + lineWidth, y + height - 10 + lineWidth); |
|||
self.ctx.lineTo(x + width + lineWidth, y + height + lineWidth); |
|||
self.ctx.lineTo(x + width - 10 + lineWidth, y + height + lineWidth); |
|||
self.ctx.stroke(); |
|||
}; |
|||
} |
|||
|
|||
var __version__ = '1.1.4'; |
|||
|
|||
var weCropper = function() { |
|||
function weCropper(params) { |
|||
classCallCheck(this, weCropper); |
|||
|
|||
var self = this; |
|||
var _default = {}; |
|||
|
|||
validator(self, DEFAULT); |
|||
|
|||
Object.keys(DEFAULT).forEach(function(key) { |
|||
_default[key] = DEFAULT[key].default; |
|||
}); |
|||
Object.assign(self, _default, params); |
|||
|
|||
self.prepare(); |
|||
self.attachPage(); |
|||
self.createCtx(); |
|||
self.observer(); |
|||
self.cutt(); |
|||
self.methods(); |
|||
self.init(); |
|||
self.update(); |
|||
|
|||
return self; |
|||
} |
|||
|
|||
createClass(weCropper, [{ |
|||
key: 'init', |
|||
value: function init() { |
|||
var self = this; |
|||
var src = self.src; |
|||
|
|||
|
|||
self.version = __version__; |
|||
|
|||
typeof self.onReady === 'function' && self.onReady(self.ctx, self); |
|||
|
|||
if (src) { |
|||
self.pushOrign(src); |
|||
} |
|||
setTouchState(self, false, false, false); |
|||
|
|||
self.oldScale = 1; |
|||
self.newScale = 1; |
|||
|
|||
return self; |
|||
} |
|||
}]); |
|||
return weCropper; |
|||
}(); |
|||
|
|||
Object.assign(weCropper.prototype, handle); |
|||
|
|||
|
|||
weCropper.prototype.prepare = prepare; |
|||
weCropper.prototype.observer = observer; |
|||
weCropper.prototype.methods = methods; |
|||
weCropper.prototype.cutt = cut; |
|||
weCropper.prototype.update = update; |
|||
|
|||
return weCropper; |
|||
|
|||
}))); |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue