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