wangxiaowei/wanjiashangchao-user
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化万家商超用户端仓库

Browse Source
This commit is contained in:
wangxiaowei
2025-04-30 14:04:34 +08:00
commit 022c640d89
425 changed files with 160005 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

334
pages/my/avatar-cropping/index.vue Normal file
View File

@ -0,0 +1,334 @@
<template>
<!-- 画布 start -->
<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"
></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"
></canvas>
</view>
<!-- 画布 end -->
<!-- 按钮 start -->
<view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }">
<!-- #ifdef H5 -->
<!-- <view class="upload" @tap="uploadTap">{{i18n['选择图片']}}</view> -->
<!-- #endif -->
<!-- #ifndef H5 -->
<!-- <view class="upload" @tap="uploadTap">{{i18n['重新选择']}}</view> -->
<!-- #endif -->
<view class="upload" @tap="uploadTap">重新选择</view>
<view class="getCropperImage" @tap="getCropperImage(false)">完成</view>
</view>
<!-- 按钮 end -->
<!-- 断网检测 start -->
<fu-notwork></fu-notwork>
<!-- 断网检测 end -->
</view>
</template>
<script>
// 引入裁剪js
import WeCropper from '../static/lib/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)'
};
}
}
},
data() {
return {
// 底部导航的高度
bottomNavHeight: 50,
// originWidth: 200,
// originHeight: 200,
width: 0, //屏幕宽度
height: 0, //屏幕高度
cropperOpt: {
id: 'cropper', //画布id
targetId: 'targetCropper', //画布事件源id
pixelRatio: 1, //设备像素密度
width: 0, //屏幕宽度
height: 0, //屏幕高度
scale: 2.5, //图片缩放倍数
zoom: 8, //缩放系数
cut: {
x: (this.width - this.rectWidth) / 2, //裁剪框宽度x坐标
y: (this.height - this.rectHeight) / 2, //裁剪框宽度y坐标
width: this.rectWidth, //裁剪框宽度
height: this.rectHeight //裁剪框高度
},
// 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色，
// mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)"
boundStyle: {
lineWidth: uni.upx2px(this.boundStyle.lineWidth), //宽度
mask: this.boundStyle.mask, //遮罩层颜色
color: this.boundStyle.borderColor //边框颜色
}
},
// 裁剪框和输出图片的尺寸，高度默认等于宽度
// 输出图片宽度，单位px
destWidth: this.rectWidth, //输出图片宽度
destHeight: this.rectHeight, //输出图片高度
// 裁剪框宽度，单位px
rectWidth: 200, //裁剪框宽度
rectHeight: 200, //裁剪框高度
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
fileType: 'jpg',
cropper: null //声明裁剪对象
};
},
/**
* @description 图片裁剪接收参数
* @param {Object} option
* @param {String} option.fileType 图片格式
* @param {String} option.myImgUrl 图片本地路径
* @param {String} option.rectHeight 图片裁剪框高度
* @param {String} option.rectWidth 图片裁剪框宽度
*/
onLoad(option) {
console.log('图片裁剪接受的参数==>', option);
// 获取手机宽高等信息
let rectInfo = uni.getSystemInfoSync();
this.width = rectInfo.windowWidth; //手机宽度
this.height = rectInfo.windowHeight - this.bottomNavHeight; //手机高度
console.log('width: '+this.width,'height: '+this.height)
this.cropperOpt.width = this.width; //手机宽度
this.cropperOpt.height = this.height; //手机高度
this.cropperOpt.pixelRatio = rectInfo.pixelRatio; //设备像素密度赋值
// 接收参数赋值
if (option.rectWidth && option.rectHeight) {
// 宽高参数如果超过了手机屏幕宽度,需要限制,否则生成的图片白屏
// 如果是宽度比高度大的图片 以最大宽度为准
// 如果是高度比宽度大的图片 以最大高度为准
let _scale = option.rectWidth / option.rectHeight;
let _width = Number(option.rectWidth);
let _height = Number(option.rectHeight);
if(_scale >= 1){
// 宽度为准
if(Number(option.rectWidth) >= this.width){
_width = this.width;
_height = option.rectHeight * _scale;
}
}else{
// 高度为准
if(Number(option.rectHeight) >= this.height){
_height = this.height;
_width = this.width * _scale;
}
}
let rectWidth = _width; //图片裁剪框宽度
let rectHeight = _height; //图片裁剪框高度
this.rectWidth = rectWidth;
this.rectHeight = rectHeight;
this.destWidth = rectWidth; //输出图片宽度
this.destHeight = rectHeight; //输出图片高度
console.log(`裁剪宽高==>${this.rectWidth},${this.rectHeight}，输出宽高==>${this.destWidth},${this.destHeight}`);
this.cropperOpt.cut = {
x: (this.width - rectWidth) / 2, //裁剪框宽度x坐标
y: (this.height - rectHeight) / 2, //裁剪框宽度y坐标
width: rectWidth, //图片裁剪框宽度
height: rectHeight //图片裁剪框高度
};
}
console.log('手机宽度',this.width)
console.log('手机高度',this.height)
console.log('设备像素密度赋值',this.cropperOpt.pixelRatio)
// 图片格式赋值
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'
});
setTimeout(() => {
this.cropper.pushOrign(option.myImgUrl);
}, 200);
},
methods: {
/**
* @description 手指触摸开始事件
* @param {Object} e 事件对象
*/
touchStart(e) {
this.cropper.touchStart(e);
},
/**
* @description 手指触摸移动事件
* @param {Object} e 事件对象
*/
touchMove(e) {
this.cropper.touchMove(e);
},
/**
* @description 手指触摸开结束事件
* @param {Object} e 事件对象
*/
touchEnd(e) {
this.cropper.touchEnd(e);
},
/**
* @description 裁剪完成完成事件
*/
getCropperImage() {
let cropper_opt = {
destHeight: Number(this.destHeight), // uni.canvasToTempFilePath要求这些参数为数值 输出图片高度
destWidth: Number(this.destWidth), // 输出图片宽度
fileType: this.fileType //输出图片类型
};
// canvas生成图片
this.cropper.getCropperImage(cropper_opt, (path, err) => {
console.log('export image path',path);
console.log('export image err',err);
// 生成图片错误提示
if (err) {
uni.showModal({
title: this.i18n['温馨提示'],
content: err.message
});
} else {
// 裁剪完成推送裁剪后的path并返回上一页
uni.$emit('uPicCropper', path);
uni.navigateBack({
delta: 1
});
}
});
},
/**
* @description 重新选择图片
*/
uploadTap() {
let self = this;
uni.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success(res) {
// 获取选择图片之后的图片本地路径
let src = res.tempFilePaths[0];
// 获取裁剪图片资源后，给data添加src属性及其值
self.cropper.pushOrign(src);
}
});
}
}
};
</script>
<style scoped>
/* nvue不能用标签命名样式 */
/* #ifndef APP-NVUE */
image {
display: inline-block;
/* 解决图片加载时可能会瞬间变形的问题 */
will-change: transform;
}
/* 在weex，也即nvue中，所有元素默认为border-box */
view,
text {
box-sizing: border-box;
}
/* #endif */
/* 裁剪样式 start */
.content {
background-color: #000000;
height: 100vh;
/* background: rgba(255, 255, 255, 1); */
}
.cropper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999999999999;
}
.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;
font-size: 28rpx;
}
.cropper-buttons .upload,
.cropper-buttons .getCropperImage {
width: 50%;
text-align: center;
}
.cropper-buttons .upload {
text-align: left;
padding-left: 50rpx;
width: 180rpx;
}
.cropper-buttons .getCropperImage {
text-align: right;
padding-right: 50rpx;
width: 160rpx;
}
/* 裁剪样式 end */
</style>