小程序开发框架_mpvue（六）卡通照片的实现思路

  随着AI技术的发展，人脸识别可以识别到人的五官的位置，大小，甚至可以实时跟踪脸部运动轨迹，这样前端就产生了很多好玩的功能，比如人脸卡通，激萌和抖音都有这样的效果，我们看下激萌的实现效果

这样的效果是如何实现的？我们以左图来进行分析

这个效果图分为两个部分

1： 背景
2：卡通人脸

其中卡通人脸又是由如下几个部分组成
1： 原人物图片
2：素材图片，如特效耳朵图片，特效鼻子图片，特效嘴巴图片等等

所以为了实现如上效果，我们可以通过类似图片叠加的方式，逐一将背景，人物头像，特效素材进行叠加即可

但是我们要如何确定某张图片素材的叠加位置尼？这时候AI就要上场了，具体步骤如下

步骤一： 首先用户进行拍照或者上传一张自己的照片
步骤二： AI对照片进行人脸识别，识别出基本特征，如眼睛的位置大小，鼻子的位置大小
步骤三： 前端根据AI的计算结果将各个卡通素材叠加显示，就像photoshop里面的添加层一样

针对步骤二，根据服务端返回的人脸数据至少应包含
1）宽度，高度 ，用于设置元素的大小
2）左边距和上边距，用于设置元素的位置

所以前端核心代码如下

            layers: [
                {name:'hair', link:'xxxxxx', width: '160', height: '160' , top: '0', left: '0'},
                {name:'body', link:'xxxxxx', width: '160', height: '160' , top: '0', left: '0'},
                {name:'chin', link:'xxxxxx', width: '160', height: '160' , top: '0', left: '0'},
                {name:'eyeleft', link:'xxxxxx', width: '16', height: '16' , top: '74', left: '57'},
                {name:'eyeright', link:'xxxxxx', width: '16', height: '16' , top: '74', left: '85'},
                {name:'eyebrow', link:'xxxxxx', width: '48', height: '48' , top: '52', left: '55'},
                {name:'nose', link:'xxxxxx', width: '19', height: '19' , top: '82', left: '70'},
                {name:'mouth', link:'xxxxxx', width: '17', height: '17' , top: '96', left: '71'}
            ]

其中
name字段表示人脸卡通某部位名称
link字段表示人脸卡通中某部位的默认使用元素图片
width/height表示人脸卡通中某部位的的大小
left/top表示人脸卡通中某部位的的位置

那么我们在mpvue中封装一个组件看下效果

<template>
    <div class="preview-layer">
        <div class="layer"
            v-for="(layer, index) in layers"
            :key="index"
            :style="{height: layer.height + 'px'||5 + 'px', width: layer.width + 'px'||5 + 'px',left:layer.left + 'px', top: layer.top + 'px'}"
            :type="layer.type">
            <img class="cartoon" :src="layer.link">
        </div>
    </div>
</template>

<script>
/* eslint-disable */
export default {
    data() {
        return {
            layers: [
                {name:'hair', link:'xxxxxx', width: '160', height: '160' , top: '0', left: '0'},
                {name:'body', link:'xxxxxx', width: '160', height: '160' , top: '0', left: '0'},
                {name:'chin', link:'xxxxxx', width: '160', height: '160' , top: '0', left: '0'},
                {name:'eyeleft', link:'xxxxxx', width: '16', height: '16' , top: '74', left: '57'},
                {name:'eyeright', link:'xxxxxx', width: '16', height: '16' , top: '74', left: '85'},
                {name:'eyebrow', link:'xxxxxx', width: '48', height: '48' , top: '52', left: '55'},
                {name:'nose', link:'xxxxxx', width: '19', height: '19' , top: '82', left: '70'},
                {name:'mouth', link:'xxxxxx', width: '17', height: '17' , top: '96', left: '71'}
            ]
        }
    },
    mounted() {
    },
    methods: {
    }
}
</script>

<style>
.preview-layer {
    width: 100%;
    height: 300px;
    position: absolute;
}
.layer {
    width: 100%;
    height: 100%;
    position: absolute;
}
.cartoon {
    width: 100%;
    height: 100%;
}
</style>

这样就很容易实现激萌/抖音那种人脸特效了