Skip to content

C
cust-app
Commit dc31837c authored by 罗林杰's avatar 罗林杰
Browse files
Options

修改图片上传裁剪

parent 2fd8e6a6
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1479 additions and 28 deletions
pages.json
View file @ dc31837c
......@@ -298,6 +298,16 @@
"backgroundColor": "#F4F5F9"
}
},
{
"path": "me/cropImage",
"style": {
"navigationBarTitleText": "",
"backgroundColorTop": "#F4F5F9",
"backgroundColorBottom": "#F4F5F9",
"navigationBarBackgroundColor": "#F4F5F9",
"backgroundColor": "#F4F5F9"
}
},
{
"path": "set/set",
"style": {
......
pagesme/me/cropImage.vue 0 → 100644
View file @ dc31837c
<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',color:cropperOpt.boundStyle.color}">
<view class="upload" @click="uploadTap">选择图片</view>
<view class="getCropperImage btn" :style="{ backgroundColor: cropperOpt.boundStyle.color }" @click="getCropperImage(false)">完成</view>
</view>
</view>
</template>
<script>
import WeCropper from '../../util/we-cropper';
export default {
props: {
boundStyle: {
type: Object,
default() {
return {
lineWidth: 4,
borderColor: 'rgb(245, 245, 245)',
mask: 'rgba(0, 0, 0, 0.35)'
};
}
}
},
data() {
return {
// 底部导航的高度
bottomNavHeight: 50,
originWidth: 200,
width: 0,
height: 0,
cropper: '',
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: {
color: '#04b00f',
mask: 'rgba(0,0,0,0.8)',
lineWidth: 1
}
},
// 裁剪框和输出图片的尺寸，高度默认等于宽度
// 输出图片宽度，单位px
destWidth: 200,
// 裁剪框宽度，单位px
rectWidth: 200,
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
fileType: 'jpg',
src: '' // 选择的图片路径，用于在点击确定时，判断是否选择了图片
};
},
onLoad(option) {
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 (option.destWidth) this.destWidth = Number(option.destWidth);
if (option.rectWidth) {
let rectWidth = Number(option.rectWidth);
this.cropperOpt.cut = {
x: (this.width - rectWidth) / 2,
y: (this.height - rectWidth) / 2,
width: rectWidth,
height: rectWidth
};
}
this.rectWidth = Number(option.rectWidth);
if (option.fileType) this.fileType = option.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'
});
uni.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: res => {
this.src = res.tempFilePaths[0];
// 获取裁剪图片资源后，给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.$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('Cropper',path);
uni.navigateBack();
}
}
});
},
uploadTap() {
const self = this;
uni.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: res => {
this.src = res.tempFilePaths[0];
// 获取裁剪图片资源后，给data添加src属性及其值
this.cropper.pushOrign(this.src);
}
});
}
}
};
</script>
<style scoped lang="scss">
.content {
background: rgb(47, 48, 49);
}
.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;
box-sizing: border-box;
font-size: 28rpx;
padding: 0 20rpx 50rpx;
}
.cropper-buttons .upload, .cropper-buttons .getCropperImage{
text-align: center;
}
.btn{
height: 30px;
line-height: 30px;
padding: 0 24rpx;
border-radius: 2px;
color: #ffffff;
}
</style>
\ No newline at end of file
pagesme/me/updateInformation.vue
View file @ dc31837c
......@@ -320,19 +320,17 @@ import {getOssUrl} from "../../api/article";
}
},
chooseImg(type) {
uni.chooseImage({
count: 1,
success: (res) => {
res.tempFilePaths.forEach((i) => {
uni.showToast({
title: '图片上传中',
icon: 'none',
uni.navigateTo({
url: "/pagesme/me/cropImage?destWidth=350&rectWidth=350&fileType=jpg"
})
//接收cropper页面传递的图片路径
uni.$on('Cropper', path => {
if(path){
uni.uploadFile({
url: this.$BASE_URL + '/common/fileUpload',
filePath: i,
filePath: path,
formData: {
file: i,
file: path,
temp: 'opmArticle',
bucket:'cust-91isoft'
},
......@@ -344,7 +342,6 @@ import {getOssUrl} from "../../api/article";
let res = JSON.parse(uploadFileRes.data)
this.updateImage(type,res.data.businessId);
},
});
});
}
});
......
util/we-cropper.js 0 → 100644
View file @ dc31837c
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment