集成Web端美颜特效SDK的方法_视频直播(LIVE)-阿里云帮助中心

Queen SDK是一个Web端美颜特效组件，支持基础美颜等美颜功能。本文介绍在Web端接入美颜特效SDK。

准备工作

申请试用LicenseKey，获取方式请参见获取美颜特效SDK License。
下载美颜特效Web SDK包并解压，请参见下载美颜特效SDK。
将SDK包中的sdk_dist目录文件复制到项目中。
导入Queen SDK。

import QueenEngine, {kQueenBeautyType, kQueenBeautyParams, kQueenBeautyMakeupType, kQueenBeautyFaceShapeType, kQueenBeautyBlend,} from "@/queensdk"

接入示例

初始化Queen引擎

 const sdkUrl= "./";//queen sdk bin文件目录
 const sdkLicense = "";//queen sdk 授权licensekey
 const queenCanvasId = "canvas";//渲染使用的canvas id
 let queenEngine = new QueenEngine();
 queenEngine.initialize(sdkUrl, sdkLicense, function(){
 //初始化完成
 }, function(progress){
 //progress：加载进展条
 }, queenCanvasId);

配置美颜参数

// 开启基础美颜
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);

基于imageData对象渲染

const ctx = document.getElementById("sourceCanvas").getContext('2d');
const imgData = ctx.getImageData(0, 0, weblCtx.canvas.width, weblCtx.canvas.height);
queenEngine.render(new Uint8Array(imageSource.data), weblCtx.canvas.width, weblCtx.canvas.height, drawWithImageData) 

function drawWithImageData(imageBufferData, imgWidth, imgHeight) {
 let ctx = document.getElementById("effectCanvas").getContext("2d");
 let imageBuffer = new Uint8ClampedArray(imageBufferData);
 let imageData = new ImageData(imageBuffer, imgWidth, imgHeight);
 ctx.clearRect(0, 0, imgWidth, imgHeight);
 ctx.putImageData(imageData, 0, 0);
}

纹理渲染

const canvas = document.getElementById("sourceCanvas")
let outTexture = queenEngine.renderMediaObjectToTexture(canvas, canvas.width, canvas.height)
drawTexture(outTexture)
...