wangfukang
3 years ago
2 changed files with 328 additions and 3 deletions
@ -0,0 +1,324 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<view style="width:100%;height:500rpx;"> |
||||
|
<!-- <image-cropper id="image-cropper" @load="cropperload" @imageload="loadimage" @tapcut="clickcut" :limit_move="{{limit_move}}" :disable_rotate="{{disable_rotate}}" :width="{{width}}" :height="{{height}}" :imgSrc="{{src}}" :angle="{{angle}}" :disable_width="{{disable_width}}" :max_width="{{max_width}}" :max_height="{{max_height}}" :disable_height="{{disable_height}}" :disable_ratio="{{disable_ratio}}"> |
||||
|
</image-cropper> --> |
||||
|
</view> |
||||
|
<text class="hint">点击中间裁剪框可查看裁剪后的图片</text> |
||||
|
<view class='bottom'> |
||||
|
<button @tap='submit'>确定</button> |
||||
|
<button class="button" @touchstart='rotate' @touchend='end' data-type="rotate">旋转</button> |
||||
|
<button class="button" @tap='upload'>上传</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
src: '', |
||||
|
width: 250, //宽度 |
||||
|
height: 250, //高度 |
||||
|
max_width: 1920, |
||||
|
max_height: 1080, |
||||
|
disable_rotate: true, //是否禁用旋转 |
||||
|
disable_ratio: true, //锁定比例 |
||||
|
limit_move: true, //是否限制移动 |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
let that = this; |
||||
|
this.cropper = this.selectComponent("#image-cropper"); |
||||
|
this.src= options.imgSrc |
||||
|
// uni.getImageInfo({ |
||||
|
// src: options.imgSrc, |
||||
|
// success(res) { |
||||
|
// that.height = res.height |
||||
|
// that.width = res.width |
||||
|
// that.max_width = res.width |
||||
|
// that.max_height = res.height |
||||
|
// }, |
||||
|
// fail(err) { |
||||
|
// console.error('获取图片信息失败:', err); |
||||
|
// } |
||||
|
// }); |
||||
|
// console.log('宽',this.width) |
||||
|
// console.log('高',this.height) |
||||
|
if(!options.imgSrc){ |
||||
|
this.cropper.upload(); //上传图片 |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
cropperload(e) { |
||||
|
console.log('cropper加载完成'); |
||||
|
}, |
||||
|
loadimage(e) { |
||||
|
wx.hideLoading(); |
||||
|
console.log('图片'); |
||||
|
this.cropper.imgReset(); |
||||
|
}, |
||||
|
clickcut(e) { |
||||
|
console.log(e.detail); |
||||
|
//图片预览 |
||||
|
wx.previewImage({ |
||||
|
current: e.detail.url, // 当前显示图片的http链接 |
||||
|
urls: [e.detail.url] // 需要预览的图片http链接列表 |
||||
|
}) |
||||
|
}, |
||||
|
upload() { |
||||
|
let that = this; |
||||
|
wx.chooseImage({ |
||||
|
count: 1, |
||||
|
sizeType: ['original', 'compressed'], |
||||
|
sourceType: ['album', 'camera'], |
||||
|
success(res) { |
||||
|
wx.showLoading({ |
||||
|
title: '加载中', |
||||
|
}) |
||||
|
const tempFilePaths = res.tempFilePaths[0]; |
||||
|
//重置图片角度、缩放、位置 |
||||
|
that.cropper.imgReset(); |
||||
|
that.src= tempFilePaths |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
setWidth(e) { |
||||
|
|
||||
|
this.width= e.detail.value < 10 ? 10 : e.detail.value |
||||
|
|
||||
|
|
||||
|
this.cut_left= this.cropper.data.cut_left |
||||
|
|
||||
|
}, |
||||
|
setHeight(e) { |
||||
|
|
||||
|
this.height= e.detail.value < 10 ? 10 : e.detail.value |
||||
|
|
||||
|
|
||||
|
this.cut_top= this.cropper.data.cut_top |
||||
|
|
||||
|
}, |
||||
|
switchChangeDisableRatio(e) { |
||||
|
//设置宽度之后使剪裁框居中 |
||||
|
|
||||
|
this.disable_ratio= e.detail.value |
||||
|
|
||||
|
}, |
||||
|
setCutTop(e) { |
||||
|
|
||||
|
this.cut_top= e.detail.value |
||||
|
|
||||
|
|
||||
|
this.cut_top= this.cropper.data.cut_top |
||||
|
|
||||
|
}, |
||||
|
setCutLeft(e) { |
||||
|
|
||||
|
this.cut_left= e.detail.value |
||||
|
|
||||
|
|
||||
|
this.cut_left= this.cropper.data.cut_left |
||||
|
|
||||
|
}, |
||||
|
switchChangeDisableRotate(e) { |
||||
|
//开启旋转的同时不限制移动 |
||||
|
if (!e.detail.value) { |
||||
|
|
||||
|
this.limit_move= false, |
||||
|
this.disable_rotate= e.detail.value |
||||
|
|
||||
|
} else { |
||||
|
|
||||
|
this.disable_rotate= e.detail.value |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
switchChangeLimitMove(e) { |
||||
|
//限制移动的同时锁定旋转 |
||||
|
if (e.detail.value) { |
||||
|
|
||||
|
this.disable_rotate= true |
||||
|
|
||||
|
} |
||||
|
this.cropper.setLimitMove(e.detail.value); |
||||
|
}, |
||||
|
switchChangeDisableWidth(e) { |
||||
|
|
||||
|
this.disable_width= e.detail.value |
||||
|
|
||||
|
}, |
||||
|
switchChangeDisableHeight(e) { |
||||
|
|
||||
|
this.disable_height= e.detail.value |
||||
|
|
||||
|
}, |
||||
|
submit() { |
||||
|
let that = this; |
||||
|
let hiver_token = uni.getStorageSync("hiver_token") |
||||
|
this.cropper.getImg((obj) => { |
||||
|
console.log(obj.url) |
||||
|
console.log(that.tui.getToken()) |
||||
|
uni.uploadFile({ |
||||
|
url: 'https://dev.xenjoyou.com/hiver/upload/file', |
||||
|
filePath: obj.url, |
||||
|
name: 'file', |
||||
|
header: { |
||||
|
"content-type": "multipart/form-data", |
||||
|
'accessToken': hiver_token |
||||
|
}, |
||||
|
formData: {}, |
||||
|
success: (uploadFileRes) => { |
||||
|
|
||||
|
let path = JSON.parse(uploadFileRes.data) |
||||
|
console.log(path) |
||||
|
// let data = { |
||||
|
// url:path.result, |
||||
|
// specNum:'' |
||||
|
// } |
||||
|
// that.productPicture.push(data) |
||||
|
let pages = getCurrentPages(); |
||||
|
let prevPage = pages[pages.length - 2]; |
||||
|
prevPage.$vm.uploadUrl = path.result |
||||
|
prevPage.$vm.uploadNum = 1 |
||||
|
//后端返回的地址，存入图片地址 |
||||
|
wx.navigateBack({ |
||||
|
delta: 1 |
||||
|
}) |
||||
|
},fail: (err) =>{ |
||||
|
uni.showToast({ |
||||
|
title: JSON.stringify(err), |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
rotate() { |
||||
|
//在用户旋转的基础上旋转90° |
||||
|
this.cropper.setAngle(this.cropper.data.angle += 90); |
||||
|
}, |
||||
|
top() { |
||||
|
this.data.top = setInterval(() => { |
||||
|
this.cropper.setTransform({ |
||||
|
y: -3 |
||||
|
}); |
||||
|
}, 1000 / 60) |
||||
|
}, |
||||
|
bottom() { |
||||
|
this.data.bottom = setInterval(() => { |
||||
|
this.cropper.setTransform({ |
||||
|
y: 3 |
||||
|
}); |
||||
|
}, 1000 / 60) |
||||
|
}, |
||||
|
left() { |
||||
|
this.data.left = setInterval(() => { |
||||
|
this.cropper.setTransform({ |
||||
|
x: -3 |
||||
|
}); |
||||
|
}, 1000 / 60) |
||||
|
}, |
||||
|
right() { |
||||
|
this.data.right = setInterval(() => { |
||||
|
this.cropper.setTransform({ |
||||
|
x: 3 |
||||
|
}); |
||||
|
}, 1000 / 60) |
||||
|
}, |
||||
|
narrow() { |
||||
|
this.data.narrow = setInterval(() => { |
||||
|
this.cropper.setTransform({ |
||||
|
scale: -0.02 |
||||
|
}); |
||||
|
}, 1000 / 60) |
||||
|
}, |
||||
|
enlarge() { |
||||
|
this.data.enlarge = setInterval(() => { |
||||
|
this.cropper.setTransform({ |
||||
|
scale: 0.02 |
||||
|
}); |
||||
|
}, 1000 / 60) |
||||
|
}, |
||||
|
end(e) { |
||||
|
clearInterval(this.data[e.currentTarget.dataset.type]); |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.top { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
top: 10rpx; |
||||
|
display: flex; |
||||
|
flex-flow: wrap; |
||||
|
z-index: 10; |
||||
|
color: white; |
||||
|
justify-content: space-around; |
||||
|
} |
||||
|
|
||||
|
.hint { |
||||
|
position: absolute; |
||||
|
top: 10rpx; |
||||
|
width: 100%; |
||||
|
font-size: 33rpx; |
||||
|
text-align: center; |
||||
|
color: white; |
||||
|
z-index: 10; |
||||
|
} |
||||
|
|
||||
|
page { |
||||
|
background: white; |
||||
|
} |
||||
|
|
||||
|
view { |
||||
|
font-size: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.bottom { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
bottom: 50rpx; |
||||
|
display: flex; |
||||
|
z-index: 10; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
flex-wrap: wrap; |
||||
|
height: 210rpx; |
||||
|
} |
||||
|
|
||||
|
button { |
||||
|
font-size: 27rpx; |
||||
|
z-index: 2; |
||||
|
padding: 0 20rpx; |
||||
|
height: 60rpx; |
||||
|
min-width: 70rpx; |
||||
|
margin: 0 4rpx; |
||||
|
} |
||||
|
|
||||
|
.input { |
||||
|
display: flex; |
||||
|
height: 50rpx; |
||||
|
width: 50%; |
||||
|
} |
||||
|
|
||||
|
.input>.label { |
||||
|
min-width: 150rpx; |
||||
|
font-size: 30rpx; |
||||
|
height: 50rpx; |
||||
|
line-height: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.input>input { |
||||
|
margin-left: 10rpx; |
||||
|
text-align: center; |
||||
|
max-width: 160rpx; |
||||
|
border: 1px solid rgb(255, 255, 255); |
||||
|
height: 50rpx; |
||||
|
line-height: 50rpx; |
||||
|
min-height: 50rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue