小程序美颜特效实践

// 0.3.0之前版本引用方式（1个文件）
// import "../../miniprogram_npm/tencentcloud-webar/lib.js";
// 0.3.0及之后版本引用方式（2个文件 + 按需初始化3d模块）
import?'../../miniprogram_npm/tencentcloud-webar/lib.js';
import?'../../miniprogram_npm/tencentcloud-webar/core.js';
// 按需初始化3d插件，如果不需要3d则可以不引用
import?'../../miniprogram_npm/tencentcloud-webar/lib-3d.js';
import?{?plugin3d?}?from?'../../miniprogram_npm/tencentcloud-webar/plugin-3d'
// 导入 ArSdk
import?{?ArSdk?}?from?"../../miniprogram_npm/tencentcloud-webar/index.js";

// wxml
//打开相机，通过position使相机不展示
<camera 
  device-position="{{'front'}}" 
  frame-size="large" flash="off" resolution="medium" 
  style="width: 750rpx; height: 134rpx;position:absolute;top:-9999px;" 
/>
//sdk 将处理完的画面实时输出到此 canvas 上
<canvas 
  type="webgl"
  canvas-id="main-canvas"
  id="main-canvas"
  style="width: 750rpx; height: 1334rpx;">
</canvas>
//拍照将 ImageData 对象绘制到此 canvas 上
<canvas 
  type="2d" 
  canvas-id="photo-canvas" 
  id="photo-canvas" 
  style="position:absolute;width:720px;height:1280px;top:-9999px;left:-9999px;">
</canvas>
// js
/** ----- 鉴权配置 ----- */
?
/**
 * 腾讯云账号 APPID
 * 
 * 进入[腾讯云账号中心](https://console.cloud.tencent.com/developer) 即可查看 APPID
 */
const APPID = ''; // 此处请填写您自己的参数
?
/**
 * Web LicenseKey
 * 
 * 登录音视频终端 SDK 控制台的[Web License 管理](https://console.cloud.tencent.com/vcube/web)，创建项目即可获得 LicenseKey
 */
const LICENSE_KEY = ''; // 此处请填写您自己的参数
?
/**
 * 计算签名用的密钥 Token
 * 
 * 注意：此处仅用于 DEMO 调试，正式环境中请将 Token 保管在服务端，签名方法迁移到服务端实现，通过接口提供，前端调用拉取签名，参考
 * [签名方法](/document/product/616/71370#.E7.AD.BE.E5.90.8D.E6.96.B9.E6.B3.95)
 */
const token = ''; // 此处请填写您自己的参数
?
Component({
    data: {
        makeupList: [],
        stickerList: [],
        filterList: [],
        recording: false
    },
    methods: {
        async getCanvasNode(id) {
            return new Promise((resolve) => {
                this.createSelectorQuery()
                    .select(`#${id}`)
                    .node()
                    .exec((res) => {
                        const canvasNode = res[0].node;
                        resolve(canvasNode);
                    });
            });
        },
        getSignature() {
            const timestamp = Math.round(new Date().getTime() / 1000);
            const signature = sha256(timestamp + token + APPID + timestamp).toUpperCase();
            return { signature, timestamp };
        },
        // 初始化相机类型    
        async initSdkCamera() {
            // 获取在屏的 canvas，sdk 会将处理完的画面实时输出到 canvas 上
            const outputCanvas = await this.getCanvasNode("main-canvas");
            // 获取鉴权参数
            const auth = {
                licenseKey: LICENSE_KEY,
                appId: APP_ID,
                authFunc: this.getSignature
            };
            // 构造SDK初始化参数
            const config = {
                auth,
                camera: {
                    width:720,
                    height:1280,
                },
                output: outputCanvas,
                // 初始美颜效果（可选）
                beautify: {
                    whiten: 0.1, // 美白 0-1
                    dermabrasion: 0.3, // 磨皮 0-1
                    lift: 0, // 瘦脸 0-1
                    shave: 0, // 削脸 0-1
                    eye: 0.2, // 大眼 0-1
                    chin: 0, // 下巴 0-1
                }
            };
            const ar = new ArSdk(config);
            // created回调里可以开始获取内置特效与滤镜列表
            ar.on('created', () => {
                // 获取内置美妆、贴纸列表
                ar.getEffectList({
                    Type: 'Preset'
                }).then((res) => {
                    const list = res.map(item => ({
                        name: item.Name,
                        id: item.EffectId,
                        cover: item.CoverUrl,
                        url: item.Url,
                        label: item.Label,
                        type: item.PresetType,
                    }));
                    const makeupList = list.filter(item=>item.label.indexOf('美妆')>=0)
                    const stickerList = list.filter(item=>item.label.indexOf('贴纸')>=0)
                    // 渲染特效列表
                    this.setData({
                        makeupList,
                        stickerList
                    });
                }).catch((e) => {
                    console.log(e);
                });
                // 内置滤镜
                ar.getCommonFilter().then((res) => {
                    const list = res.map(item => ({
                        name: item.Name,
                        id: item.EffectId,
                        cover: item.CoverUrl,
                        url: item.Url,
                        label: item.Label,
                        type: item.PresetType,
                    }));
                    // 渲染滤镜列表
                    this.setData({
                        filterList: list
                    });
                }).catch((e) => {
                    console.log(e);
                });
            });
            // ready 回调中可以设置美颜、滤镜、特效效果
            ar.on('ready', (e) => {
                this._sdkReady = true
            });
?
            ar.on('error', (e) => {
                console.log(e);
            });
?
            this.ar = ar
        },
        // 改变美颜参数，需要确保sdk ready
        onChangeBeauty(val){
            if(!this._sdkReady) return
            // 可以通过setBeautify设置美颜效果，支持6种属性，详见SDK接入指南
            this.ar.setBeautify({
                dermabrasion: val.dermabrasion, // 磨皮 0-1
            });
        },
        // 改变美妆，需要确保sdk ready
        onChangeMakeup(id, intensity){
            if(!this._sdkReady) return
            // 使用setEffect设置特效，setEffect的输入参数支持三种格式，详见SDK接入指南
            this.ar.setEffect([{id, intensity}]);
        },
        // 改变贴纸，需要确保sdk ready
        onChangeSticker(id, intensity){
            if(!this._sdkReady) return
            // 使用setEffect设置特效，setEffect的输入参数支持三种格式，详见SDK接入指南
            this.ar.setEffect([{id, intensity}]);
        },
        // 改变滤镜，需要确保sdk ready
        onChangeFilter(id, intensity){
            if(!this._sdkReady) return
            // 使用setFilter设置滤镜，第二个参数表示滤镜强度（范围0-1）
            this.ar.setFilter(id, 1);
        }
    }
})