Ridimensionamento dell'immagine o algoritmo di duplicazione DOM in JavaScript?

Question

Domanda originale:
Come si ridimensiona un'immagine in JavaScript senza supporto CSS?

La mia squadra ha un ambiente STB, una specie di cosa in formato EPG, che supporta JavaScript e DOM generati. Il supporto CSS esiste ma non possiamo inserire il nostro CSS. L'unità di misura è sempre fissa e quindi non può essere ridimensionata dal CSS.

che presentiamo immagini nel seguente modo:

1. Ogni immagine viene mostrata come un pezzo di piccole immagini generate dal dispositivo
2. Per un'immagine 40 x 30, ci dà 1200 pezzi di 1px x 1px , rappresentati come elementi DOM.
3. Sono posizionati in width x height colonne e righe, all'interno di un elemento DOM padre. Sembrano più grandi su un grande schermo con grandi dimensioni fisiche dei pixel.

Guardate l'immagine qui sotto - qualcosa che ho provato in del browser per chiarezza:

Si supponga che ogni blocco di cui sopra è l'immagine di per sé di 1 x 1 pixel, quindi un DOM elemento. Collettivamente ci sono sempre 40 x 30 = 1200 elementi DOM contemporaneamente.

Vogliamo ridimensionare questo in una chiamata di funzione, per raddoppiare le sue dimensioni. O almeno aggiungere 10 unità a larghezza e altezza.

Quale logica devo scrivere in JavaScript? Devo duplicare ogni elemento DOM e posizionare il duplicato accanto all'originale? Questo raddoppia solo la larghezza. Devo moltiplicare anche 4 volte per altezza? Aiuto apprezzato.

UPDATE:
Dal unica risposta, sembra che cosa ho bisogno è quello di attuare un ridimensionamento o algoritmo di duplicazione in JavaScript.

Quando si ingrandiscono le immagini in qualsiasi sistema operativo, quale algoritmo si applica a ogni pixel per raddoppiarne le dimensioni e visualizzare 1 pixel per 4 pixel hardware?

Ho bisogno di fare la stessa cosa con gli elementi DOM, dove ogni elemento span o img funge da pixel.

Answer 1

Per quanto posso vedere sei limitato a due opzioni:

• Sia il doppio della dimensione del singolo dom-pixel
• Oppure, se ciò non fosse possibile, la scala del pixelmap oltre il doppio del numero di dom-pixel (quindi aggiungi ogni pixel due volte e copia ogni riga alla fine)

Naturalmente la prima opzione è di gran lunga la più efficiente, ma sembra che l'ambiente in cui stai lavorando sia abbastanza restrittivo, quindi presumo che ciò non sia possibile.

Answer 2

Se avete intenzione di utilizzare le immagini solo, non pixel, la funzione è readyly disponibili,

uso questo link

questo fornisce la migliore interpolazione dell'immagine senza alcun problema,

Se si desidera farlo manualmente,

poi doppio in fila e poi in colonna, significa prima sul piano verticale, poi verticalmente doppio,

Esempio (3x3)

XCV 
DFG 
ERT 

Diventerà questo moltiplicatore prima fila-pix

XXCCVV 
DDFFGG 
EERRTT 

poi colonna-pix moltiplicatore

XXCCVV 
XXCCVV 
DDFFGG 
XXCCVV 
EERRTT 
XXCCVV 

Qui si può semplicemente inserire la riga duplicata sotto ogni riga, , la stessa che puoi applicare nel primo passaggio, se stai creando una matrice allora ti aiuterà a moltiplicare ciascuna ..

Spero che questo possa aiutare ..