Table of Contents

Descrizione dell'esempio di riconoscimento immagini cloud per mini program WeChat

Questo articolo guida l'utente in un'analisi approfondita del codice sample, aiutandolo a comprenderlo e a sviluppare esempi propri su questa base.

Per il download e la configurazione del sample, consultare Avvio rapido.

Configurazione del target di riconoscimento

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

  • Nome immagine di riconoscimento: assegnare un nome al target di riconoscimento, ad esempio "Panda".

  • Carica immagine di riconoscimento: selezionare e caricare un'immagine. L'immagine usata in questo sample è:

    sample

  • Larghezza: larghezza dell'immagine di riconoscimento (cm). L'altezza sarà calcolata automaticamente dal sistema in base all'immagine caricata. La dimensione dell'immagine di riconoscimento corrisponde alla dimensione del contenuto virtuale; questo sample non la usa.

  • Meta: informazioni aggiuntive, generalmente usate per memorizzare informazioni sui contenuti AR. Il contenuto usato in questo sample è:

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

sample

Ottenere il target di riconoscimento

Dopo aver chiamato l'API di riconoscimento cloud e riconosciuto il target, verranno restituite le informazioni del target 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

Per le informazioni complete sui campi, consultare API Reference

Decodificare meta con base64 per ottenere le informazioni meta originali.

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

Nei mini program WeChat non esiste il metodo atob, quindi deve essere implementato autonomamente.

L'implementazione si trova nel file libs/atob.js nella directory dell'esempio.

Descrizione del codice principale

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

    Metodi per usare wx.createCameraContext per aprire la camera, acquisire immagini e accedere al riconoscimento cloud.

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

    Metodi per usare xr-frame per aprire la camera, acquisire immagini, accedere al riconoscimento cloud, riprodurre video e renderizzare template.

  • components/libs/crs-client.js

    Metodi per generare Token e accedere al riconoscimento cloud.

Avvertenza

Non usare API Key e API Secret direttamente nelle applicazioni client (come Web, mini program WeChat, ecc.).

Questo è solo per dimostrazione. In produzione, generare Token sul lato server.

Comprendere il codice in profondità

Se si desidera approfondire lo sviluppo del riconoscimento cloud, si consiglia vivamente di leggere il source code del sample. Su questa base, è possibile provare a modificare ed estendere il source code.

Consiglio

La spiegazione seguente presuppone che l'utente abbia già un certo livello di competenze di sviluppo HTML e JavaScript. Se non si padroneggiano ancora queste basi, si consiglia di studiarle sistematicamente per comprendere meglio i contenuti successivi.

Il motore XR/3D usato nei mini program WeChat è XR-FRAME. Se non è familiare, si consiglia di consultare prima la documentazione.

Useremo il rendering di un modello 3D come esempio per introdurre le principali spiegazioni del source code nel sample.

UI e gestione della scena

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

Impostazione 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'indirizzo dell'immagine di riconoscimento, restituito quando il riconoscimento cloud identifica un target.

Elaborazione business

Descrizione del codice principale del file components\easyar-ar\easyar-ar.js.

handleTick() {
    // Acquisire lo screenshot e inviarlo 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)

        // Il ritorno di 0 indica che non è stato riconosciuto alcun target
        if (res.statusCode != 0) {
            return;
        }

        const target = res.result.target;

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

        // Rilevare dalle informazioni meta se si tratta di modello o 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() {
    // Ottenere l'immagine della camera
    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

Per il codice completo, consultare il file sorgente dell'esempio.

Elaborazione del riconoscimento cloud

Descrizione dei metodi principali del file components/libs/crs-client.js.

Inviare 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