uni-app平台接入美颜特效SDK
本文介绍uni-app平台接入美颜特效SDK的方法。
注意事项
目前Uni-app接入美颜特效，仅支持打包微信小程序/Web端，暂不支持打包Android/Ios端。
准备工作
申请LicenseKey，获取方式请参见获取美颜特效SDK License。
集成SDK
下载以下文件保存至项目文件夹中，并将queen.wasm.bin改名为queen.wasm.br。
功能使用
初始化
注册License初始化Queen引擎。
let queenEngine: any
const sdkLicenseKey = '*********' // queen sdk 授权licenseKey
async function init(){
const canvasContainer = document.querySelector('.container') as HTMLElement;
const canvas = document.createElement('canvas') as HTMLCanvasElement;
canvas.setAttribute('type', 'webgl2');
canvasContainer.appendChild(canvas);
const queenEngine = new QueenEngine();
queenEngine.init(sdkLicenseKey, function(){
//初始化完成回调
}, function(progress){
//progress：加载进展条
}, canvas);
}
//调用init()方法即进行组件初始化配置美颜参数
设置基础美颜。
// 开启基础美颜 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);设置高级美颜。
//高级美颜 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);设置美型。
// 打开美型功能开关，美型参数详见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);设置美妆。
使用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(() => { });
设置滤镜。
使用内置滤镜。
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); });
设置头像贴纸。
使用内置贴纸。
queenEngine.addMaterialWithType(Assets.kResSticker.ILoveChina); //或 queenEngine.addMaterialWithIndex(0); //同时设置多个 queenEngine.addMaterialWithIndexs([0,1]);使用自定义贴纸。
const stickerZip = "./sticker.zip"; queenEngine.addMaterialWithUrl(stickerZip).then(() => { });
配置绿幕抠图。
const backgroundUrl = "./bg.png"; const isBlue = false;//是否蓝幕 queenEngine.setGreenScreenWithUrl(isBlue, backgroundUrl).then(() => { });配置背景处理。
//背景透明 queenEngine.enableTransparentBackground(true);
API文档
API文档请参见API说明。