Les objets Worker Asset compute sont au coeur d’un projet Asset compute, car ils fournissent des fonctionnalités personnalisées qui exécutent ou orchestrent le travail effectué sur une ressource pour créer un rendu.
Le projet Asset compute génère automatiquement un programme de travail simple qui copie le binaire d’origine de la ressource dans un rendu nommé, sans aucune conversion. Dans ce tutoriel, nous allons modifier ce programme de travail pour créer un rendu plus intéressant, afin d’illustrer la puissance des Assets compute.
Nous allons créer un programme de travail d’Asset compute qui génère un nouveau rendu d’image horizontal qui couvre l’espace vide à gauche et à droite du rendu de la ressource avec une version floue de la ressource. La largeur, la hauteur et le flou du rendu final seront paramétrés.
Les agents d’Asset compute implémentent le contrat d’API de travail du SDK d’Asset compute, dans la fonction renditionCallback(...)
, qui est conceptuellement :
Le service AEM Author appelle le programme de travail d’Asset compute, en fournissant le (1a) binaire d’origine de la ressource (source
paramètre ) et (1b) tous les paramètres définis dans le profil de traitement (rendition.instructions
paramètre ).
Le SDK Asset compute orchestre l’exécution de la fonction renditionCallback(...)
du programme de travail des métadonnées d’Asset compute personnalisé, générant un nouveau rendu binaire, en fonction du binaire d’origine de la ressource (1a) et de tous les paramètres (1b).
Le programme de travail Asset compute enregistre les données binaires du nouveau rendu dans rendition.path
.
Les données binaires écrites dans rendition.path
sont transportées via le SDK Asset compute vers le service d’auteur AEM et exposées sous la forme (4a) d’un rendu texte et (4b) conservées dans le noeud de métadonnées de la ressource.
Le diagramme ci-dessus exprime les préoccupations des développeurs Assets compute et le flux logique vers l’appel des employés d’Asset compute. Pour les curieux, les détails internes de l’exécution d’Asset compute sont disponibles, mais seuls les contrats d’API du SDK d’Asset compute public peuvent être dépendants.
Tous les employés d’Asset compute suivent la même structure de base et le même contrat d’entrée/sortie.
'use strict';
// Any npm module imports used by the worker
const { worker, SourceCorruptError } = require('@adobe/asset-compute-sdk');
const fs = require('fs').promises;
/**
Exports the worker implemented by a custom rendition callback function, which parametrizes the input/output contract for the worker.
+ `source` represents the asset's original binary used as the input for the worker.
+ `rendition` represents the worker's output, which is the creation of a new asset rendition.
+ `params` are optional parameters, which map to additional key/value pairs, including a sub `auth` object that contains Adobe I/O access credentials.
**/
exports.main = worker(async (source, rendition, params) => {
// Perform any necessary source (input) checks
const stats = await fs.stat(source.path);
if (stats.size === 0) {
// Throw appropriate errors whenever an erring condition is met
throw new SourceCorruptError('source file is empty');
}
// Access any custom parameters provided via the Processing Profile configuration
let param1 = rendition.instructions.exampleParam;
/**
Perform all work needed to transform the source into the rendition.
The source data can be accessed:
+ In the worker via a file available at `source.path`
+ Or via a presigned GET URL at `source.url`
**/
if (success) {
// A successful worker must write some data back to `renditions.path`.
// This example performs a trivial 1:1 copy of the source binary to the rendition
await fs.copyFile(source.path, rendition.path);
} else {
// Upon failure an Asset Compute Error (exported by @adobe/asset-compute-commons) should be thrown.
throw new GenericError("An error occurred!", "example-worker");
}
});
/**
Optionally create helper classes or functions the worker's rendition callback function invokes to help organize code.
Code shared across workers, or to complex to be managed in a single file, can be broken out across supporting JavaScript files in the project and imported normally into the worker.
**/
function customHelperFunctions() { ... }
/actions/worker
index.js
.Il s’agit du fichier JavaScript Worker que nous allons modifier dans ce tutoriel.
Basés sur Node.js, les projets Asset compute bénéficient de l’écosystème de module npm robuste. Pour tirer parti des modules npm, nous devons d’abord les installer dans notre projet Asset compute.
Dans ce programme de travail, nous utilisons jimp pour créer et manipuler l’image de rendu directement dans le code Node.js.
Tous les modules npm pour la manipulation de ressources ne sont pas pris en charge par Asset compute. Les modules npm qui reposent sur l’existence d’applications telles qu’ImageMagick ou d’autres bibliothèques dépendantes du système d’exploitation ne sont pas pris en charge. Il est préférable de limiter l’utilisation des modules npm JavaScript uniquement.
Ouvrez la ligne de commande à la racine de votre projet Asset compute (vous pouvez le faire dans VS Code via Terminal > New Terminal) et exécutez la commande :
$ npm install jimp
Importez le module jimp
dans le code de travail afin qu’il puisse être utilisé via l’objet JavaScript Jimp
.
Mettez à jour la directive require
en haut de la balise index.js
du programme de travail pour importer l’objet Jimp
à partir du module jimp
:
'use strict';
const Jimp = require('jimp');
const { worker, SourceCorruptError } = require('@adobe/asset-compute-sdk');
const fs = require('fs').promises;
exports.main = worker(async (source, rendition, params) => {
// Check handle a corrupt input source
const stats = await fs.stat(source.path);
if (stats.size === 0) {
throw new SourceCorruptError('source file is empty');
}
// Do work here
});
Les objets Worker Asset compute peuvent lire les paramètres qui peuvent être transmis via les profils de traitement définis dans AEM en tant que service de création de Cloud Service. Les paramètres sont transmis au worker via l’objet rendition.instructions
.
Vous pouvez les lire en accédant à rendition.instructions.<parameterName>
dans le code de travail.
Nous allons lire ici les valeurs SIZE
, BRIGHTNESS
et CONTRAST
du rendu configurable, en fournissant les valeurs par défaut si aucune valeur n’a été fournie via le profil de traitement. Notez que renditions.instructions
sont transmis en tant que chaînes lorsqu’ils sont appelés à partir d’AEM en tant que profils de traitement de Cloud Service. Assurez-vous donc qu’ils sont transformés en types de données corrects dans le code de travail.
'use strict';
const Jimp = require('jimp');
const { worker, SourceCorruptError } = require('@adobe/asset-compute-sdk');
const fs = require('fs').promises;
exports.main = worker(async (source, rendition, params) => {
const stats = await fs.stat(source.path);
if (stats.size === 0) {
throw new SourceCorruptError('source file is empty');
}
// Read in parameters and set defaults if parameters are provided
// Processing Profiles pass in instructions as Strings, so make sure to parse to correct data types
const SIZE = parseInt(rendition.instructions.size) || 800;
const CONTRAST = parseFloat(rendition.instructions.contrast) || 0;
const BRIGHTNESS = parseFloat(rendition.instructions.brightness) || 0;
// Do work here
}
Les objets Worker Asset compute peuvent rencontrer des situations qui génèrent des erreurs. Le SDK Adobe Asset compute fournit une suite d’erreurs prédéfinies pouvant être générées en cas de situation de ce type. Si aucun type d’erreur spécifique ne s’applique, la balise GenericError
peut être utilisée ou une balise ClientErrors
personnalisée spécifique peut être définie.
Avant de commencer le traitement du rendu, vérifiez que tous les paramètres sont valides et pris en charge dans le contexte de ce programme de travail :
SIZE
, CONTRAST
et BRIGHTNESS
sont valides. Dans le cas contraire, envoyez une erreur personnalisée RenditionInstructionsError
.
RenditionInstructionsError
personnalisée qui étend ClientError
est définie au bas de ce fichier. L’utilisation d’une erreur personnalisée spécifique est utile lorsque l’écriture de tests pour le programme de travail.'use strict';
const Jimp = require('jimp');
// Import the Asset Compute SDK provided `ClientError`
const { worker, SourceCorruptError, ClientError } = require('@adobe/asset-compute-sdk');
const fs = require('fs').promises;
exports.main = worker(async (source, rendition, params) => {
const stats = await fs.stat(source.path);
if (stats.size === 0) {
throw new SourceCorruptError('source file is empty');
}
// Read in parameters and set defaults if parameters are provided
const SIZE = parseInt(rendition.instructions.size) || 800;
const CONTRAST = parseFloat(rendition.instructions.contrast) || 0;
const BRIGHTNESS = parseFloat(rendition.instructions.brightness) || 0;
if (SIZE <= 10 || SIZE >= 10000) {
// Ensure size is within allowable bounds
throw new RenditionInstructionsError("'size' must be between 10 and 1,0000");
} else if (CONTRAST <= -1 || CONTRAST >= 1) {
// Ensure contrast is valid value
throw new RenditionInstructionsError("'contrast' must between -1 and 1");
} else if (BRIGHTNESS <= -1 || BRIGHTNESS >= 1) {
// Ensure contrast is valid value
throw new RenditionInstructionsError("'brightness' must between -1 and 1");
}
// Do work here
}
// Create a new ClientError to handle invalid rendition.instructions values
class RenditionInstructionsError extends ClientError {
constructor(message) {
// Provide a:
// + message: describing the nature of this erring condition
// + name: the name of the error; usually same as class name
// + reason: a short, searchable, unique error token that identifies this error
super(message, "RenditionInstructionsError", "rendition_instructions_error");
// Capture the strack trace
Error.captureStackTrace(this, RenditionInstructionsError);
}
}
Avec les paramètres lus, assainis et validés, le code est écrit pour générer le rendu. Le pseudo-code pour la génération du rendu est le suivant :
renditionImage
aux dimensions carrées spécifiées via le paramètre size
.image
à partir du binaire de la ressource source.SIZE
CONTRAST
BRIGHTNESS
image
transformée au centre de la renditionImage
qui est en arrière-plan transparent.renditionImage
sur rendition.path
afin qu’il puisse être enregistré à nouveau dans AEM en tant que rendu de ressource.Ce code utilise les API Jimp pour effectuer ces transformations d’image.
Les Assets compute doivent terminer leur travail de manière synchrone et la balise rendition.path
doit être entièrement écrite avant que la balise renditionCallback
du travailleur ne se termine. Pour ce faire, les appels des fonctions asynchrones doivent être effectués de manière synchrone à l’aide de l’opérateur await
. Si vous ne connaissez pas les fonctions asynchrones JavaScript et si vous ne savez pas comment les exécuter de manière synchrone, familiarisez-vous avec l’opérateur d’attente JavaScript.
Le programme de travail terminé index.js
doit se présenter comme suit :
'use strict';
const Jimp = require('jimp');
const { worker, SourceCorruptError, ClientError } = require('@adobe/asset-compute-sdk');
const fs = require('fs').promises;
exports.main = worker(async (source, rendition, params) => {
const stats = await fs.stat(source.path);
if (stats.size === 0) {
throw new SourceCorruptError('source file is empty');
}
// Read/parse and validate parameters
const SIZE = parseInt(rendition.instructions.size) || 800;
const CONTRAST = parseFloat(rendition.instructions.contrast) || 0;
const BRIGHTNESS = parseFloat(rendition.instructions.brightness) || 0;
if (SIZE <= 10 || SIZE >= 10000) {
throw new RenditionInstructionsError("'size' must be between 10 and 1,0000");
} else if (CONTRAST <= -1 || CONTRAST >= 1) {
throw new RenditionInstructionsError("'contrast' must between -1 and 1");
} else if (BRIGHTNESS <= -1 || BRIGHTNESS >= 1) {
throw new RenditionInstructionsError("'brightness' must between -1 and 1");
}
// Create target rendition image
let renditionImage = new Jimp(SIZE, SIZE, 0x0);
// Read and perform transformations on the source binary image
let image = await Jimp.read(source.path);
// Crop a circle from the source asset, and then apply contrast and brightness
image.crop(
image.bitmap.width < image.bitmap.height ? 0 : (image.bitmap.width - image.bitmap.height) / 2,
image.bitmap.width < image.bitmap.height ? (image.bitmap.height - image.bitmap.width) / 2 : 0,
image.bitmap.width < image.bitmap.height ? image.bitmap.width : image.bitmap.height,
image.bitmap.width < image.bitmap.height ? image.bitmap.width : image.bitmap.height
)
.circle()
.scaleToFit(SIZE, SIZE)
.contrast(CONTRAST)
.brightness(BRIGHTNESS);
// Place the transformed image onto the transparent renditionImage to save as PNG
renditionImage.composite(image, 0, 0)
// Write the final transformed image to the asset's rendition
await renditionImage.writeAsync(rendition.path);
});
// Custom error used for renditions.instructions parameter checking
class RenditionInstructionsError extends ClientError {
constructor(message) {
super(message, "RenditionInstructionsError", "rendition_instructions_error");
Error.captureStackTrace(this, RenditionInstructionsError);
}
}
Maintenant que le code de travail est terminé et qu’il a été précédemment enregistré et configuré dans manifest.yml, il peut être exécuté à l’aide de l’outil de développement d’Asset compute local pour afficher les résultats.
À partir de la racine du projet Asset compute
Exécuter aio app run
Attendez que l’outil de développement des Assets compute s’ouvre dans une nouvelle fenêtre.
Dans la section Sélectionner un fichier… , sélectionnez un exemple d’image à traiter.
Mettez à jour "name": "rendition.png"
en tant que ce programme de travail pour générer un fichier PNG transparent.
{
"renditions": [
{
"worker": "...",
"name": "rendition.png"
}
]
}
Appuyez sur Exécuter et attendez que le rendu soit généré.
La section Rendus prévisualise le rendu généré. Appuyez sur l’aperçu du rendu pour télécharger le rendu complet.
Les paramètres, transmis via les configurations de profil de traitement, peuvent être simulés dans les outils de développement d’Asset compute en les fournissant en tant que paires clé/valeur sur le paramètre de rendu JSON.
Lors du développement local, les valeurs peuvent être transmises à l’aide de différents types de données, lorsqu’elles sont transmises d’AEM en tant que profils de traitement de Cloud Service sous forme de chaînes. Assurez-vous donc que les types de données appropriés sont analysés si nécessaire.
Par exemple, la fonction crop(width, height)
de Jimp nécessite que ses paramètres soient int
. Si parseInt(rendition.instructions.size)
n’est pas analysé à un entier, l’appel à jimp.crop(SIZE, SIZE)
échoue, car les paramètres ne sont pas compatibles avec le type "String".
Notre code accepte les paramètres pour :
size
définit la taille du rendu (hauteur et largeur en tant qu’entiers) ;contrast
définit l’ajustement du contraste, qui doit être compris entre -1 et 1, sous la forme de flotteurs.brightness
définit l’ajustement de la luminosité, qui doit être compris entre -1 et 1, sous la forme de flotteurs.Ils sont lus dans le worker index.js
via :
const SIZE = parseInt(rendition.instructions.size) || 800
const CONTRAST = parseFloat(rendition.instructions.contrast) || 0
const BRIGHTNESS = parseFloat(rendition.instructions.brightness) || 0
Mettez à jour les paramètres de rendu pour personnaliser la taille, le contraste et la luminosité.
{
"renditions": [
{
"worker": "...",
"name": "rendition.png",
"size": "450",
"contrast": "0.30",
"brightness": "0.15"
}
]
}
Appuyez à nouveau sur Exécuter.
Appuyez sur l’aperçu du rendu pour télécharger et consulter le rendu généré. Notez ses dimensions et comment le contraste et la luminosité ont été modifiés par rapport au rendu par défaut.
Téléchargez d’autres images dans la liste déroulante Fichier source et essayez d’exécuter le programme de travail sur ces images avec des paramètres différents !
Le dernier index.js
est disponible sur Github à l’adresse :