微信小程序接入美颜特效SDK

本文介绍微信小程序端的接入方法。

准备工作

集成SDK

下载以下文件保存至微信小程序项目文件夹中,并将queen.wasm.bin改名为queen.wasm.br

功能使用

初始化

注册License初始化Queen引擎。

import QueenEngine, {kQueenBeautyType, kQueenBeautyMakeupType,kQueenBeautyBlend,  kQueenBeautyParams} from '/assets/aliyun-queen-engine-wx'
let canvas = await new Promise((resolve) => {
 wx.createSelectorQuery().select('#canvas1').fields({ node: true}).exec((res) => {
     resolve(res[0].node);
})});
queenEngine = new QueenEngine();
queenEngine.setWasmUrl("/assets/")//queen.wasm.br文件目录
queenEngine.init("<licenseKey>", function(){
  console.info("queen ready"); 
}, function(progress){
}, canvas);
重要
  • canvas必须显式传入。

  • <licenseKey>需要替换成实际使用的值。

配置美颜参数

  1. 设置基础美颜。

    // 开启基础美颜
    queenEngine.setQueenBeautyType(kQueenBeautyType.SkinBuffing, true);
    // 设置磨皮系数
    queenEngine.setQueenBeautyParams(kQueenBeautyParams.SkinBuffing, 0.7);
    // 设置锐化系数
    queenEngine.setQueenBeautyParams(kQueenBeautyParams.Sharpen, 0.5);
    // 打开美白功能开关
    queenEngine.setQueenBeautyType(kQueenBeautyType.SkinWhiting, true);
    // 设置美白系数
    queenEngine.setQueenBeautyParams(kQueenBeautyParams.Whitening, 0.6);
    // 设置红润系数
    queenEngine.setQueenBeautyParams(kQueenBeautyParams.SkinRed, 0.2);
  2. 设置高级美颜。

    //高级美颜
    queenEngine.setQueenBeautyType(kQueenBeautyType.FaceBuffing, true);
    // 设置去眼袋系数
    queenEngine.setQueenBeautyParams(kQueenBeautyParams.Pouch, 0.9);
    // 设置去法令纹系数
    queenEngine.setQueenBeautyParams(kQueenBeautyParams.NasolabialFolds, 0.9);
    // 设置白牙系数
    queenEngine.setQueenBeautyParams(kQueenBeautyParams.WhiteTeeth, 0.9);
    // 设置口红系数
    queenEngine.setQueenBeautyParams(kQueenBeautyParams.Lipstick, 0.2);
    // 设置腮红系数
    queenEngine.setQueenBeautyParams(kQueenBeautyParams.Blush, 0.1);
    // 设置口红色相系数
    queenEngine.setQueenBeautyParams(kQueenBeautyParams.LipstickColorParam, 0.1);
    // 设置口红饱和度系数
    queenEngine.setQueenBeautyParams(kQueenBeautyParams.LipstickGlossParam, 0.1);
    // 设置口红明度系数
    queenEngine.setQueenBeautyParams(kQueenBeautyParams.LipstickBrightnessParam, 0.1);
    // 设置亮眼系数
    queenEngine.setQueenBeautyParams(kQueenBeautyParams.BrightenEye, 0.9);
    // 设置红润系数
    queenEngine.setQueenBeautyParams(kQueenBeautyParams.SkinRed, 0.2);
    // 设置去皱纹系数
    queenEngine.setQueenBeautyParams(kQueenBeautyParams.Wrinkles, 0.9);
    // 设置去暗沉系数
    queenEngine.setQueenBeautyParams(kQueenBeautyParams.BrightenFace, 0.3);
  3. 设置美型。

    // 打开美型功能开关,美型参数详见kQueenBeautyFaceShapeType
    queenEngine.setQueenBeautyType(kQueenBeautyType.FaceShape, true);
    //颧骨,值的范围[0,1],默认0
    queenEngine.setFaceShape(kQueenBeautyFaceShapeType.CutCheek, 0.6);
    // 削脸,值的范围[0,1],默认0
    queenEngine.setFaceShape(kQueenBeautyFaceShapeType.CutFace, 0.7);
    //瘦脸,值的范围[0,1],默认0
    queenEngine.setFaceShape(kQueenBeautyFaceShapeType.ThinFace, 0.8);
    //脸长,值的范围[0,1],默认0
    queenEngine.setFaceShape(kQueenBeautyFaceShapeType.LowerJaw, 0.8);
    //下巴拉长,值的范围[-1,1],默认0
    queenEngine.setFaceShape(kQueenBeautyFaceShapeType.HigherJaw, 0.6); 
  4. 设置美妆。

    • 使用SDK内置资源美妆。

      使用内置资源接口时,SDK会从CDN下载美颜素材。

      //激活美妆
      queenEngine.setQueenBeautyType(kQueenBeautyType.Makeup, true);
      //设置美妆眉毛
      await queenEngine.setMakeupEyeBrow(Assets.kResMakeupEyeBrow.BiaoZhunMei, 0.6);
      //设置美妆睫毛
      await queenEngine.setMackupEyeLash(Assets.kResMakeupEyeLash.ChenJing, 0.6);
      //设置美妆眼影
      await queenEngine.setMakeupEyeShadow(Assets.kResMakeupEyeShadow.DaDiSe, 0.5);
      //设置美妆眼线
      await queenEngine.setMakeupEyeLiner(Assets.kResMakeupEyeLiner.DaYan, 0.4);
      //设置美妆美瞳
      await queenEngine.setMakeupEyeBall(Assets.kResMakeupEyeBall.BiMuYu, 0.5);
      //设置美妆口红
      await queenEngine.setMakeupMouth(Assets.kResMakeupMouth.AnYeZi, 0.3);
      //设置美妆腮红
      await queenEngine.setMakeupBlush(Assets.kResMakeupBlush.BlushWuGu, 0.2);
      //设置美妆高光
      await queenEngine.setMakeupHighlight(Assets.kResMakeupHighLight.Highlight, 0.1);
      //移除美妆效果 - 移除美妆美瞳
      queenEngine.removeMakeupWithType(kQueenBeautyMakeupType.Eyeball);
      //详细请参考QueenEngin.d.ts接口文件说明
    • 本地资源美妆。

      const makeupPackage = "./mouth.zip"
      const makeupName = "1.2.3.png";
      const band = kQueenBeautyBlend.LabMix;
      // 打开美妆功能开关,美妆参数详见kQueenBeautyMakeupType
      queenEngine.setQueenBeautyType(kQueenBeautyType.Makeup, true);
      // 设置美妆口红效果的透明度
      queenEngine.setMakeupAlphaWithType(kQueenBeautyMakeupType.Mouth, true, 0.6);
      // 设置口红效果
      queenEngine.setMakeupWithPackage(kQueenBeautyMakeupType.Mouth, makeupPackage, makeupName, band).then(() => {
      
      });
  5. 设置滤镜。

    • 使用内置滤镜。

      await queenEngine.setLutByType(Assets.kResLut.M1, 0.5);
    • 使用自定义滤镜。

      const lutImageUrl = "./lut.png";
      queenEngine.setLutImageUrl(lutImageUrl).then(function () {
        queenEngine.setQueenBeautyType(kQueenBeautyType.LUT, true);
        queenEngine.setQueenBeautyParams(kQueenBeautyParams.LUT, 0.5);
      });
  6. 设置头像贴纸。

    1. 使用内置贴纸。

      queenEngine.addMaterialWithType(Assets.kResSticker.ILoveChina);
      //或
      queenEngine.addMaterialWithIndex(0);
      //同时设置多个
      queenEngine.addMaterialWithIndexs([0,1]);
    2. 使用自定义贴纸。

      const stickerZip = "./sticker.zip";
      queenEngine.addMaterialWithUrl(stickerZip).then(() => {
       });
  7. 配置绿幕抠图。

    const backgroundUrl = "./bg.png";
    const isBlue = false;//是否蓝幕
    queenEngine.setGreenScreenWithUrl(isBlue, backgroundUrl).then(() => {
     });
  8. 配置背景处理。

    //背景透明
    queenEngine.enableTransparentBackground(true);

API文档

API说明请参见API说明

常见问题

licenseKey如何获取?

获取方法请参见获取美颜特效SDK License

使用SDK报错

  1. 请检查初始化传入的licenseKey是否有效。

  2. License绑定的应用,Web域名需要配置为小程序appid.servicewechat.com

  3. 初始化Queen引擎时,Canvas需要显式传入。

  4. 目前美颜特效小程序SDK仅支持Canvas组件,暂不支持Camera组件。