<view>
<MS_BeautyModule-Camara ref="msCamara" ratio="9:16" style="width: 750rpx;height: 850rpx;"></MS_BeautyModule-Camara>
<text class="title">美颜类型</text>
<!-- 美颜种类盒子 -->
<scroll-view style="flex-direction: row;" scroll-x="true" scroll-left="20">
<view class="camear-type-box">
<view v-for="(item,index) in beautyIconArr" :key="index" class="camear-type-item"
@click="camearTypeChange(item,index)">
<image :src="beautyIconIndex == index ? item.iconCheckImage : item.iconImage" class="png"></image>
<view>
<text :class="beautyIconIndex == index ? 'camear-checked' : 'camear-defalut' ">{{item.title}}</text>
</view>
</view>
</view>
</scroll-view>
<text class="title">美颜效果</text>
<view class="numBox">
<!-- <view v-for="(item,index) in NumArr" :key="index" class="num" @click="getCurren(item,index)"
:class="numIndex == index ? 'active' : ''">
<text class="numItem" :class="numIndex == index ? 'colors' : ''">{{ item }}%</text>
</view> -->
<slider :value="NumValue" @changing="sliderChange" activeColor="#F47361" min="0" max="100" block-size="26"
block-color="rgba(244, 115, 97, 1)" />
<text class="numValue">{{ NumValue }}</text>
</view>
<button class="bth" @click="save"><text class="texts">保存</text></button>
</view>
</template>
<script>
let camaraModule = uni.requireNativePlugin("MS_BeautyModule-Controller");
camaraModule.initSdkContext({
'sdk_lic_path': 'assets:/28008-984-bc67466365e92c478557f2065c3a38f9.lic',
'sdk_face_model_path': 'assets:/facemode/ms_face240_v2.0.7.model',
'sdk_fake_face_model_path': 'assets:/facemode/fakeface.dat',
'sdk_make_up_model_path': 'assets:/facemode/makeup2_240_v2.1.0.dat',
'sdk_hand_model_path': 'assets:/facemode/ms_hand_v1.0.0.model',
'sdk_human_seg_model_path': 'assets:/facemode/ms_humanseg_v1.0.13.model',
});
//打开日志
camaraModule.openLog({
'log_open': true
});
export default {
data() {
return {
NumValue: 0,
beautyIconArr: [{
iconImage: '../../static/beauty-icon/icon-fuse.png',
iconCheckImage: '../../static/beauty-icon/icon-hot-fuse.png',
title: '美白',
type: 'AR Sense',
key: 'Beauty Whitening',
tp: 'float',
value: 0,
// curren: 0
},
{
iconImage: '../../static/beauty-icon/icon-hongrun.png',
iconCheckImage: '../../static/beauty-icon/icon-hot-hongrun.png',
title: '红润',
type: 'AR Sense',
key: 'Beauty Reddening',
tp: 'float',
value: 0,
// curren: 0
},
{
iconImage: '../../static/beauty-icon/icon-mopi.png',
iconCheckImage: '../../static/beauty-icon/icon-hot-mopi.png',
title: '磨皮',
type: 'AR Sense',
key: 'Beauty Strength',
tp: 'float',
value: 0,
// curren: 0
},
{
iconImage: '../../static/beauty-icon/icon-dayan.png',
iconCheckImage: '../../static/beauty-icon/icon-hot-dayan.png',
title: '大眼',
type: 'AR Sense',
key: 'Face Mesh Eye Size Degree',
tp: 'float',
value: 0,
// curren: 0
},
{
iconImage: '../../static/beauty-icon/icon-heiyanquan.png',
iconCheckImage: '../../static/beauty-icon/icon-hot-heiyanquan.png',
title: '黑眼圈',
type: 'AR Sense',
key: 'Advanced Beauty Remove Dark Circles Intensity',
tp: 'float',
value: 0,
// curren: 0
},
{
iconImage: '../../static/beauty-icon/icon-zhailian.png',
iconCheckImage: '../../static/beauty-icon/icon-hot-zhailian.png',
title: '瘦脸',
type: 'AR Sense',
key: 'Face Mesh Face Size Degree',
tp: 'float',
value: 0,
// curren: 0
},
{
iconImage: '../../static/beauty-icon/icon-xiaolian.png',
iconCheckImage: '../../static/beauty-icon/icon-hot-xiaolian.png',
title: '小脸',
type: 'AR Sense',
key: 'Face Mesh Face Length Degree',
tp: 'float',
value: 0,
// curren: 0
},
{
iconImage: '../../static/beauty-icon/icon-xiaba.png',
iconCheckImage: '../../static/beauty-icon/icon-hot-xiaba.png',
title: '下巴',
type: 'AR Sense',
key: 'Face Mesh Chin Length Degree',
tp: 'float',
value: 0,
// curren: 0
},
{
iconImage: '../../static/beauty-icon/icon-zuixing.png',
iconCheckImage: '../../static/beauty-icon/icon-hot-zuixing.png',
title: '嘴型',
type: 'AR Sense',
key: 'Face Mesh Mouth Size Degree',
tp: 'float',
value: 0,
// curren: 0
}
],
beautyIconIndex: 0,
// NumArr: [0, 25, 50, 75, 100],
// numIndex: 0,
meiSheObj:{}
}
},
mounted() {
this.$refs.msCamara.startCapture()
},
onLoad() {
//基础值
camaraModule.setParam({
"type": "AR Scene",
"params": [
// 瘦脸
{
"key": "Face Mesh Face Size Custom Package Id",
"value": "assets:/63BD3F32-D01B-4755-92D5-0DE361E4045A.3.facemesh",
"type": "package"
},
// 大眼
{
"key": "Face Mesh Eye Size Custom Package Id",
"value": "assets:/71C4CF51-09D7-4CB0-9C24-5DE9375220AE.3.facemesh",
"type": "package"
},
// 小脸
{
"key": "Face Mesh Face Length Custom Package Id",
"value": "assets:/B85D1520-C60F-4B24-A7B7-6FEB0E737F15.3.facemesh",
"type": "package"
},
// 下巴
{
"key": "Face Mesh Chin Length Custom Package Id",
"value": "assets:/FF2D36C5-6C91-4750-9648-BD119967FE66.3.facemesh",
"type": "package"
},
// 嘴型
{
"key": "Face Mesh Mouth Size Custom Package Id",
"value": "assets:/A80CC861-A773-4B8F-9CFA-EE63DB23EEC2.3.facemesh",
"type": "package"
},
//初始化基础值
{
"key": "Beauty Effect",
"value": true,
"type": "boolean",
},
{
"key": "Beauty Shape",
"value": true,
"type": "boolean",
},
{
"key": "Default Beauty Enabled",
"value": true,
"type": "boolean",
},
{
"key": "Advanced Beauty Enable",
"value": true,
"type": "boolean",
},
{
"key": "Face Mesh Internal Enabled",
"value": true,
"type": "boolean",
},
{
"key": "Advanced Beauty Type",
"value": 1,
"type": "int",
},
]
});
},
methods: {
// 当前选中的美颜功能按钮
camearTypeChange(item, index) {
// console.log('选中特效', item);
this.beautyIconIndex = index
this.NumValue = this.beautyIconArr[this.beautyIconIndex].value
// this.numIndex = this.beautyIconArr[index].curren
},
// 滑动条
sliderChange(e) {
console.log(e);
console.log('value 发生变化:', e.detail.value)
console.log(typeof(e.detail.value));
this.NumValue = isNaN(e.detail.value) ? '0' : e.detail.value
this.beautyIconArr[this.beautyIconIndex].value = isNaN(e.detail.value) ? '0' : e.detail.value
this.addAr()
},
addAr() {
let Arr = this.beautyIconArr.map(item => {
let objs = {
key: item.key,
value: item.value / 100,
type: item.tp
}
return objs
})
let addObj = {
type: "AR Scene",
params: Arr
}
this.meiSheObj = addObj;
console.log('addObj', addObj);
// 添加美颜效果
camaraModule.addEffect(addObj);
//基础值
camaraModule.setParam({
"type": "AR Scene",
"params": [
// 瘦脸
{
"key": "Face Mesh Face Size Custom Package Id",
"value": "assets:/63BD3F32-D01B-4755-92D5-0DE361E4045A.3.facemesh",
"type": "package"
},
// 大眼
{
"key": "Face Mesh Eye Size Custom Package Id",
"value": "assets:/71C4CF51-09D7-4CB0-9C24-5DE9375220AE.3.facemesh",
"type": "package"
},
// 小脸
{
"key": "Face Mesh Face Length Custom Package Id",
"value": "assets:/B85D1520-C60F-4B24-A7B7-6FEB0E737F15.3.facemesh",
"type": "package"
},
// 下巴
{
"key": "Face Mesh Chin Length Custom Package Id",
"value": "assets:/FF2D36C5-6C91-4750-9648-BD119967FE66.3.facemesh",
"type": "package"
},
// 嘴型
{
"key": "Face Mesh Mouth Size Custom Package Id",
"value": "assets:/A80CC861-A773-4B8F-9CFA-EE63DB23EEC2.3.facemesh",
"type": "package"
},
//初始化基础值
{
"key": "Beauty Effect",
"value": true,
"type": "boolean",
},
{
"key": "Beauty Shape",
"value": true,
"type": "boolean",
},
{
"key": "Default Beauty Enabled",
"value": true,
"type": "boolean",
},
{
"key": "Advanced Beauty Enable",
"value": true,
"type": "boolean",
},
{
"key": "Face Mesh Internal Enabled",
"value": true,
"type": "boolean",
},
{
"key": "Advanced Beauty Type",
"value": 1,
"type": "int",
},
]
});
}
},
onBackPress() {
console.log('页面退出了');
camaraModule.removeEffect({
"type": "AR Scene"
});
}
}
</script>
<style lang="scss" scoped>
// .camear-image {
// width: 750rpx;
// // height: 1000rpx;
// border-radius: 28rpx;
// }
.camear-image {
width: 750rpx;
// height: 1000rpx;
border-radius: 28rpx;
}
.movable-box {
margin-top: 40rpx;
height: 160rpx;
padding: 0rpx 130rpx;
}
.camear-type-box {
flex-direction: row;
align-items: center;
// justify-content: space-around;
padding: 0rpx 16rpx;
.camear-type-item {
width: 140rpx;
align-items: center;
.png {
width: 80rpx;
height: 80rpx;
}
view {
margin-top: 20rpx;
}
}
.camear-checked {
color: #F47361;
text-align: center;
}
.camear-default {
color: #000000;
text-align: center;
}
}
.title {
font-weight: 600;
margin: 30rpx 0 20rpx;
color: #F47361;
line-height: 60rpx;
font-size: 38rpx;
margin-left: 40rpx;
}
.numBox {
// flex-direction: row;
// align-items: center;
// justify-content: space-around;
padding: 0 60rpx 10rpx;
text-align: center;
// justify-content: center;
.numValue {
color: rgba(244, 115, 97, 1);
font-size: 40rpx;
font-weight: $uni-semi;
line-height: 32rpx;
text-align: center;
padding-bottom: 10rpx;
}
.slider {
width: 300rpx;
}
.num {
align-items: center;
width: 80rpx;
height: 80rpx;
text-align: center;
// color: rgba(0, 0, 0, 0.40);
justify-content: center;
border-radius: 50%;
box-shadow: 0;
.numItem {
font-size: 26rpx;
line-height: 34rpx;
color: black;
}
}
.active {
background: #F47361;
}
.colors {
color: white !important;
}
}
.bth {
background-image: linear-gradient(to right, rgba(243, 165, 159, 1), rgba(244, 115, 97, 1));
padding: 22rpx 0;
margin-top: 30rpx;
border-radius: 45rpx;
box-shadow: 0 4rpx 8rpx 0rpx rgba(87, 11, 0, 0.10);
border: 0rpx;
width: 650rpx;
margin-left: 50rpx;
.texts {
font-weight: $uni-semi;
color: rgba(255, 255, 255, 1);
line-height: 48rpx;
font-size: 32rpx;
}
}
</style>
- 发布:2023-05-25 17:50
- 更新:2024-02-28 14:54
- 阅读:274
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 10
HBuilderX类型: 正式
HBuilderX版本号: 3.7.11
手机系统: Android
手机系统版本号: Android 10
手机厂商: 华为
手机机型: 荣耀7
页面类型: nvue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
首次打开该页面
首次打开该页面
预期结果:
需要能够正常滑动
需要能够正常滑动
实际结果:
首次打开无法正常滑动
首次打开无法正常滑动
HRK_01
能否提供一下问题工程?
2024-02-28 14:54