Qual è la procedura migliore per esportare il canvas con immagini di alta qualità?

Question

Ho bisogno del tuo aiuto. Spiego la mia situazione: sto usando la libreria fabric.js per inserire forme, testo, ecc. Nella mia applicazione. La dimensione della mia tela ha 1000x1000 pixel (circa 26,45x26,45 centimetri). Ho uno script di caricamento delle immagini solo per caricare immagini di alta qualità, come 300 dpi.

Fondamentalmente quello che faccio è il seguente: - disegnare la tela (caricamento di immagini, inserire testo, ecc ...); - ridimensionare la tela moltiplicando per fattore di scala per poter alla fine avere un'immagine con 300 dpi; - salva la tela in formato PNG; - usando php/ajax e Imagick, metti la tela con 300 dpi di qualità, risparmiando in formato jpg.

Il problema è: quando salgo la tela, deciderà la qualità delle immagini caricate, perché ridimensiono la tela era di 72 dpi (al momento che ho salvato in PNG).

Penso che una possibile soluzione sia: quando carichi le immagini, salva la posizione in un array con la posizione e la dimensione xey alla fine dell'intero processo, sostituisci l'immagine in JPG. Se questo è il modo migliore, è possibile farlo con la libreria Imagick o in PHP?

Mi piacerebbe conoscere la tua opinione a riguardo.

Grazie.

Answer 1

Il DPI non ha alcuna importanza quando si tratta di immagini. Le immagini sono misurate in pixel, quindi questo è ciò che devi regolare. Puoi tranquillamente ignorare DPI in quanto non ha senso in questo contesto.

Scaling non vi aiuterà qui - ricorda che si sta lavorando con un dispositivo di pixel, non i vettori, in modo dalla tela bisogno di essere già nella dimensione che si desidera utilizzare per la stampa ecc oppure si avrà una riduzione della qualità a causa di interpolazione durante il ridimensionamento.

Ecco come:

È necessario pre-Calulate la dimensione in pixel tela in relazione a quello dimensioni desiderate nella fase finale.

Diciamo che si desidera stampare un'immagine di 15 x 10 cm (o circa 6 x 4 pollici) all'uscita 300DPI. È quindi calcolare i pixel: (! 4 = 10 cm, in modo un po 'diverso risultato, i numeri raccolti per semplicità)

Width : 10 cm * 300/2.54 = 1181 pixels 
Height: 15 cm * 300/2.54 = 1772 pixels 

Per pollici semplicemente moltiplicare con il DPI:

Width : 4 in * 300 = 1200 pixels 
Height: 6 in * 300 = 1800 pixels 

Per la vostra immagine a 26.45 cm @ 300 dpi tela avrebbe bisogno di essere:

26.45 cm * 300 DPI/2.54 inches = 3124 pixels. 

per visualizzare quella tela in una zona più piccola sullo schermo si utilizza CSS per visualizzare t egli elemento, per esempio -

<canvas width="3124" height="3124" style="width:600px;height:600px;"></canvas> 

Ora è possibile disegnare sulla tela nella sua posizione attuale di pixel e verrà mostrata in scala verso il basso dello schermo (ma conservare tutte le informazioni sulla tela stessa). Se si utilizzano le coordinate del mouse, si ridimensiona proporzionalmente la posizione del mouse (canvas pos = mouse coord * 3124px/600px).

Per lo zoom ecc diventa un po 'più complicato, ma il principio rimane: la dimensione finale dell'immagine deve essere quella del risultato finale.

Informazioni sul DPI: se l'immagine fosse di 72 DPI o 300 DPI, il numero di pixel sarebbe lo stesso. La ragione come già accennato è che le immagini sono misurate in pixel.

DPI è un valore arbitrario quando si tratta di dispositivi pixel (bitmap, monitor, telecamere ecc.) E viene utilizzato solo per un software DTP per ottenere un suggerimento sulla dimensione per la stampa finale che utilizzerà queste informazioni solo per ridimensiona l'immagine in relazione alla pagina che usi per impostare la stampa.