Come sono programmate le immagini dinamiche?

6

Ho due amici che vogliono creare una gioielleria, focalizzata su gioielli personalizzati. La caratteristica principale è il designer di gioielli, basato su un modello di gioiello.

Ecco un esempio del tipo di cosa che sto cercando di creare: link

Puoi usare il menu a destra per cambiare le diverse aree dell'immagine finale, come le gemme o il metallo usato. Se fai clic con il tasto destro sull'immagine, puoi vedere che è un jpg completo.

Come viene progettato e programmato questo tipo di immagine dinamica?

    
posta Fabrício 26.04.2016 - 17:42
fonte

2 risposte

4

Nel caso specifico dell'esempio sembrano combinare le immagini delle diverse parti sul server e quindi inviare un'immagine completa al browser. Come si può vedere se diamo un'occhiata all'URL e iniziamo a rimuovere le cose in modo da ottenere l'accesso alla pagina di debug: link

Non penso che volessero la pagina di debug aperta a tutti ma ora che è ci permette di vedere come lo fanno nell'esempio e ci dà un approccio se vogliamo fare qualcosa di simile noi stessi.

    
risposta data 03.05.2016 - 13:21
fonte
13

Sono abbastanza sicuro che siano generati al volo sulla base di una serie di parametri.

Noterai che, se controlli Ispezione, il codice HTML per il tag include del codice:

  • Dati-itemcode="BEH-PEN-01"
    Probabilmente l'immagine di base iniziale da utilizzare. In questo caso, Pendent 01
  • dati-angle="P"
    Angle probabilmente specifica quale versione dell'immagine generare. Ad esempio, ci sono 4 immagini sotto l'immagine principale.
  • Dati-version="2"
    Forse c'era una volta una versione 1 del loro strumento generatore di immagini?
  • Dati-generatedname="18YG-18RG-I-D-D-CH_CBL_1-5_SS_18"
    Dati effettivi per articolo generato. Noterai che corrisponde a ciò che selezioni negli elenchi a discesa sulla destra, come "18YG" = 18k Giallo-Oro, "18RG" = 18k RoseGold, "CH_CBL_1-5_SS_18" = Cavo in argento Sterling da 18 mm 18 ", ecc. .
  • Dati-size="450"
    Dimensione finale dell'immagine per il rendering
  • Dati-slug="pera-citrino-18k-giallo-oro-ciondolo-con-diamante"
    titolo user-friendly da utilizzare

Se si prende l'url immagine reale, è possibile modificare i parametri per giocare con diverse varianti.

link

Ad esempio, "450" può essere cambiato in un'altra dimensione per modificare le dimensioni dell'immagine. Oppure "YG" può essere cambiato in "WG" (White Gold), "RG" (Rose Gold), "SS" (Sterling Silver), ecc. Oppure puoi scegliere "PEN-02" per visualizzare un'immagine di base diversa con gli stessi colori E l'ultimo pezzo, "Pear-citrine-18k-yellow-gold-pendant-with-diamond", può essere impostato su qualsiasi cosa tu voglia e nulla cambia oltre al titolo.

Molto probabilmente c'è un'immagine di stock, probabilmente in bianco e nero, con regioni definite. Il generatore di immagini applica uno spostamento di tonalità sulle singole regioni in base a ciò che viene specificato.

Punti per sostenere che:

  • Se confronti alcuni dei colori della gemma (zaffiro rosa / zaffiro giallo per esempio o tormalina blu / tormalina verde), specialmente con immagini più grandi, puoi vedere chiaramente che l'immagine utilizzata è la stessa esatta, solo con un Colore diverso. Questo non è il modo in cui sarebbero reali le singole immagini. Ho anche visto questo tipo di cose prima, come questo esempio davvero scarso, in cui le tonalità della pelle rendono evidente ciò che sta accadendo .

  • Il sito di esempio presenta alcune variazioni tra le immagini gemme di magazzino, in particolare Ruby e Diamond. Questo mi fa pensare che usi la sostituzione parziale delle immagini, perché una modifica completa delle immagini richiederebbe molta manutenzione per il numero di elementi di questo sito.

  • Alcune immagini hanno delle regioni povere definite, rendendo il "photoshop" generale più evidente. Ad esempio, questo ha la regione della grande gemma mal definita, e una gemma di colore scuro lo dimostra davvero.

La migliore ipotesi è che il sito recuperi tutto ciò che va a /image-generator/ nell'URL e lo mandi in una procedura di generazione di immagini, che restituisce l'immagine jpg finale per la visualizzazione.

    
risposta data 26.04.2016 - 19:34
fonte

Leggi altre domande sui tag