Quale algoritmo utilizzano comunemente i browser quando si ridimensionano le immagini con i CSS?

Question

Sto cercando di ottenere canvas per rendere le immagini ridimensionate con la stessa fedeltà visiva di CSS.

Secondo i miei test (fatto in Chrome versione 43.0.2357.130), non sembra essere Lanczos3, anche se i miei test con ResampleScope indicano che dovrebbe essere.

vedere qui:

codice utilizzato per produrre questi risultati:

"CSS":

<img src="temp.png" style="width:200px;height:200px"> 

"tela drawImage":

ctxNative.drawImage(img, 0, 0, 200, 200); 

"tela trasformare ":

ctxTransform.transform(200/img.width, 0, 0, 200/img.height, 0, 0); 
ctxTransform.drawImage(img, 0, 0, img.width, img.height); 

"bicubic" (codice per bicubic in basso)

"bicubiC#2"

"downsample alg."

"lanczos3"

Answer 1

ho trovato an article about using the image-rendering CSS property to control the algorithm. In tale articolo, l'autore afferma:

Come si può vedere, l'effetto non è ottimale - default algoritmo di ridimensionamento del browser (di solito interpolazione bi-lineare) ha applicato anti-aliasing per l'immagine.

(sottolineatura mia). Parla anche dell'utilizzo della proprietà CSS image-rendering per controllare quale algoritmo viene utilizzato.

Answer 2

Qui è forse un link utile al riguardo considerare Firefox:

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

Così, a volte CSS fa controllare il processo di ridimensionamento delle immagini, ma il più delle volte non è così.

Secondo le mie prove la qualità del ridimensionamento dell'immagine varia molto a seconda dello stato delle ottimizzazioni interne del browser, ad esempio, quando si eseguono in trasformazioni CSS considerate "accelerate", il sourcebitmap di NxN può essere ridimensionato solo una volta per dimensione fissa, diciamo in 200x200 e dopo questo bitbuffer viene ridimensionato ad altre dimensioni MxM, che perde qualità poiché ci sono due passaggi e il risultato potrebbe essere sfocato, se la prima dimensione del buffer non è abbastanza grande, il che significa che non è possibile determinare il risultato solo sulla bitmap di origine.

Ciò significa che la qualità dell'immagine risultante potrebbe non dipendere dalla qualità o dalla dimensione dell'immagine originale, almeno se vengono utilizzate trasformazioni GPU.

In altri casi, se non ci sono restrizioni basate sulle regole CSS o il browser non obbedisce allora, può applicare il livellamento alle immagini nel modo migliore: potrebbe prima trasformare l'immagine utilizzando un semplice algoritmo e se è sufficiente il tempo del processore per applicare il secondo passaggio di filtraggio all'immagine per renderlo più nitido utilizzando un algoritmo più sofisticato se è realistico sulla configurazione corrente della GPU/dispositivo.

Sono sicuro che si ha familiarità con il soggetto, ma ecco un elenco di possibilità su come ridimensionare l'immagine, per cui v'è abbondanza di algoritmi tra cui scegliere: https://en.wikipedia.org/wiki/Image_scaling

Per ottenere take più realistico , si può andare direttamente al codice sorgente di Chrome, https://code.google.com/p/chromium/codesearch#chromium/src/skia/ext/image_operations.h&sq=package:chromium&type=cs&rcl=1435318317

// Quality Methods 
// 
// Those enumeration values express a desired quality/speed tradeoff. 
// They are translated into an algorithm-specific method that depends 
// on the capabilities (CPU, GPU) of the underlying platform. 
// It is possible for all three methods to be mapped to the same 
// algorithm on a given platform. 

// Good quality resizing. Fastest resizing with acceptable visual quality. 
// This is typically intended for use during interactive layouts 
// where slower platforms may want to trade image quality for large 
// increase in resizing performance. 
// 
// For example the resizing implementation may devolve to linear 
// filtering if this enables GPU acceleration to be used. 
// 
// Note that the underlying resizing method may be determined 
// on the fly based on the parameters for a given resize call. 
// For example an implementation using a GPU-based linear filter 
// in the common case may still use a higher-quality software-based 
// filter in cases where using the GPU would actually be slower - due 
// to too much latency - or impossible - due to image format or size 
// constraints. 
RESIZE_GOOD, 

// Medium quality resizing. Close to high quality resizing (better 
// than linear interpolation) with potentially some quality being 
// traded-off for additional speed compared to RESIZE_BEST. 
// 
// This is intended, for example, for generation of large thumbnails 
// (hundreds of pixels in each dimension) from large sources, where 
// a linear filter would produce too many artifacts but where 
// a RESIZE_HIGH might be too costly time-wise. 
RESIZE_BETTER, 

// High quality resizing. The algorithm is picked to favor image quality. 
RESIZE_BEST, 

il codice ha enumerazione per almeno seguenti filtri: RESIZE_BOX, RESIZE_HAMMING1, RESIZE_LAN CZOS2, RESIZE_LANCZOS3,

suppongo si possono anche trovare le implementazioni di questi filtri in image_operations.cc https://code.google.com/p/chromium/codesearch#chromium/src/skia/ext/image_operations.cc&sq=package:chromium&type=cs