产品动态
关于腾讯特效 SDK V3.5 版本更新公告
关于腾讯特效 SDK V3.0 版本相关接口及素材变更公告
<script charset="utf-8" src="https://webar-static.tencent-cloud.com/ar-sdk/resources/latest/webar-sdk.umd.js"></script><script src="https://webar-static.tencent-cloud.com/docs/examples/js-sha256/0.9.0/sha256.min.js"></script>
<img id="inputImageElement" src="https://webar-static.tencent-cloud.com/docs/test/m4-1080.jpg"><canvas id="arOutputElement" style="width: 400px;display: inline-block;margin-left: 20px;"></canvas>
/** ----- 鉴权配置 ----- *//*** 腾讯云账号 APPID** 进入[腾讯云账号中心](https://console.tencentcloud.com/developer) 即可查看 APPID*/const APPID = ''; // 此处请填写您自己的参数/*** Web LicenseKey** 上述准备工作中创建的 license*/const LICENSE_KEY = ''; // 此处请填写您自己的参数/*** 计算签名用的密钥 Token** 注意：此处仅用于 DEMO 调试，正式环境中请将 Token 保管在服务端，签名方法迁移到服务端实现，通过接口提供，前端调用拉取签名，参考* 获取签名信息（https://www.tencentcloud.com/document/product/616/71364?from_cn_redirect=1#cf3401f9-e22e-4f54-9e2d-942c08be0f93）*/const token = ''; // 此处请填写您自己的参数/** ----------------------- *//*** 定义获取签名方法** 注意：此处方案仅适用于 DEMO 调试，正式环境中签名方法推荐在服务端实现，通过接口提供，前端调用拉取签名，参考* 准备签名信息（https://www.tencentcloud.com/document/product/616/71364?from_cn_redirect=1#e4ce3483-41f7-4391-83ae-f4b61e221ea0）*/const getSignature = function () {const timestamp = Math.round(new Date().getTime() / 1000);const signature = sha256(timestamp + token + APPID + timestamp).toUpperCase();return { signature, timestamp };};const inputImageElement = document.getElementById('inputImageElement');const arOutputElement = document.getElementById('arOutputElement');// ar sdk 基础配置参数const config = {module: {beautify: true,},auth: {licenseKey: LICENSE_KEY,appId: APPID,authFunc: getSignature},input: inputImageElement, // 输入图片所在的 imag elementoutput: arOutputElement, // 输出处理后的图片到指定的 canvas 容器beautify: { // 默认的美颜配置"eye": 0.5,"whiten": 0.4,"dermabrasion": 0.6,"lift": 0.1,"shave": 0.2,},}// config 传入 ar sdk，初始化 ArSdk 实例const { ArSdk } = window.AR;const arSdk = new ArSdk(config);arSdk.on('error', (e) => {console.log(e);});
updateInputImage 接口更新图片。<input type="file" id="imageInput" accept="image/*" style="display: none;">
const imageInput = document.getElementById('imageInput');imageInput.addEventListener('change', function () {const file = this.files[0];if (file) {const reader = new FileReader();reader.onload = function (event) {inputImageElement.src = event.target.result;inputImageElement.onload = function () {arSdk.updateInputImage({width: inputImageElement.width,height: inputImageElement.height,input: inputImageElement,})};};reader.readAsDataURL(file);}});
setBeautify 接口设置美颜，setEffect 接口设置美妆、人脸贴纸等素材。// 设置美妆function setMakeUp() {if (!arSdk) returnarSdk.setEffect([{id: 'CE82819618A6CDA3', // 美妆，贴纸等素材 idintensity: 0.8}])}// 清空美妆function clearMakeUp() {if (!arSdk) returnarSdk.setEffect(null)}// 设置美颜function setBeautify() {if (!arSdk) returnarSdk.setBeautify({"eye": Math.random() * 1,"whiten": Math.random() * 1,"dermabrasion": Math.random() * 1,"lift": Math.random() * 1,"shave": Math.random() * 1,})}// 清空美颜function clearBeautify() {if (!arSdk) returnarSdk.setBeautify({"eye": 0,"whiten": 0,"dermabrasion": 0,"lift": 0,"shave": 0,})}
takePhoto 接口获取处理后的图片 ImageData，渲染到 canvas 中并下载。<canvas id="photoCanvas" style="display: none;"></canvas><button id="downloadImage">下载图片</button>
const downloadImage = document.getElementById('downloadImage');downloadImage.addEventListener('click', async () => {if (!arSdk) {alert('Please initAR first～')return}const imageData = await arSdk.takePhoto();photoCanvas.width = imageData.width;photoCanvas.height = imageData.height;const context = photoCanvas.getContext("2d");context.putImageData(imageData, 0, 0);const base64Image = photoCanvas.toDataURL("image/png");const a = document.createElement("a");a.href = base64Image;a.download = "downloadedImage.png";document.body.appendChild(a);a.click();document.body.removeChild(a);})
Serving! ││ ││ - Local: http://localhost:57965 ││ - On Your Network: http://10.91.28.94:57965 ││ ││ This port was picked because 5000 is in use. ││ ││ Copied local address to clipboard!
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Image Upload and Display</title></head><body><div>step1: <button id="initAR">初始化 AR SDK</button></br>step2: <button id="selectAndProcess">更新图片</button></div><div>step3: <button onclick="setMakeUp()">设置特效</button><button onclick="clearMakeUp()">清空特效</button><button onclick="setBeautify()">设置美颜</button><button onclick="clearBeautify()">清空美颜</button></div><div>step4: <button id="downloadImage">下载图片</button></div><input type="file" id="imageInput" accept="image/*" style="display: none;"><br><img id="inputImageElement" src="https://webar-static.tencent-cloud.com/docs/test/m4-1080.jpg"><canvas id="arOutputElement" style="display: inline-block;"></canvas><canvas id="photoCanvas" style="display: none;"></canvas><script charset="utf-8" src="https://webar-static.tencent-cloud.com/ar-sdk/resources/latest/webar-sdk.umd.js"></script><script src="https://webar-static.tencent-cloud.com/docs/examples/js-sha256/0.9.0/sha256.min.js"></script><script>let arSdk;// todo：Enter the license informationconst APPID = "";const LICENSE_KEY = "";const token = "";const getSignature = function () {const timestamp = Math.round(new Date().getTime() / 1000);const signature = sha256(timestamp + token + APPID + timestamp).toUpperCase();return {signature,timestamp};};const selectAndProcess = document.getElementById('selectAndProcess');const imageInput = document.getElementById('imageInput');const downloadImage = document.getElementById('downloadImage');const inputImageElement = document.getElementById('inputImageElement');const initArBtn = document.getElementById('initAR');const arOutputElement = document.getElementById('arOutputElement');const photoCanvas = document.getElementById('photoCanvas');initArBtn.addEventListener('click', async () => {arSdk = await getInstance();alert('Init AR SDK Success!!!')})selectAndProcess.addEventListener('click', () => {if (!arSdk) {alert('Please click initAR to init AR SDK')return}imageInput.click();})downloadImage.addEventListener('click', async () => {if (!arSdk) {alert('Please click initAR to init AR SDK')return}const imageData = await arSdk.takePhoto();photoCanvas.width = imageData.width;photoCanvas.height = imageData.height;const context = photoCanvas.getContext("2d");context.putImageData(imageData, 0, 0);const base64Image = photoCanvas.toDataURL("image/png");const a = document.createElement("a");a.href = base64Image;a.download = "downloadedImage.png";document.body.appendChild(a);a.click();document.body.removeChild(a);})imageInput.addEventListener('change', function () {const file = this.files[0];if (file) {const reader = new FileReader();reader.onload = function (event) {inputImageElement.src = event.target.result;inputImageElement.onload = function () {arSdk.updateInputImage({width: inputImageElement.width,height: inputImageElement.height,input: inputImageElement,})};};reader.readAsDataURL(file);}});function setMakeUp() {if (!arSdk) returnarSdk.setEffect([{id: 'CE82819618A6CDA3', // 美妆，贴纸等素材 idintensity: 0.8}])}function clearMakeUp() {if (!arSdk) returnarSdk.setEffect(null)}function clearBeautify() {if (!arSdk) returnarSdk.setBeautify({"eye": 0,"whiten": 0,"dermabrasion": 0,"lift": 0,"shave": 0,})}function setBeautify() {if (!arSdk) returnarSdk.setBeautify({"eye": Math.random() * 1,"whiten": Math.random() * 1,"dermabrasion": Math.random() * 1,"lift": Math.random() * 1,"shave": Math.random() * 1,})}async function getInstance() {if (arSdk) {return Promise.resolve(arSdk)}const config = {module: {beautify: true,segmentation: false},auth: {licenseKey: LICENSE_KEY,appId: APPID,authFunc: getSignature},input: inputImageElement,output: arOutputElement,beautify: {"eye": Math.random() * 1,"whiten": Math.random() * 1,"dermabrasion": Math.random() * 1,"lift": Math.random() * 1,"shave": Math.random() * 1,},}return new Promise((resolve) => {const sdk = new window.AR.ArSdk(config)sdk.on('resourceReady', async () => {// get makeuplistsdk.getEffectList({Type: 'Preset',Label: 'Makeup',}).then((res) => {const list = res.map(item => ({name: item.Name,id: item.EffectId,cover: item.CoverUrl,url: item.Url,label: item.Label,type: item.PresetType,}));console.log('makeuplist', list)})resolve(sdk)})sdk.on('ready', () => {})sdk.on('error', (e) => {console.log(e);});})}</script></body></html>
文档反馈