Integrate Queen SDK for WeChat mini programs

Initialize Queen SDK

Register the license key to initialize the Queen engine. The RenderCanvas parameter must point to a WebGL canvas node obtained via createSelectorQuery.

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 directory
queenEngine.create({
  SdkLicenseKey: sdkLicenseKey,        // Replace with your actual license key
  OnInit: function(result: Boolean){
      console.info("queen sdk initialized.", result)
  },
  Domain: '',// Set to ${APPID}.servicewechat.com, where APPID is your mini program app ID
  OnProgress: function(progress: Number){
      console.info("queen sdk loading:", progress);
  },
  RenderCanvas: canvas                  // Must be explicitly specified
}

Configure retouching parameters

1. Configure basic face retouching.

   // Enable basic retouching.
   queenEngine.setQueenBeautyType(kQueenBeautyType.SkinBuffing, true);
   // Set the skin buffing level. Value range: [0, 1].
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.SkinBuffing, 0.7);
   // Set the image sharpening level. Value range: [0, 1].
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.Sharpen, 0.5);
   // Enable skin whitening.
   queenEngine.setQueenBeautyType(kQueenBeautyType.SkinWhiting, true);
   // Set the skin whitening level. Value range: [0, 1].
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.Whitening, 0.6);
   // Set the rosy cheeks level. Value range: [0, 1].
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.SkinRed, 0.2);

2. Configure advanced face retouching.

   // Enable advanced face retouching.
   queenEngine.setQueenBeautyType(kQueenBeautyType.FaceBuffing, true);
   // Set the eye bag removal level. Value range: [0, 1].
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.Pouch, 0.9);
   // Set the nasolabial fold removal level. Value range: [0, 1].
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.NasolabialFolds, 0.9);
   // Set the teeth whitening level. Value range: [0, 1].
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.WhiteTeeth, 0.9);
   // Set the lipstick level. Value range: [0, 1].
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.Lipstick, 0.2);
   // Set the blush level. Value range: [0, 1].
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.Blush, 0.1);
   // Set the lipstick color. Value range: [0, 1].
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.LipstickColorParam, 0.1);
   // Set the lipstick saturation. Value range: [0, 1].
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.LipstickGlossParam, 0.1);
   // Set the lipstick brightness. Value range: [0, 1].
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.LipstickBrightnessParam, 0.1);
   // Set the eye brightening level. Value range: [0, 1].
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.BrightenEye, 0.9);
   // Set the rosy cheeks level. Value range: [0, 1].
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.SkinRed, 0.2);
   // Set the wrinkle removal level. Value range: [0, 1].
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.Wrinkles, 0.9);
   // Set the skin brightening level. Value range: [0, 1].
   queenEngine.setQueenBeautyParams(kQueenBeautyParams.BrightenFace, 0.3);

3. Configure face shaping.

   // Enable face shaping. Face shaping parameters are defined by kQueenBeautyFaceShapeType.
   queenEngine.setQueenBeautyType(kQueenBeautyType.FaceShape, true);
   // Set cheekbone width. Valid values: [0,1]. Default value: 0.
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.CutCheek, 0.6);
   // Set cheekbone narrowing. Valid values: [0,1]. Default value: 0.
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.CutFace, 0.7);
   // Set face slimming. Valid values: [0,1]. Default value: 0.
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.ThinFace, 0.8);
   // Set face length. Valid values: [0,1]. Default value: 0.
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.LowerJaw, 0.8);
   // Set chin lengthening. Valid values: [0,1]. Default value: 0.
   queenEngine.setFaceShape(kQueenBeautyFaceShapeType.HigherJaw, 0.6); 

4. Configure makeup resources.

   • Use the built-in makeup resources of the SDK.

     The SDK downloads retouching materials from Alibaba Cloud CDN. Available constants are defined in the QueenEngin.d.ts file.

     // Enable makeup.
     queenEngine.setQueenBeautyType(kQueenBeautyType.Makeup, true);
     // Set the eyebrow effect.
     await queenEngine.setMakeupEyeBrow(Assets.kResMakeupEyeBrow.BiaoZhunMei, 0.6);
     // Set the eyelash effect.
     await queenEngine.setMackupEyeLash(Assets.kResMakeupEyeLash.ChenJing, 0.6);
     // Set the eye shadow effect.
     await queenEngine.setMakeupEyeShadow(Assets.kResMakeupEyeShadow.DaDiSe, 0.5);
     // Set the eyeliner effect.
     await queenEngine.setMakeupEyeLiner(Assets.kResMakeupEyeLiner.DaYan, 0.4);
     // Set the colored contact lens effect.
     await queenEngine.setMakeupEyeBall(Assets.kResMakeupEyeBall.BiMuYu, 0.5);
     // Set the lipstick effect.
     await queenEngine.setMakeupMouth(Assets.kResMakeupMouth.AnYeZi, 0.3);
     // Set the blush effect.
     await queenEngine.setMakeupBlush(Assets.kResMakeupBlush.BlushWuGu, 0.2);
     // Set the highlight effect.
     await queenEngine.setMakeupHighlight(Assets.kResMakeupHighLight.Highlight, 0.1);
     // Remove the colored contact lens effect.
     queenEngine.removeMakeupWithType(kQueenBeautyMakeupType.Eyeball);
     // For more information, see the QueenEngin.d.ts file.

   • Use your local makeup resources.

     const makeupPackage = "./mouth.zip"
     const makeupName = "1.2.3.png";
     const band = kQueenBeautyBlend.LabMix;
     // Enable makeup. Makeup parameters are defined by kQueenBeautyMakeupType.
     queenEngine.setQueenBeautyType(kQueenBeautyType.Makeup, true);
     // Set the lipstick transparency.
     queenEngine.setMakeupAlphaWithType(kQueenBeautyMakeupType.Mouth, true, 0.6);
     // Set the lipstick effect.
     queenEngine.setMakeupWithPackage(kQueenBeautyMakeupType.Mouth, makeupPackage, makeupName, band).then(() => {
     
     });

5. Configure filters.

   • Use built-in filters.

     await queenEngine.setLutByType(Assets.kResLut.M1, 0.5);

   • Use custom filters.

     const lutImageUrl = "./lut.png";
     queenEngine.setLutImageUrl(lutImageUrl).then(function () {
       queenEngine.setQueenBeautyType(kQueenBeautyType.LUT, true);
       queenEngine.setQueenBeautyParams(kQueenBeautyParams.LUT, 0.5);
     });

6. Configure stickers.

   1. Use built-in stickers.

      queenEngine.addMaterialWithType(Assets.kResSticker.ILoveChina);
      // Specify a single sticker.
      queenEngine.addMaterialWithIndex(0);
      // Or, specify multiple stickers.
      queenEngine.addMaterialWithIndexs([0,1]);

   2. Use custom stickers.

      const stickerZip = "./sticker.zip";
      queenEngine.addMaterialWithUrl(stickerZip).then(() => {
       });

7. Configure green-screen chroma keying.

   const backgroundUrl = "./bg.png";
   const isBlue = false;// Specify whether to use blue-screen chroma keying instead of green-screen.
   queenEngine.setGreenScreenWithUrl(isBlue, backgroundUrl).then(() => {
    });

8. Configure background processing.

   // Enable transparent background.
   queenEngine.enableTransparentBackground(true);