Introduction

Dans cet article, nous explorerons comment générer une image de code à barres unidimensionnel en utilisant UniApp. La procédure se décompose en trois étapes clés : la création d'une chaîne base64 représentant le code à barres, la conversion de cette base64 en fichier image, et enfin le rendu de l'image sur un canvas.

Étapes de mise en œuvre

Étape 1 : Générer la chaîne base64 du code à barres

Pour produire le code à barres, nous utilisnos la bibliothèque @bwip-js qui offre une gestion flexible des formats de codes-barres. Voici une fonction asynchrone qui retourne une chaîne base64 complète avec le préfixe MIME approprié.

const bwip = require('@bwip-js/node');

/**
 * Génère une chaîne base64 pour un code à barres.
 * @param {string} content - Les données à encoder dans le code à barres.
 * @returns {Promise<string>} - La représentation base64 avec en-tête MIME.
 */
export async function createBarcodeData(content = '9876543210') {
    const imageBuffer = await bwip.toBuffer({
        bcid: 'code128',
        text: content,
        scale: 2,
        height: 8,
        width: 60,
        includetext: true
    });
    return `data:image/png;base64,${imageBuffer.toString('base64')}`;
}

Étape 2 : Convertir la base64 en fichier image

Ensuite, nous transformons la chaîne base64 en un fichier image persistant à l'aide des API natives d'HTML5+. Cette fonction retourne le chemin local de l'image générée.

function transformBase64ToFile(base64String) {
    return new Promise((resolve, reject) => {
        const bitmap = new plus.nativeObj.Bitmap('barcodeTemp');
        bitmap.loadBase64Data(
            base64String,
            () => {
                bitmap.save(
                    '_www/images/barcode_img.png',
                    {},
                    (result) => {
                        resolve(result.target);
                        bitmap.clear();
                    },
                    reject
                );
            },
            reject
        );
    });
}

Étape 3 : Dessiner l'image sur le canvas

Enfin, nous chargeons l'image dans un élément canvas pour permettre une manipulation ou une exportation ultérieure. Le processus consiste à créer un contexte de canvas, à y dessiner l'image, puis à exporter le résultat sous forme de base64.

async function renderBarcodeOnCanvas(canvasElementId, imageFile) {
    return new Promise((resolve, reject) => {
        const canvasContext = uni.createCanvasContext(canvasElementId, this);
        this.addImageToCanvas(canvasContext, imageFile);
        canvasContext.draw(false, () => {
            uni.canvasToTempFilePath(
                {
                    canvasId: canvasElementId,
                    success: (tempPath) => {
                        plus.io.resolveLocalFileSystemURL(
                            tempPath.tempFilePath,
                            (fileEntry) => {
                                fileEntry.file((fileObj) => {
                                    const reader = new plus.io.FileReader();
                                    reader.onloadend = (event) => {
                                        resolve(event.target.result);
                                    };
                                    reader.readAsDataURL(fileObj);
                                }, reject);
                            },
                            reject
                        );
                    },
                    fail: reject
                },
                this
            );
        });
    });
}

Ces étapes permettent une intégration fluide des codes à barres dans les applications UniApp, avec une gestion efficace des ressources graphiques.