Table of Contents

Esempio di mini-programma WeChat per il riconoscimento cloud di immagini

Questo articolo ti guiderà attraverso un'analisi approfondita del codice di esempio, aiutandoti a comprenderlo e sviluppare la tua istanza basata su di esso.

Per le istruzioni sul download e la configurazione del sample, fare riferimento a Guida rapida.

Impostazione degli obiettivi di riconoscimento

Nella gestione del riconoscimento cloud, carica un'immagine di riconoscimento.

  • Nome immagine di riconoscimento: assegna un nome all'obiettivo di riconoscimento, ad esempio "Panda".

  • Carica immagine di riconoscimento: seleziona e carica un'immagine. L'immagine utilizzata in questo esempio è:

    sample

  • Larghezza: larghezza dell'immagine di riconoscimento (cm). L'altezza verrà calcolata automaticamente dal sistema in base all'immagine caricata. La dimensione dell'immagine di riconoscimento corrisponde alla dimensione del contenuto virtuale, non utilizzata in questo esempio.

  • Meta: informazioni aggiuntive, generalmente utilizzate per memorizzare informazioni sul contenuto AR. In questo esempio viene utilizzato:

    {"modelUrl": "https://sightp-assets.sightp.com/crs-mini/xiaoxiongmao.glb", "scale": 0.4}

sample

Recupero degli obiettivi di riconoscimento

Quando si chiama l'API di riconoscimento cloud, dopo aver riconosciuto un obiettivo, vengono restituite le informazioni sull'obiettivo con la seguente struttura:

{
  "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
}
Consiglio

Consulta Riferimento API per i campi completi

Decodifica il meta utilizzando base64 per ottenere le informazioni originali del meta.

// data sono i dati restituiti
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));
Nota

Non esiste un metodo atob nei mini-programmi WeChat, è necessario implementarlo autonomamente.

Il metodo di implementazione si trova nel file libs/atob.js nella directory di esempio.

Spiegazione del codice principale

  • components/easyar-cloud/easyar-cloud.js

    Utilizza metodi come wx.createCameraContext per aprire la fotocamera, acquisire immagini e accedere al riconoscimento cloud.

  • components/easyar-ar/easyar-ar.js

    Utilizza xr-frame per aprire la fotocamera, acquisire immagini, accedere al riconoscimento cloud e riprodurre video e modelli di rendering.

  • components/libs/crs-client.js

    Metodi per la generazione del Token e l'accesso al riconoscimento cloud.

Avvertenza

Non utilizzare direttamente API Key e API Secret nelle applicazioni client (come Web, mini-programmi WeChat, ecc.).

Qui viene utilizzato solo a scopo dimostrativo. Per l'uso in produzione, generare il Token sul server.

Comprensione approfondita del codice

Se desideri approfondire lo sviluppo del riconoscimento cloud, ti consigliamo vivamente di leggere il codice sorgente del sample. Su questa base, puoi provare a modificare ed estendere il codice sorgente.

Consiglio

I seguenti contenuti presuppongono che tu abbia già una certa capacità di sviluppo HTML e JavaScript. Se non hai ancora padroneggiato queste competenze di base, ti suggeriamo di studiarle sistematicamente per comprendere meglio i contenuti successivi.

Il motore XR/3D utilizzato sui mini-programmi WeChat è XR-FRAME. Se non lo conosci, ti consigliamo di consultare la documentazione.

Prenderemo come esempio il rendering di un modello 3D per spiegare i principali codici sorgente nel sample.

Elaborazione dell'interfaccia utente e della scena

Spiegazione del file components\easyar-ar\easyar-ar.wxml.

Impostazioni della scena XR e del 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>
Consiglio

markerImg è l'URL dell'immagine di riconoscimento, restituito quando il riconoscimento cloud rileva un obiettivo.

Elaborazione delle operazioni

Spiegazione del codice principale nel file components\easyar-ar\easyar-ar.js.

handleTick() {
    // Acquisisci un'istantanea e inviala al servizio di riconoscimento cloud            
    this.capture().then(base64 => this.crsClient.searchByBase64(base64.split('base64,').pop())).then(res => {
        // Risultato restituito dal riconoscimento cloud
        console.info(res)

        // Restituisce 0 se non viene rilevato alcun obiettivo
        if (res.statusCode != 0) {
            return;
        }

        const target = res.result.target;

        // Imposta il marker
        this.loadTrackingImage(target.trackingImage.replace(/[\r\n]/g, ''));

        // Verifica dal meta se si tratta di un modello o di un video
        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() {
    // Ottieni l'immagine dalla fotocamera
    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));
},
Consiglio

Consulta il file sorgente dell'esempio per il codice completo.

Elaborazione del riconoscimento cloud

Spiegazione dei metodi principali nel file components/libs/crs-client.js.

Invia i dati base64 dell'immagine all'API del servizio di riconoscimento cloud.

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),
            });
        });
    });
}

Effetto previsto

  • Pagina iniziale dell'esempio

Effetto previsto

  • Effetto di rendering del modello

Argomenti correlati