备案控制台
文档
产品文档
输入文档关键字查找
首页 视频直播 操作指南 美颜特效SDK 集成美颜特效SDK Web端接入美颜特效SDK

Web端接入美颜特效SDK

更新时间：
一键部署
产品详情
相关技术圈
我的收藏

Queen Web SDK是一个Web端美颜特效组件，支持基础美颜、高级美颜、人脸美妆、人脸美型、头像贴纸、美体、背景抠图、滤镜、隔空写字、Animoji等美颜功能。本文介绍在Web端接入美颜特效SDK。

准备工作

  1. 申请试用LicenseKey，获取方式请参见获取美颜特效SDK License。

  2. 下载美颜特效Web SDK包并解压，请参见下载美颜特效SDK。

  3. 导入Queen SDK。具体操作，请参见通过NPM导入Queen SDK。

通过NPM导入Queen SDK

安装Queen美颜组件

npm install aliyun-queen-engine

导入默认版本美颜

默认版本（Advance版本）支持基础美颜、高级美颜、美妆、美型、滤镜、贴纸美颜功能。

说明

不同的版本包大小和加载的资源文件不同，功能越全包大小越大，请根据实际情况进行选择。

import QueenEngine, {kQueenBeautyType, kQueenBeautyParams, kQueenBeautyMakeupType, kQueenBeautyFaceShapeType, kQueenBeautyBlend} from "aliyun-queen-engine"
queenEngine = new QueenEngine();

导入Lite版本美颜

Lite版本仅支持基础美颜功能。

import {QueenEngineLite, kQueenBeautyType, kQueenBeautyParams} from "aliyun-queen-engine"
queenEngine = new QueenEngineLite();

导入Pro版本美颜

Pro版本支持基础美颜、高级美颜、美妆、美型、美体、滤镜、贴纸、隔空写字、抠图美颜功能。

import {QueenEnginePro, kQueenBeautyType, kQueenBeautyParams, kQueenBeautyMakeupType, kQueenBeautyFaceShapeType, kQueenBeautyBodyShapeType, kQueenBeautyBlend} from "aliyun-queen-engine"
queenEngine = new QueenEnginePro();

导入Full版本美颜

Full版本支持基础美颜、高级美颜、美妆、美型、美体、滤镜、贴纸、隔空写字、抠图美颜、Animoji功能。

import {QueenEngineFull, kQueenBeautyType, kQueenBeautyParams, kQueenBeautyMakeupType, kQueenBeautyFaceShapeType, kQueenBeautyBodyShapeType, kQueenBeautyBlend} from "aliyun-queen-engine"
queenEngine = new QueenEngineFull();

导入Worker版本美颜

Worker版本通过初始化时传入kQueenVersion指定Lite、Advance、Pro、Full版本。

import {QueenEngineWorker, kQueenBeautyType, kQueenBeautyParams, kQueenBeautyMakeupType, kQueenBeautyFaceShapeType, kQueenBeautyBodyShapeType, kQueenBeautyBlend, kQueenVersion} from "aliyun-queen-engine"
queenEngine = new QueenEngineWorker(kQueenVersion.Pro);

HTML版本接入

HTML版本中SDK使用到的枚举需要增加QueenEngine前缀，如：queenEngine.setQueenBeautyParams(QueenEngine.kQueenBeautyParams.Wrinkles, 0.9);。

//Lite版：
<script src="https://g.alicdn.com/apsara-media-box/imp-web-queen-wasm/6.2.2/dist/js/aliyun-queen-engine-lite.js"></script>
//Advance版：
<script src="https://g.alicdn.com/apsara-media-box/imp-web-queen-wasm/6.2.2/dist/js/aliyun-queen-engine.js"></script>
//Pro版：
<script src="https://g.alicdn.com/apsara-media-box/imp-web-queen-wasm/6.2.2/dist/js/aliyun-queen-engine-pro.js"></script>
//Full版：
<script src="https://g.alicdn.com/apsara-media-box/imp-web-queen-wasm/6.2.2/dist/js/aliyun-queen-engine-full.js"></script>
//Worker版本
<script src="https://g.alicdn.com/apsara-media-box/imp-web-queen-wasm/6.2.2/dist/js/aliyun-queen-engine-worker.js"></script>

微信小程序版接入

  • JS文件（https://g.alicdn.com/apsara-media-box/imp-web-queen-wasm/6.3.1/dist/js/@ali/queen-wasm-wx.js）和WASM文件（https://g.alicdn.com/apsara-media-box/imp-web-queen-wasm/6.3.1/dist/wasm/weixin/queen.wasm.bin）。

  • 下载上述文件到微信小程序项目文件夹中，并将queen.wasm.bin改名为queen.wasm.br。

  • 调用方式：

    import QueenEngine, {kQueenBeautyType, kQueenBeautyMakeupType,kQueenBeautyBlend,  kQueenBeautyParams} from '/assets/@ali/queen-wasm-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);

    1. canvas必须显式传入。

    2. 申请License试用时，需要提供微信AppId，以进行认证授权。

Queen Web SDK接入示例

初始化Queen引擎

  1. 初始化Queen引擎。

    const sdkLicenseKey = ""; //queen sdk 授权licenseKey
const queenEngine = new QueenEngine();
//const queenEngine = new QueenEnginePro(); //Pro版本初始化
queenEngine.init(sdkLicenseKey, function(){
 //初始化完成回调
}, function(progress){
 //progress：加载进度条
});

  2. 指定canvas初始化。

    需要指定的canvasElement type为webgl2类型或默认为空。

    const canvasElement = document.getElementById("canvas");
const queenEngine = new QueenEngine();
queenEngine.init(sdkLicenseKey, function(){
 //初始化完成回调
}, function(progress){
 //progress：加载进度条
}, canvasElement);

  3. 指定推理模型初始化。

    const queenEngine = new QueenEnginePro();
queenEngine.init(sdkLicenseKey, function(){
 //初始化完成回调
}, function(progress){
 //progress：加载进度条
}, canvasElement,{
 "segment": kQueenModelShapeType.None,//初始化时不加载背景抠图模型
 "pose": kQueenModelShapeType.None, //初始化时不加载美体变形模型
 "backend": kBackendType.Auto //自动选择推理后端
});
    说明

    • kQueenModelShapeType.None默认不加载背景抠图模型，使用抠图或美体时按需加载。

    • kQueenModelShapeType.Horizontal引擎初始化时载入横向图模型。

    • kQueenModelShapeType.Vertical引擎初始化时载入竖向图模型。

    • kQueenModelShapeType.Both引擎初始化时载入时加载横向图模型和竖向图模型。

    • 横向图模型，即width > height源输入。

    • 竖向图模型，即height > width源输入。

    • kBackendType.WebGL使用WebGL推理后端。

    • kBackendType.WebGPU优先使用WebGPU推理后端。

    • 模型加载会影响页面加载速度。

  4. Worker版本接入。

    import {QueenEngineWorker, kQueenBeautyType, kQueenBeautyParams, kQueenBeautyMakeupType, kQueenBeautyFaceShapeType, kQueenBeautyBlend} from "aliyun-queen-engine"
const canvasElement = document.getElementById("canvas");
queenEngine = new QueenEngineWorker(kQueenVersion.Pro);
queenEngine.init(sdkLicenseKey, function(){
 //初始化完成回调
}, function(progress){
 //progress：加载进度条
}, canvasElement);

配置美颜参数

  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";
queenEngine.setSegmentBackgroundUrl(backgroundUrl).then(() => {
 });

  8. 配置绿幕抠图。

    const backgroundUrl = "./bg.png";
const isBlue = false;//是否蓝幕
queenEngine.setGreenScreenWithUrl(isBlue, backgroundUrl).then(() => {
 });

  9. 配置背景处理。

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

美颜渲染

  1. 摄像头流渲染。

     queenEngine.openCameraAndRender().then((stream=>{
 const video = document.querySelector('video');
 video.srcObject = stream;
 video.play();
 }))

  2. 渲染到Canvas。

    渲染的Canvas为初始化引擎时传入的Canvas。

     const sourceVideo = document.querySelector('video');
 queenEngine.renderMediaObjectToRenderCanvas(sourceVideo, sourceVideo.clientWidth, sourceVideo.clientHeight);

  3. 视频流渲染。

     navigator.mediaDevices.getUserMedia(constraints)
 .then(mediaStream => {
 let renderMediaStream = queenEngine.renderMediaStream(mediaStream);
 const video = document.querySelector('video');
 video.srcObject = renderMediaStream;
 video.play();
 });

  4. 图片渲染。

    fetch(图片地址)
.then(buffer => buffer.blob())
.then(createImageBitmap)
.then(img => {
 queenEngine.renderWithMediaObject(img, img.width, img.height, function(imageBufferData, imageWidth, imageHeight){
 const canvas = document.getElementById('playCanvas'); //canvas画布 
 const ctx = canvas.getContext("2d");
 const imageBuffer = new Uint8ClampedArray(imageBufferData);
 const imageData = new ImageData(imageBuffer, imageWidth, imageHeight);
 ctx.clearRect(0, 0, imageWidth, imageHeight);
 ctx.putImageData(imageData, 0, 0);
});
});

  5. 纹理渲染。

    const canvas = document.getElementById("sourceCanvas");
let outTexture = queenEngine.renderMediaObjectToTexture(canvas, canvas.width, canvas.height);
queenEngine.drawOutTexture(outTexture);//纹理会绘制到初始化传入的canvas

  6. 纹理输入渲染。

    let inputTexture = queenEngine.generateTextureId();
queenEngine.updateTexture(inputTexture, imageData);
let outTexture = queenEngine.renderTextureId(inputTexture, width, height);
queenEngine.drawOutTexture(outTexture)//纹理会绘制到初始化传入的canvas

  7. 管道流渲染。

    const videoTrack = stream.getVideoTracks()[0];
const processor = new MediaStreamTrackProcessor({ track: videoTrack });
const readFrameStream = processor.readable;
const generator = new MediaStreamTrackGenerator({ kind: 'video' });
let writeFrameStream = generator.writable;
readFrameStream.pipeThrough(queenEngine.getTransformStream()).pipeTo(writeFrameStream);

Queen Web SDK接口说明

SDK初始化

/**
 * SDK初始化
 * @param sdkUrl 初始化SDK
 * @param sdkLicenseKey 授权licenseKey
 * @param initCallback 初始后回调
 * @param loaddingCallback 载入进度条
 * @param renderCanvas 渲染使用的canvas 可不传，不传时自动创建
 */
init(sdkLicenseKey: string, initCallback:()=>void, loaddingCallback:(progress: number) => void, renderCanvas: HTMLCanvasElement)

美颜特效渲染

  1. 基于imageData对象渲染。

    /**
 * 图片美颜渲染
 * 返回ImageBuffer RGBA对象
 * @param imageData 图片ImageBuffer RGBA, 
 * 示例：const imageData = new Uint8Array(ImageData.data);
 * @param imageWidth 宽
 * @param imageHeight 高
 * @param renderCallback 图片渲染回调
 */
render(imageData: Uint8Array, imageWidth: number, imageHeight: number, renderCallback: (outImageData:Uint8Array, imageWidth:number, imageHeight:number) => void)

  2. 开启摄像头并美颜。

     /**
 * 启用摄像头美颜
 * @param constraints 摄像头参数
 * @returns 美颜视频流
 */
openCameraAndRender(constraints?: MediaStreamConstraints): Promise<MediaStream>

  3. 直接渲染到Canvas。

     /**
 * 美颜渲染媒体对象到RenderCanvas
 * RenderCanvas为初始化时指定的Canvas
 * @param mediaObject 媒体对象 TexImageSourceWebCodecs(ImageData | ImageBitmap | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | VideoFrame | OffscreenCanvas) | Uint8Array
 */
renderMediaObjectToRenderCanvas(mediaObject: TexImageSourceWebCodecs | Uint8Array, width?: number, height?: number): void

  4. 基于媒体对象渲染。

    /**
 * 媒体对象渲染
 * 返回渲染后ImageData对象
 * @param mediaElement 媒体对象 TexImageSourceWebCodecs(ImageData | ImageBitmap | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | VideoFrame | OffscreenCanvas) | Uint8Array
 * @param width 
 * @param height 
 * @param renderCallback 
 */
renderWithMediaObject(mediaObject: TexImageSourceWebCodecs | Uint8Array, width: number, height: number, renderCallback: (outImageData: Uint8Array, imageWidth: number, imageHeight: number) => void): void

  5. 基于纹理渲染。

    /**
 * 基于纹理ID渲染并返回纹理对象
 * @param mediaElement 媒体对象 TexImageSourceWebCodecs(ImageData | ImageBitmap | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | VideoFrame | OffscreenCanvas) | Uint8Array
 * @param width 对象width
 * @param height 对象height
 * @returns 纹理对象
 */
renderMediaObjectToTexture(mediaObject: TexImageSourceWebCodecs | Uint8Array, width?: number, height?: number): WebGLTexture | null

  6. 纹理渲染。

    **
 * 基于纹理id渲染
 * 输入纹理id 返回纹理id
 * @param inTextureId 输入纹理id，可以调用buildInputTexture创建纹理ID
 * @param width 媒体对像宽度
 * @param height 媒体对像高度
 * @returns 纹理对象
 */
renderTextureId(textureId: number, imageWidth: number, imageHeight: number, useOutTextureId: number = 0) : WebGLTexture | null;

  7. 基于流渲染。

    /**
 * 视频流渲染 返回渲染视频流
 * 需要Chrome 94+版本浏览器支持
 * @param inputMediaStream 输入媒体流
 */
renderMediaStream(inputMediaStream: MediaStream): MediaStream 
renderMediaStreamTrack(videoMediaStreamTrack: MediaStreamVideoTrack, width?: number, height?: number): MediaStreamVideoTrack
getTransformStream(): TransformStream;//返回美颜转换流处理器

  8. 美颜引擎注销。

    /**
 * 美颜引擎注销
 */
engineDestory();

Animoji表情

  1. Animoji初始化。

    /**
 * Animoji初始化
 * @param animojiUrl animoji资源地址
 * @param width 宽
 * @param height 高
 * @param scale 放大尺寸
 * @returns 
 */
animojiInitialize(animojiUrl: string, width: number, height: number, scale: number): Promise<void>

  2. 图片Animoji渲染。

    /**
 * Animoji 图片渲染
 * @param imageData 图片imageData
 * @param imageWidth 宽
 * @param imageHeight 高
 * @param renderCallBack 渲染回调 
 */
animojiRender(imageData: Uint8Array, imageWidth: number, imageHeight: number, renderCallback: (outImageData:Uint8Array, imageWidth:number, imageHeight:number) => void): void

  3. 媒体对象Animoji渲染。

    /**
 * Animoji渲染
 * @param mediaSource 媒体对象 TexImageSourceWebCodecs(ImageData | ImageBitmap | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | VideoFrame | OffscreenCanvas) | Uint8Array
 * @param imageWidth 宽
 * @param imageHeight 高
 * @param renderCallBack 渲染回调
 */
animojiRenderWithMediaObject(mediaObject: TexImageSourceWebCodecs | Uint8Array, width: number, height: number, renderCallback: (outImageData: Uint8Array, imageWidth: number, imageHeight: number) => void): void

  4. 媒体对象Animoji渲染纹理输出。

    /**
 * Animoji渲染
 * @param mediaObject 媒体对象 TexImageSourceWebCodecs(ImageData | ImageBitmap | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | VideoFrame | OffscreenCanvas) | Uint8Array
 * @param width 宽
 * @param height 高
 * @returns 渲染后纹理对象
 */
animojiRenderMediaObjectToTexture(mediaObject: TexImageSourceWebCodecs | Uint8Array, width?: number, height?: number): WebGLTexture | null

  5. 基于纹理IdAnimoji渲染。

    /**
 * Animoji渲染
 * @param inTextureId 纹理ID
 * @param width 宽
 * @param height 高
 * @returns 渲染后纹理对象
 */
animojiRenderTextureId(inTextureId: number, width: number, height: number): WebGLTexture | null

  6. Animoji大小调整。

     /**
 * Animoji大小调整
 * @param scale 推荐：0.8~1.5
 */
animojiResize(scale: number)

  7. 设置Animoji背景模式。

    /**
 * 设置Animoji背景模式
 * @param mode 背景模式：0：无，1：摄像头背景 2：指定背景图片
 * @param backgroundImgUrl 背景图片，如果mode=2时需要指定
 */
setAnimojiBackgroundWithMode(mode: kBackgroundProcessType, backgroundImgUrl: string)

  8. Animoji引擎注销。

    /**
 * Animoji引擎注销
 */
animojiDestroy()

背景抠图

启用抠图模块需要增加以下依赖：

$ npm add @tensorflow/tfjs
$ npm add @tensorflow/tfjs-backend-webgl
$ npm add @tensorflow/tfjs-backend-webgpu

  1. 绿幕/蓝幕抠图。

    /**
 * 绿幕/蓝幕抠图
 * 开启此抠图功能，纯色背景抠图（setPureColorToBackground）会关闭。
 * @param isBlue 绿幕:false，蓝幕:true
 * @param backgroundImgUrl 背景图片
 * @param threshold 幕布敏感度[1,10]，默认1
 * @param autoThresholdEnabled 是否根据环境动态计算幕布敏感度，为true时调节参数threshold失效，为false时调节参数threshold生效
 * @param outputGrayMask 输出灰色遮罩
 * @param backgroundProcessType 背景处理方式。
 */
setGreenScreenWithUrl = function (isBlue: boolean, backgroundImgUrl: string, threshold: number, autoThreshold: boolean, outputGrayMask: boolean, backgroundProcessType:kBackgroundProcessType): Promise<void>

  2. 实景抠图。

    /**
 * 实景AI抠图
 * @param backgroundImgUrl 抠图背景图片url
 * @returns 
 */
setSegmentBackgroundUrl(backgroundImgUrl: string): Promise<void>

  3. 纯色抠图。

    /**
* 纯色背景抠图。
* 注意：开启此抠图功能，绿幕抠图（setGreenScreen）会关闭。
* @param backgroundImgPath 背景图片url
* @param threshold 幕布敏感度[1,10]，默认1
* @param colorType 需要被替换的颜色类型，0绿色(green)，1蓝色(blue)，2青色(cyan)，3紫色(purple)，4黄色(yellow)，5红色(red)，默认0。
*/
setPureColorBackgroundUrl(backgroundImgUrl: string, threshold: number, colorType: number): Promise<void>

参数配置

  1. 配置美颜类型。

    /**
 * 配置美颜类型
 * @param type 美颜类型kQueenBeautyType枚举
 * @param enable 是否启用
 */
setQueenBeautyType(type: kQueenBeautyType, enable: boolean)

  2. 配置美颜参数值。

    /**
 * 配置美颜参数值
 * @param param 美颜参数kQueenBeautyParams枚举
 * @param value 参数值
 */
setQueenBeautyParams(param: kQueenBeautyParams, value: number)

  3. 配置LUT滤镜。

     /**
 * 使用内置Lut滤镜
 * @param lutType Assets.kResLut枚举
 * @returns 
 */
setLutByType(lutType: Assets.kResLut): Promise<void>
 
/**
 * 设置Lut滤镜
 * @param imageUrl 所要设置的滤镜图片Url
 * @returns 
 */
setLutImageUrl(imageUrl: string): Promise<void>

  4. 设置美型类型。

    /**
 * 设置美型类型,设置前需要将kQueenBeautyType.FaceShape打开
 * @param faceShapeType 需要设置美型的类型，kQueenBeautyFaceShapeType枚举
 * @param value 需要设置的值
 */
setFaceShape(faceShapeType: kQueenBeautyFaceShapeType, value: number)

  5. 美妆API。

    1. 使用内置资源进行美妆。

      /**
 * 设置美妆眉毛
 * @param eyeBrowType 眉毛类型,kResMakeupEyeBrow枚举
 * @alpha 妆容透明度
 * @param blend 混合类型,kQueenBeautyBlend枚举
 * @returns 
 */
setMakeupEyeBrow(eyeBrowType: Assets.kResMakeupEyeBrow, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * 设置美妆睫毛
 * @param eyelashType 睫毛类型,kResMakeupEyeLash枚举
 * @alpha 妆容透明度
 * @param blend 混合类型,kQueenBeautyBlend枚举
 * @returns 
 */
setMackupEyeLash(eyelashType: Assets.kResMakeupEyeLash, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * 设置美妆眼影
 * @param eyeShadowType 眼影类型,kResMakeupEyeShadow
 * @alpha 妆容透明度
 * @param blend 混合类型,kQueenBeautyBlend枚举
 * @returns 
 */
setMakeupEyeShadow(eyeShadowType: Assets.kResMakeupEyeShadow, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * 设置美妆眼线
 * @param eyeLinerType 眼线类型,kResMakeupEyeLiner检举
 * @alpha 妆容透明度
 * @param blend 混合类型,kQueenBeautyBlend枚举
 * @returns 
 */
setMakeupEyeLiner(eyeLinerType: Assets.kResMakeupEyeLiner, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * 设置美妆美瞳
 * @param eyeballType 美瞳类型,kResMakeupEyeBall枚举
 * @alpha 妆容透明度
 * @param blend 混合类型,kQueenBeautyBlend枚举
 * @returns 
 */
setMakeupEyeBall(eyeballType: Assets.kResMakeupEyeBall, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * 设置美妆口红
 * @param mouthType 口红类型,kResMakeupMouth枚举
 * @alpha 妆容透明度
 * @param blend 混合类型,kQueenBeautyBlend枚举
 * @returns 
 */
setMakeupMouth(mouthType: Assets.kResMakeupMouth, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * 设置美妆整妆
 * @param wholeType 美妆整妆类型 Assets.kResMakeupWhole枚举
 * @alpha 妆容透明度
 * @param blend 混合类型,kQueenBeautyBlend枚举
 * @returns 
 */
setMakeupWhole(wholeType: Assets.kResMakeupWhole, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * 设置美妆腮红
 * @param blushType 腮红类型,kResMakeupBlush检举
 * @alpha 妆容透明度
 * @param blend 混合类型,kQueenBeautyBlend枚举 
 * @returns 
 */
setMakeupBlush(blushType: Assets.kResMakeupBlush, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

/**
 * 设置美妆高光
 * @param highlightType 高光类型kResMakeupHighLight枚举
 * @alpha 妆容透明度
 * @param blend 混合类型,kQueenBeautyBlend枚举 
 * @returns 
 */
setMakeupHighlight(highlightType: Assets.kResMakeupHighLight, alpha: number, blend: kQueenBeautyBlend = kQueenBeautyBlend.LabMix): Promise<void>

    2. 设置美妆类型和图片素材路径。

       /**
* 设置美妆类型和图片素材路径，设置美妆需要将kQueenBeautyType.Makeup 打开
* @param makeupType 美妆类型 kQueenBeautyMakeupType枚举
* @param imageUrl 美妆素材Url地址
* @param blend 混合类型kQueenBeautyBlend枚举
*/
setMakeupWithUrl(makeupType: kQueenBeautyMakeupType, imageUrl: string, blend: kQueenBeautyBlend): Promise<void>

    3. 设置美妆类型和图片素材路径。

      /**
* 设置美妆类型和图片素材路径，设置美妆需要将kQueenBeautyType.Makeup 打开
* @param makeupType 美妆类型
* @param packageUrl 资源压缩包url
* @param imageName 包内图片名称
* @param blend 混合类型 混合类型kQueenBeautyBlend枚举
*/
setMakeupWithPackage(makeupType: kQueenBeautyMakeupType, packageUrl: string, imageName: string, blend: kQueenBeautyBlend): Promise<void>

    4. 设置美妆透明度。

      /**
* 设置美妆透明度，可指定性别
* @param makeupType 美妆类型
* @param isFeMale 是否是女性，女性:true，男性:false，（男性为接口预留，这里均传女性即true即可）
* @param alpha 妆容透明度
*/
setMakeupAlphaWithType = function (makeupType: kQueenBeautyMakeupType, isFeMale: boolean, alpha: number)

    5. 设置美妆类型的混合类型。

      /**
* 设置美妆透明度，可指定性别
* @param makeupType 美妆类型
* @param isFeMale 是否是女性，女性:true，男性:false，（男性为接口预留，这里均传女性即true即可）
* @param alpha 妆容透明度
*/
setMakeupAlphaWithType(makeupType: kQueenBeautyMakeupType, isFeMale: boolean, alpha: number)

    6. 移除美妆效果。

      /**
 * 移除美妆效果
 * @param makeupType 美妆类型
 */
removeMakeupWithType(makeupType: kQueenBeautyMakeupType): void

    7. 清除所有美妆。

      /**
* 清除所有美妆
*/
resetAllMakeupType()

  6. 贴纸API。

    1. 增加贴纸。

       /**
 * 设置内置资源贴纸
 * @param stickerType 内置贴纸类型
 * @returns 
 */
addMaterialWithType(stickerType: Assets.kResSticker): Promise<void>
/**
 * 设置内置资源贴纸
 * @param stickerIndex 内置贴纸索引值
 * @returns 
 */
addMaterialWithIndex(stickerIndex: number): Promise<void> 
 
/**
 * 设置贴纸
 * @param materialZipUrl 贴纸资源包Url
 * @returns 
 */
addMaterialWithUrl(materialZipUrl: string): Promise<void>

    2. 移除贴纸。

      /**
 * 删除贴纸/贴图/实景抠图需要替换的背景
 * @param materialZipUrl 
 */
removeMaterialWithUrl(materialZipUrl: string)
 /**
 * 移除贴纸
 * @param stickerType 内置贴纸类型
 * @returns 
 */
removeMaterialWithType(stickerType: Assets.kResSticker);
/**
 * 移除贴纸
 * @param stickerIndex 内置贴纸索引值
 * @returns 
 */
removeMaterialWithIndex(stickerIndex: number)

  7. 功能调试。

    1. 展示人脸识别点位。

      /**
* 展示人脸识别点位
* @param show 是否展示
*/
showFaceDetectPoint(show: boolean)

    2. 展示人脸区域三角剖分线。

      /**
* 展示人脸区域三角剖分线
* @param show 是否展示
*/
showMakeupLine(show: boolean)

    3. 显示人体检测点。

      /**
 * 显示人体关键点
 * @param show 是否显示
 */
showBodyDetectPoint(show: boolean)

  8. 美体美颜，设置美体形变。

    /**
 * 设置美体美颜
 * @param bodyShapeType 美体类型
 * @param value 形变程度
 */
setBodyShape(bodyShapeType: kQueenBeautyBodyShapeType, value: number)

AR隔空写字

  1. 装载AR隔空写字模块。

     /**
 * 初始化AR写字模块
 * @returns 
 */
initArWriteResource(): Promise<boolean>

  2. 开启Ar写字。

     /**
 * 开启Ar写字
 * @param enable true： 开启
 * @param mode 1: 写字, 2: 画画。
 */
setArWriting(enable: boolean, mode: number): void

  3. 清除AR写字痕迹。

    /**
 * 清除AR写字痕迹
 */
cleanScreenArWriting(): void

资源载入

参数配置中所有的url均需要转成path才能正常使用，需要通过下面的API将url资源文件载入到Queen引擎中生成path。

  1. 通过url载入资源。

     /** 
 * 载入url资源到引擎
 * @param url url链接
 * @param needUnZip 是否需要解压
 * @returns 
 */
loadResourceFileWithUrl(url: string, needUnZip: boolean): Promise<string>

/**
 * 载入url资源到引擎
 * @param url url链接
 * @param saveFileName 保存的文件名
 * @param needUnZip 是否需要解压
 * @returns 
 */
loadResourceFileWithUrlSaveAs(url: string, saveFileName: string, needUnZip: boolean): Promise<string>

  2. 通过buffer写入。

    /**
 * 载入资源到引擎
 * @param buffer 数据流buffer
 * @param saveFileName 保存的文件名
 * @param needUnZip 是否需要解压
 * @returns 
 */
loadResourceFileWithData(buffer: ArrayBuffer, saveFileName: string, needUnZip: boolean)

  3. 文件检查。

    /**
* 验证资源文件是否存在
* @param fullFileName 完整的路径文件名
* @returns 
*/
checkResourceFile(fullFileName: string)
文档推荐
  • 本页导读 （1）
文档反馈