圖像雲識別微信小程序示例說明
本篇將帶您深入分析樣例程式碼，幫助您理解並在此基礎上開發自己的實例。
sample 下載與配置說明，請參考快速入門。
識別目標設定
在雲識別管理中，上傳一張識別圖片。
識別圖片名稱：給識別目標一個名稱，如「熊貓」。
上傳識別圖片：選擇並上傳一張圖片，本樣例中使用的圖片為：
寬度：識別圖的寬度（cm）。識別圖的高度將由系統根據您上傳的圖片自動計算。識別圖的大小和虛擬內容的大小對應，本樣例中未使用。
Meta：附加資訊，一般用於儲存 AR 內容資訊，本樣例中使用的內容：
{"modelUrl": "https://sightp-assets.sightp.com/crs-mini/xiaoxiongmao.glb", "scale": 0.4}
識別目標獲取
在調用雲識別 API，識別到目標後，會返回目標資訊，結構如下：
{
"statusCode" : 0,
"result" : {
"target" : {
"targetId" : "375a4c2e********915ebc93c400",
"meta" : "eyJtb2RlbFVybCI6ICJhc3NldC9tb2RlbC90cmV4X3YzLmZieCIsICJzY2FsZSI6IDAuMDJ9",
"name" : "demo",
"trackingImage": "/9j/4AAQSkZJRgABAQ************/9k=",
"modified" : 1746609056804
}
},
"date" : "2026-01-05T05:50:36.484Z",
"timestamp" : 1767592236484
}
提示
完整字段資訊查看 API 參考
將 meta 使用 base64 解碼，獲取 meta 原始資訊。
// data 為返回的數據
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));
附註
微信小程序中沒有 atob 方法，需要自行實現。
實現方法在示例目錄 libs/atob.js 檔案中。
主要程式碼說明
components/easyar-cloud/easyar-cloud.js
使用
wx.createCameraContext打開攝像頭、截取圖片及訪問雲識別等方法。components/easyar-ar/easyar-ar.js
使用 xr-frame 打開攝像頭、截取圖片、訪問雲識別及播放影片與渲染模板等方法。
components/libs/crs-client.js
Token 生成及雲識別訪問等方法。
警告
不要在客戶端（如 Web，微信小程序等）應用上直接使用 API Key 與 API Secret。
這裡僅作演示使用，生產環境使用時請在服務端生成 Token。
程式碼深入理解
若您期望對雲識別開發進行更為深入的學習，強烈建議您閱讀 sample 源碼。在此基礎上，您可以嘗試對源碼進行修改與擴展。
提示
以下內容講解基於您已具備一定程度的 HTML 與 JavaScript 開發能力這一前提條件。若您尚未掌握這些基礎技能，建議先系統學習相關知識，以便更好地理解後續內容。
微信小程序上使用的 XR/3D 引擎是 XR-FRAME，如果您不熟悉，建議先參考一下文件。
我們將以渲染 3D 模型為例，介紹 sample 中主要的源碼說明。
UI 及場景處理
檔案 components\easyar-ar\easyar-ar.wxml說明。
XR 場景及 Marker 設定。
<xr-scene ar-system="modes:Marker" id="xr-scene" bind:ready="handleReady" bind:ar-ready="handleARReady" bind:tick="handleTick">
<xr-node>
<xr-ar-tracker wx:if="{{markerImg != ''}}" mode="Marker" src="{{markerImg}}" id="arTracker"></xr-ar-tracker>
<xr-camera id="camera" node-id="camera" position="0.8 2.2 -5" clear-color="0.925 0.925 0.925 1" background="ar" is-ar-camera></xr-camera>
</xr-node>
<xr-shadow id="shadow-root"></xr-shadow>
<xr-node node-id="lights">
<xr-light type="ambient" color="1 1 1" intensity="2" />
<xr-light type="directional" rotation="180 0 0" color="1 1 1" intensity="1" />
</xr-node>
</xr-scene>
提示
markerImg 為識別圖片地址，雲識別識別到目標時會返回。
業務處理
檔案 components\easyar-ar\easyar-ar.js 主要程式碼說明。
handleTick() {
// 截圖並發送到雲識別服務
this.capture().then(base64 => this.crsClient.searchByBase64(base64.split('base64,').pop())).then(res => {
// 雲識別返回的結果
console.info(res)
// 返回為 0 表示未識別到目標
if (res.statusCode != 0) {
return;
}
const target = res.result.target;
// 設置marker
this.loadTrackingImage(target.trackingImage.replace(/[\r\n]/g, ''));
// 從meta信息中檢測是模型，還是影片
try {
const setting = JSON.parse(atob(target.meta));
if (setting.modelUrl) {
this.loadModel(target.targetId, setting);
} else if (setting.videoUrl) {
this.loadVideo(target.targetId, setting);
}
} catch (e) {
console.error(e);
}
}).catch(err => {
console.info(err)
});
},
capture() {
// 獲取攝像頭圖片
const opt = { type: 'jpg', quality: this.properties.config.jpegQuality };
if (this.scene.share.captureToDataURLAsync) {
return this.scene.share.captureToDataURLAsync(opt);
}
return Promise.resolve(this.scene.share.captureToDataURL(opt));
},
提示
完整程式碼請查看示例源檔案。
雲識別處理
檔案 components/libs/crs-client.js 主要方法說明。
發送圖片 base64 數據到雲識別服務 API。
searchByBase64(img) {
const params = {
image: img,
notracking: 'false',
appId: this.config.crsAppId,
};
return this.queryToken().then(token => {
return new Promise((resolve, reject) => {
wx.request({
url: `${this.config.clientEndUrl}/search`,
method: 'POST',
data: params,
header: {
'Authorization': token,
'content-type': 'application/json'
},
success: res => resolve(res.data),
fail: err => reject(err),
});
});
});
}
預期效果
- 示例首頁
- 渲染模型效果