本文介绍微信小程序端的接入方法。
准备工作
申请LicenseKey,获取方式请参见获取美颜特效SDK License。
集成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>需要替换成实际使用的值。
配置美颜参数
设置基础美颜。
// 开启基础美颜 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说明。
常见问题
licenseKey如何获取?
获取方法请参见获取美颜特效SDK License。
使用SDK报错
请检查初始化传入的licenseKey是否有效。
License绑定的应用,Web域名需要配置为小程序appid.servicewechat.com。
初始化Queen引擎时,Canvas需要显式传入。
目前美颜特效小程序SDK仅支持Canvas组件,暂不支持Camera组件。
该文章对您有帮助吗?