Ti trovi qui:
Dynamic Imaging Service
B2C Commerce Dynamic Imaging Service elimina la necessità di caricare immagini di dimensioni diverse per soddisfare i requisiti dello storefront. Dopo aver caricato un'immagine sorgente ad alta risoluzione, Dynamic Imaging formatta le dimensioni corrette per ogni applicazione di immagini: la pagina del prodotto, la pagina del catalogo, i prodotti consigliati, i risultati di ricerca e così via. Applica parametri per controllare le dimensioni dell'immagine, il ritaglio, la sovrapposizione, il formato, il colore di sfondo e le impostazioni di qualità.
Quale prodotto Salesforce Commerce possiedo?
Si supponga, ad esempio, di avere uno storefront con un catalogo prodotti di 100.000 articoli. Il tuo web design supporta immagini fino a 150x150 pixel e visualizza quattro immagini per riga dei risultati di ricerca di un cliente. Il web designer crea un layout diverso e ora una ricerca di prodotti visualizza solo tre immagini di dimensioni 250x250 pixel per riga. Anziché caricare le immagini ridimensionate, Dynamic Imaging Service ridimensiona quelle esistenti.
Creazione di URL di trasformazione delle immagini
Le classi URLUtils e MediaFile generano dinamicamente più risorse immagine da una singola immagine ad alta risoluzione. Un URL di trasformazione immagine identifica la risorsa memorizzabile nella cache e specifica come trasformarla.
Utilizzare queste classi perché l'API convalida i parametri di trasformazione e protegge l'utente da modifiche future al pattern URL di base. Se si codifica l'URL come hardcoded, questo può smettere di funzionare se un pattern cambia.
Il valore letterale dell'oggetto JavaScript contiene i parametri di trasformazione. Ogni metodo restituisce un URL derivato dai parametri di trasformazione. Se non si passano i parametri a Dynamic Imaging Service, l'immagine viene trasferita nella configurazione originale.
Esempio: Il parametro URL cy sostituisce il parametro di trasformazione cropY.
La classe URLUtils include i seguenti metodi per generare URL di trasformazione delle immagini.
URL pubblico imageURL( Percorso stringa, Trasformazione oggetto );
URL pubblico imageURL( String context, String contextID, String relPath, Object transform );
URL pubblico absImage( Percorso stringa, Trasformazione oggetto );
URL pubblico absImage( String context, String contextID, String relPath, Object transform );
URL pubblico httpImage( Percorso stringa, Trasformazione oggetto );
URL pubblico httpImage( String context, String contextID, String relPath, Object transform );
URL pubblico httpsImage( Percorso stringa, Trasformazione oggetto );
URL pubblico httpsImage( String context, String contextID, String relPath, Object transform );
La classe MediaFile include i seguenti metodi per la generazione di URL di trasformazione delle immagini.
URL pubblico getURL( Trasformazione oggetto );
URL pubblico getAbsURL( Trasformazione oggetto );
URL pubblico getHttpURL( Trasformazione oggetto );
URL pubblico getHttpsURL( Trasformazione oggetto );
Trasformazioni supportate
| Tipo | Parametri di trasformazione dell'oggetto (parametri URL tra parentesi) | Descrizione |
|---|---|---|
| Scala |
scaleWidth (sw), scaleHeight (sh), scaleMode (sm)
|
I parametri Utilizzare Il parametro predefinito per scaleMode è Se si imposta |
| Sovrapposizione |
imageX (ox), imageY (oy), imageURI (oimg)
|
I parametri I formati supportati sono GIF, PNG, JPG, JP2. Poiché una GIF animata può causare artefatti ai fotogrammi, mantieni le proporzioni per una GIF animata. Impostare il parametro Il percorso deve supportare i parametri della stringa di query che supportano il servizio. Utilizzare un'immagine trasformata per l'immagine sovrapposta. Se l'immagine sovrapposta si estende oltre i limiti dell'immagine principale, Dynamic Imaging ritaglia l'immagine sovrapposta in modo che corrisponda alle dimensioni dell'immagine principale. Il valore di overlay ( |
| Top corti |
cropX (cx), cropY (cy), cropWidth (cw), cropHeight (ch)
|
I parametri I valori di Il valore di |
| Formato |
Formato (
|
Il parametro di trasformazione del formato specifica il formato di destinazione dell'immagine. I formati di destinazione supportati sono AVIF, gif, jp2, jpg, jpeg, jxr, png e WebP. Il percorso URL generato utilizza l'estensione del formato di destinazione. Se non si specifica un formato di destinazione, la conversione non viene eseguita. Il parametro Specificare il formato di origine nel parametro URL |
| Qualità |
Qualità (Q)
|
Il parametro quality specifica un'impostazione di qualità per le immagini JPG e JP2 e il livello di compressione per le immagini PNG. Per le immagini JPG e JP2, impostare i valori da 1 a 100 per ottenere la massima qualità. Il valore predefinito è 80. Omettere il valore per mantenere il valore predefinito. Per le immagini PNG, l'impostazione della qualità non ha alcun effetto sull'aspetto del PNG perché la compressione è sempre senza perdita di dati. Utilizzare invece l'impostazione di qualità per impostare il livello di compressione zlib e il tipo di filtro come numero a due cifre. La prima cifra imposta il livello di compressione zlib (1-9). La seconda cifra imposta il tipo di filtro. Se l'impostazione PNG non è specificata o è impostata su 0, il valore predefinito è 75. Se questa impostazione è impostata su 100 (un numero a tre cifre), in realtà è uguale all'impostazione di qualità 90. |
| Metadati |
Striscia
|
Il parametro strip specifica se rimuovere i metadati, come EXIF e i profili colore, dall'immagine durante la trasformazione. I valori validi sono |
| Priorità bassa |
Bgcolor
|
Il parametro Ad esempio, FF0000 = Rosso; FF000077 = Rosso con trasparenza del 50%. Se il valore alfa viene omesso, il colore risultante risulta opaco. Se si passa esplicitamente 00 come valore alfa, si ottiene lo stesso risultato. I valori alfa sono validi solo quando il formato di output dell'immagine è PNG. |
Chiamate di esempio
Questa chiamata a URLUtils.imageURL( String path, Object transform ):
URLUtils.imageURL( '/<static image path>/image.png', { scaleWidth: 100, format: 'jpg' } );Restituisce l'URL di trasformazione dell'immagine.
http://< Nome> host del server di immagini/dw/image/v2/.../on/demandware.static/.../<Percorso> immagine statica/image.jpg?sw=100&sfrm=pngQuesta chiamata a MediaFile.getAbsImageURL( Object transform ):
product.image.getAbsImageURL( { scaleWidth: 100 } );Restituisce l'URL di trasformazione dell'immagine.
http://< Nome> host del server di immagini/dw/image/v2/.../on/demandware.static/.../<Percorso dell'immagine> del prodotto/FG45SDAF.jpg?sw=100Linee guida per le immagini
- Dimensione del file: Le immagini di dimensioni superiori a 6 MB non vengono trasformate e vengono fornite nella configurazione originale. La prima richiesta di un'immagine di dimensioni eccessive restituisce un errore, ma le richieste successive restituiscono le immagini nella configurazione originale.
- Dimensioni: La dimensione massima trasformabile è di 3.000 x 3.000 pixel.
- Timeout: Se una trasformazione non viene completata entro 29 secondi, il servizio restituisce l'errore 408. Evita trasformazioni costose come l'aumento delle GIF animate.
- Blocco del browser: Negli ambienti non di produzione, Protezione da monitoraggio di Firefox blocca in alcune circostanze le prime trasformazioni. Per evitare questo blocco, impostare Protezione da monitoraggio su Mai durante il test.
Memorizzazione nella cache di Dynamic Imaging
Dynamic Imaging Service utilizza la memorizzazione nella cache per fornire immagini a browser e app.
- Istanze CDN (Content Delivery Network): Le immagini vengono memorizzate nella cache fino a quando non viene richiesta l'invalidazione della cache. Alle nuove risorse di immagine viene assegnato un identificatore di cache univoco e non richiede l'invalidazione esplicita della cache.
- Istanze non CDN: Dynamic Imaging Service riconvalida le immagini dopo 10 minuti.
Vedere anche:
Per ulteriori informazioni sugli URL di trasformazione delle immagini, sui formati moderni, sul progetto della community e sulla risoluzione dei problemi, vedere Argomenti correlati di Dynamic Imaging Service .
