提交 7e25800c 编写于 作者: 小帅丶's avatar 小帅丶

:sparkles:新增人脸检测、手表识别页面代码

上级 6fb870b3
[![Version](https://img.shields.io/badge/version-2.0.0-brightgreen.svg)](https://gitee.com/xshuai/weixinxiaochengxu/) [![Version](https://img.shields.io/badge/version-2.0.2-brightgreen.svg)](https://gitee.com/xshuai/weixinxiaochengxu/)
[![作者](https://img.shields.io/badge/%E4%BD%9C%E8%80%85-%E5%B0%8F%E5%B8%85%E4%B8%B6-7AD6FD.svg)](https://www.ydxiaoshuai.cn/) [![作者](https://img.shields.io/badge/%E4%BD%9C%E8%80%85-%E5%B0%8F%E5%B8%85%E4%B8%B6-7AD6FD.svg)](https://www.ydxiaoshuai.cn/)
# 微信小程序-微信端源代码 # 微信小程序-微信端源代码
......
...@@ -36,6 +36,8 @@ ...@@ -36,6 +36,8 @@
"pages/bizz/skincolor/skincolor", "pages/bizz/skincolor/skincolor",
"pages/bizz/skinsmooth/skinsmooth", "pages/bizz/skinsmooth/skinsmooth",
"pages/bizz/ascii/ascii", "pages/bizz/ascii/ascii",
"pages/bizz/facebeauty/facebeauty",
"pages/bizz/watch/watch",
"pages/about/about" "pages/about/about"
], ],
"permission": { "permission": {
......
...@@ -7,6 +7,24 @@ ...@@ -7,6 +7,24 @@
<view class="cu-time">2020</view> <view class="cu-time">2020</view>
</view> </view>
<!--历程--> <!--历程-->
<view class="cu-timeline">
<view class="cu-time">10-14</view>
<view class="cu-item text-xsblue">
<view class="content bg-xsblue">
<text></text>小表帝-手表识别功能发布
</view>
</view>
</view>
<!--历程-->
<view class="cu-timeline">
<view class="cu-time">10-10</view>
<view class="cu-item text-xsblue">
<view class="content bg-xsblue">
<text></text>颜值估测功能发布
</view>
</view>
</view>
<!--历程-->
<view class="cu-timeline"> <view class="cu-timeline">
<view class="cu-time">09-25</view> <view class="cu-time">09-25</view>
<view class="cu-item text-xsblue"> <view class="cu-item text-xsblue">
......
...@@ -18,12 +18,11 @@ Page({ ...@@ -18,12 +18,11 @@ Page({
//页面跳转 //页面跳转
toPage: function (event) { toPage: function (event) {
var route = event.currentTarget.id; var route = event.currentTarget.id;
wx.showToast({ if (route == 1) {
title: '此功能国庆后上线...', wx.navigateTo({
mask: true, url: '/pages/bizz/facebeauty/facebeauty',
duration: 1500, })
icon: 'none' }
})
}, },
/** /**
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
......
...@@ -112,6 +112,12 @@ Page({ ...@@ -112,6 +112,12 @@ Page({
badge: 20, badge: 20,
id: 11, id: 11,
name: '中草药识别' name: '中草药识别'
}, {
icon: '../../images/ailife/watch.png',
color: 'red',
badge: 20,
id: 12,
name: '小表帝(手表识别)'
}], }],
//文字识别 //文字识别
ocrList: [{ ocrList: [{
...@@ -221,6 +227,11 @@ Page({ ...@@ -221,6 +227,11 @@ Page({
url: '/pages/bizz/currency/currency', url: '/pages/bizz/currency/currency',
}) })
} }
if (route == 12) {
wx.navigateTo({
url: '/pages/bizz/watch/watch',
})
}
}, },
toPageGarbage:function(event){ toPageGarbage:function(event){
var route = event.currentTarget.id; var route = event.currentTarget.id;
......
var app = getApp();
var api = require('../../../utils/api.js');
Page({
data: {
motto: '颜值估测',
result: [],
images: {},
resultData: null,
img: '',
faceNum:0,
modalName: '',
modalTitle: null,
modalContent: null
},
//用户点击右上角分享朋友圈
onShareTimeline: function () {
},
//用户点击右上角分享朋友|朋友圈
onShareAppMessage: function () {
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
})
return {
title: '颜值估测',
path: '/pages/bizz/facebeauty/facebeauty'
}
},
clear: function (event) {
wx.clearStorage();
},
//事件处理函数
bindViewTap: function () {
wx.navigateTo({
url: '../logs/logs'
})
},
//请求方法
uploads: function () {
var that = this
var takephonewidth
var takephoneheight
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
wx.getImageInfo({
src: res.tempFilePaths[0],
success(res) {
takephonewidth = res.width,
takephoneheight = res.height
}
})
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
if (res.tempFiles[0].size > (4096 * 1024)) {
wx.showToast({
title: '图片文件过大哦',
icon: 'none',
mask: true,
duration: 1500
})
} else {
wx.showLoading({
title: "识别中...",
mask: true
}),
that.setData({
img: res.tempFilePaths[0]
})
}
api.generalRequest(res.tempFilePaths[0], app.globalData.userId,api.facedetect_url, {
success(result) {
var resultJ = JSON.parse(result)
wx.hideLoading();
if (resultJ.code == 200) {
that.setData({
resultData: resultJ.data.face_list,
faceNum: resultJ.data.face_num,
img: 'data:image/jpg;base64,' + resultJ.data.deal_image
})
} else {
if (resultJ.code == 87014) {
wx.hideLoading();
wx.showModal({
content: '存在敏感内容,请更换图片',
showCancel: false,
confirmText: '明白了'
})
that.setData({
img: null
})
} else {
wx.hideLoading();
wx.showModal({
content: resultJ.msg_zh,
showCancel: false,
confirmText: '明白了'
})
}
}
}
})
},
})
},
onLoad: function () {
},
/**
* 点击查看图片,可以进行保存
*/
preview(e) {
var that = this;
wx.previewImage({
urls: [that.data.img],
current: that.data.img
})
}
});
\ No newline at end of file
{
"navigationBarTitleText": "颜值估测"
}
\ No newline at end of file
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">颜值估测</view>
</cu-custom>
<view class="page-body">
<view class="page-body-wrapper">
<image src="{{ img }}" bindtap='preview' style="width:100%;height:400rpx;" id="imageDom" mode='aspectFit'/>
</view>
<view class="padding flex flex-direction">
<button class="cu-btn bg-xsblue margin-tb-sm lg" bindtap="uploads">拍照/选取图片识别</button>
</view>
</view>
<!--查询详情-->
<block wx:if="{{resultData}}">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="cuIcon-title text-xsblue "></text>人脸个数:{{faceNum}}
</view>
</view>
<!--人脸列表-->
<view class="cu-list menu-avatar">
<block wx:for="{{resultData}}">
<view class="cu-item solid-bottom">
<block wx:if="{{item.cut_image}}">
<view class="cu-avatar lg" style="background-image:url(data:image/png;base64,{{item.cut_image}});"></view>
</block>
<block wx:else>
<view class="cu-avatar lg" style="background-image:url(https://wximage-1251091977.cos.ap-beijing.myqcloud.com/xai/error.png);"></view>
</block>
<view class="content">
<view class="text-black">
<!--颜值-->
<view class="cu-tag round bg-olive">{{item.beauty}}</view>
<!--年龄-->
<view class="cu-tag round bg-purple">{{item.age}}</view>
<!--表情处理-->
<block wx:if="{{item.emotion.type=='angry'}}"><view class="cu-tag round bg-mauve">愤怒</view></block>
<block wx:if="{{item.emotion.type=='disgust'}}"><view class="cu-tag round bg-mauve">厌恶</view></block>
<block wx:if="{{item.emotion.type=='fear'}}"><view class="cu-tag round bg-mauve">恐惧</view></block>
<block wx:if="{{item.emotion.type=='happy'}}"><view class="cu-tag round bg-mauve">高兴</view></block>
<block wx:if="{{item.emotion.type=='sad'}}"><view class="cu-tag round bg-mauve">伤心</view></block>
<block wx:if="{{item.emotion.type=='surprise'}}"><view class="cu-tag round bg-mauve">惊讶</view></block>
<block wx:if="{{item.emotion.type=='neutral'}}"><view class="cu-tag round bg-mauve">无</view></block>
<block wx:if="{{item.emotion.type=='pouty'}}"><view class="cu-tag round bg-mauve">撅嘴</view></block>
<block wx:if="{{item.emotion.type=='grimace'}}"><view class="cu-tag round bg-mauve">鬼脸</view></block>
<!--情绪处理-->
<block wx:if="{{item.expression.type=='none'}}"><view class="cu-tag round bg-brown">不笑</view></block>
<block wx:if="{{item.expression.type=='smile'}}"><view class="cu-tag round bg-brown">微笑</view></block>
<block wx:if="{{item.expression.type=='laugh'}}"><view class="cu-tag round bg-brown">大笑</view></block>
<!--脸型处理-->
<block wx:if="{{item.face_shape.type=='square'}}"><view class="cu-tag round bg-yellow">方形</view></block>
<block wx:if="{{item.face_shape.type=='triangle'}}"><view class="cu-tag round bg-yellow">三角</view></block>
<block wx:if="{{item.face_shape.type=='oval'}}"><view class="cu-tag round bg-yellow">椭圆</view></block>
<block wx:if="{{item.face_shape.type=='heart'}}"><view class="cu-tag round bg-yellow">心形</view></block>
<block wx:if="{{item.face_shape.type=='round'}}"><view class="cu-tag round bg-yellow">圆形</view></block>
<!--眼镜处理-->
<block wx:if="{{item.glasses.type=='none'}}"><view class="cu-tag round bg-cyan">无</view></block>
<block wx:if="{{item.glasses.type=='common'}}"><view class="cu-tag round bg-cyan">普通</view></block>
<block wx:if="{{item.glasses.type=='sun'}}"><view class="cu-tag round bg-cyan">墨镜</view></block>
</view>
</view>
<view class="action">
<view class="round bg-grey cuIcon-{{item.gender.type}}"></view>
</view>
</view>
</block>
</view>
</block>
<!--温馨提示-->
<view>
<text class='reason_txt'>温馨提示</text>
<view class='reminder-content'>从左往右依次为:裁剪图、颜值、年龄、表情、情绪、脸型、是否带眼镜、性别</view>
<view class='reminder-content'>1.上传图片最好包含人脸</view>
<view class='reminder-content'>2.最多支持检测图中10个人脸</view>
<view class='reminder-content'>3.颜值分数仅供娱乐</view>
<view class='reminder-content'>4.点击图片可查看并进行保存</view>
</view>
<!--浮动按钮跳转主页-->
<view class="round-click">
<navigator url='/pages/index/index' open-type="switchTab">
<image src="../../../images/tabbar/index_cur.png"></image>
</navigator >
</view>
<!--给一个高度让内显示完整-->
<view class="cu-tabbar-height"></view>
@import "../../../colorui/main.wxss";
@import "../../../colorui/icon.wxss";
.up {
color: rgb(255, 255, 255);
font-size: 20px;
font-family: 微软雅黑;
width: 200px;
height: 50px;
vertical-align: middle;
text-align: center;
line-height: 45px;
border-radius: 25px;
background-color: rgb(26, 160, 225);
}
.page-body-wrapper image{
background: #ececec;
}
image {
width: 100%;
height: 100%;
max-height: 1
}
.productImg {
width: 220rpx;
height: 220rpx;
border-radius: 0.9rem;
}
textarea{
height:160rpx;
}
.msg {
margin: 10px 0;
text-align: center;
}
.table {
margin-top: 10rpx;
border: 0px solid darkgray;
width: 100%;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 80rpx;
}
.td {
font-family: 微软雅黑;
font-size: 28rpx;
width:100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
}
.bg-g{
background: white;
}
.baikeform{
font-size: 20rpx;
color: #c0c0c0;
border-top: 1rpx solid #eeeeee;
margin:30rpx 40rpx 0rpx 40rpx;
padding: 20rpx;
}
.th {
font-size: 28rpx;
width: 48%;
justify-content: center;
background: #3366FF;
color: #fff;
display: flex;
height: 80rpx;
align-items: center;
}
.preview-tips {
margin: 50rpx 0 30rpx;
}
.video {
margin: 20rpx auto;
width: 100%;
height: 300px;
}
switch{
zoom: 0.8;
}
page {
background-color: #F8F8F8;
height: 100%;
font-size: 32rpx;
line-height: 1.6;
}
.weui-cell_ft{
font-size: 32rpx;
}
.page-body-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.btn-area {
margin-top: 40rpx;
box-sizing: border-box;
width: 100%;
padding: 0 30rpx;
}
.footer{
font-size: 30rpx;
text-align: center;
color: #7367F0;
}
.reason_txt{
font-size: 32rpx;
color: #1AA0E1;
display: table;
width: auto;
white-space: nowrap;
border-spacing: 0.5rem 0;
margin-left: 28rpx;
margin-right: 28rpx;
margin-top: 28rpx;
}
.reason_txt::before,.reason_txt::after{
display: table-cell;
content: "";
width: 50%;
background: linear-gradient(#1AA0E1, #1AA0E1) repeat-x center;
background-size: 0.1rem 0.1rem;
}
.reminder-content{
width: 89%;
margin: 0 auto;
font-size: 24rpx;
color:#bfbfbf;
}
\ No newline at end of file
var app = getApp();
var api = require('../../../utils/api.js');
Page({
data: {
motto: '小表帝-手表识别',
result: [],
images: {},
watch: null,
img: ''
},
//用户点击右上角分享朋友圈
onShareTimeline: function () {
},
//用户点击右上角分享朋友|朋友圈
onShareAppMessage: function () {
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
})
return {
title: '小表帝-手表识别',
path: '/pages/bizz/watch/watch'
}
},
clear: function (event) {
wx.clearStorage();
},
//事件处理函数
bindViewTap: function () {
wx.navigateTo({
url: '../logs/logs'
})
},
//请求方法
uploads: function () {
var that = this
var takephonewidth
var takephoneheight
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
wx.getImageInfo({
src: res.tempFilePaths[0],
success(res) {
takephonewidth = res.width,
takephoneheight = res.height
}
})
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
if (res.tempFiles[0].size > (4096 * 1024)) {
wx.showToast({
title: '图片文件过大哦',
icon: 'none',
mask: true,
duration: 1500
})
} else {
wx.showLoading({
title: "识别中...",
mask: true
}),
that.setData({
img: res.tempFilePaths[0]
})
}
api.generalRequest(res.tempFilePaths[0], app.globalData.userId, api.watch_url, {
success(result) {
var resultJ = JSON.parse(result)
wx.hideLoading();
if (resultJ.code == 200) {
that.setData({
watch: resultJ.watchData
})
} else {
if (resultJ.code == 87014) {
wx.hideLoading();
wx.showModal({
content: '存在敏感内容,请更换图片',
showCancel: false,
confirmText: '明白了'
})
that.setData({
img: null
})
} else {
wx.hideLoading();
wx.showModal({
content: resultJ.msg_zh,
showCancel: false,
confirmText: '明白了'
})
}
}
}
})
},
})
},
test: function () {
console.info(11111111);
wx.navigateTo({
url: '/pages/index/index',
})
},
onLoad: function () {
},
/**
* 点击查看图片,可以进行保存
*/
preview(e) {
var that = this;
if (null == that.data.img || that.data.img == '') {
wx.showModal({
title: '温馨提示',
content: '未选择任何图片',
showCancel: false,
confirmText: '好的'
})
} else {
wx.previewImage({
urls: [that.data.img],
current: that.data.img
})
}
}
});
\ No newline at end of file
{
"usingComponents": {}
}
\ No newline at end of file
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">小表帝-手表识别</view>
</cu-custom>
<view class="page-body">
<view class="page-body-wrapper">
<image src="{{ img }}" bindtap='preview' style="width:100%;height:400rpx;" id="imageDom" mode='aspectFit'/>
</view>
<view class="padding flex flex-direction">
<button class="cu-btn bg-xsblue margin-tb-sm lg" bindtap="uploads">拍照/选取图片</button>
</view>
<!--检测结果-->
<view class="cu-bar bg-white margin-top" wx:if="{{watch}}">
<view class="action">
<text class="cuIcon-title text-blue"></text>手表品牌
</view>
</view>
<view class="padding-xs">
<view class="cu-tag" style="background-color:#0081ff;color:#fff" wx:if="{{watch}}">品牌名称:{{watch.brand_name}}</view>
<view class="cu-tag" style="background-color:#0081ff;color:#fff" wx:if="{{watch}}">品牌置信度:{{watch.score}}%</view>
</view>
</view>
<!--温馨提示-->
<view>
<text class='reason_txt'>温馨提示</text>
<view class='reminder-content'>1.精确度有待完善,识别结果仅供参考</view>
<view class='reminder-content'>2.支持120个手表大类,19386个系列</view>
<view class='reminder-content'>3.目前仅支持返回大类品牌名称</view>
<view class='reminder-content'>4.点击图片可放大查看</view>
</view>
<!--浮动按钮跳转主页-->
<view class="round-click">
<navigator url='/pages/index/index' open-type="switchTab">
<image src="../../../images/tabbar/index_cur.png"></image>
</navigator >
</view>
<!--给一个高度让内显示完整-->
<view class="cu-tabbar-height"></view>
@import "../../../colorui/main.wxss";
@import "../../../colorui/icon.wxss";
.up {
color: rgb(255, 255, 255);
font-size: 20px;
font-family: 微软雅黑;
width: 200px;
height: 50px;
vertical-align: middle;
text-align: center;
line-height: 45px;
border-radius: 25px;
background-color: rgb(26, 160, 225);
}
.page-body-wrapper image{
background: #ececec;
}
image {
width: 100%;
height: 100%;
max-height: 1
}
.productImg {
width: 220rpx;
height: 220rpx;
border-radius: 0.9rem;
}
textarea{
height:160rpx;
}
.msg {
margin: 10px 0;
text-align: center;
}
.table {
margin-top: 10rpx;
border: 0px solid darkgray;
width: 100%;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 80rpx;
}
.td {
font-family: 微软雅黑;
font-size: 28rpx;
width:100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
}
.bg-g{
background: white;
}
.baikeform{
font-size: 20rpx;
color: #c0c0c0;
border-top: 1rpx solid #eeeeee;
margin:30rpx 40rpx 0rpx 40rpx;
padding: 20rpx;
}
.th {
font-size: 28rpx;
width: 48%;
justify-content: center;
background: #3366FF;
color: #fff;
display: flex;
height: 80rpx;
align-items: center;
}
.preview-tips {
margin: 50rpx 0 30rpx;
}
.video {
margin: 20rpx auto;
width: 100%;
height: 300px;
}
switch{
zoom: 0.8;
}
page {
background-color: #F8F8F8;
height: 100%;
font-size: 32rpx;
line-height: 1.6;
}
.weui-cell_ft{
font-size: 32rpx;
}
.page-body-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.btn-area {
margin-top: 40rpx;
box-sizing: border-box;
width: 100%;
padding: 0 30rpx;
}
.footer{
font-size: 30rpx;
text-align: center;
color: #7367F0;
}
.reason_txt{
font-size: 32rpx;
color: #1AA0E1;
display: table;
width: auto;
white-space: nowrap;
border-spacing: 0.5rem 0;
margin-left: 28rpx;
margin-right: 28rpx;
margin-top: 28rpx;
}
.reason_txt::before,.reason_txt::after{
display: table-cell;
content: "";
width: 50%;
background: linear-gradient(#1AA0E1, #1AA0E1) repeat-x center;
background-size: 0.1rem 0.1rem;
}
.reminder-content{
width: 89%;
margin: 0 auto;
font-size: 24rpx;
color:#bfbfbf;
}
\ No newline at end of file
...@@ -160,7 +160,6 @@ Page({ ...@@ -160,7 +160,6 @@ Page({
//停止下拉刷新 //停止下拉刷新
wx.stopPullDownRefresh(); wx.stopPullDownRefresh();
}, 1500) }, 1500)
}, },
//获取轮播图片列表 //获取轮播图片列表
getRotary:function(){ getRotary:function(){
......
...@@ -42,6 +42,10 @@ const chinese_herbal_medicine_url = prefix + '/rest/easydl/chinese_herbal_medici ...@@ -42,6 +42,10 @@ const chinese_herbal_medicine_url = prefix + '/rest/easydl/chinese_herbal_medici
const idphoto_url = prefix + '/rest/idphoto/replace'; const idphoto_url = prefix + '/rest/idphoto/replace';
//图片转字符画接口 //图片转字符画接口
const ascii_url = prefix + '/rest/ias/image2ascii'; const ascii_url = prefix + '/rest/ias/image2ascii';
//人脸检测接口
const facedetect_url = prefix + '/rest/face/detect';
//小表帝识别接口
const watch_url = prefix + '/rest/easydl/little_watchemperor';
/** /**
* 图片背景色修改 * 图片背景色修改
* @param file 图片 * @param file 图片
...@@ -327,6 +331,8 @@ module.exports={ ...@@ -327,6 +331,8 @@ module.exports={
faceSkinsmooth_url: faceSkinsmooth_url, faceSkinsmooth_url: faceSkinsmooth_url,
faceAcnespotmole_url: faceAcnespotmole_url, faceAcnespotmole_url: faceAcnespotmole_url,
ascii_url: ascii_url, ascii_url: ascii_url,
facedetect_url: facedetect_url,
watch_url: watch_url,
/** 暴露出去方法 */ /** 暴露出去方法 */
faceOrgansRequest: faceOrgansRequest, faceOrgansRequest: faceOrgansRequest,
userDaysRequest: userDaysRequest, userDaysRequest: userDaysRequest,
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册