Javascript - HTML5 Canvas Resize (Downscale) Image High Quality Stack Overflow

Folosesc elemente de pânză html5 pentru a redimensiona imaginile din browserul meu. Se pare că calitatea este foarte scăzută. Am găsit acest lucru: Dezactivați interpolare atunci când scalați un, dar nu ajută la creșterea calității.

Mai jos este codul meu css și js, precum și imaginea cu Photoshop și scalată în API-ul canvas.

Ce trebuie să fac pentru a obține o calitate optimă la scalarea unei imagini în browser?

Notă: Vreau să micșorez o imagine mare la una mică, să modific culoarea într-o pânză și să trimit rezultatul din pânză la server.

Imaginea redimensionată cu photoshop:

canvas

Imaginea redimensionată pe pânză:

Am încercat să fac downscaling în mai mulți pași, așa cum am propus în:

Aceasta este funcția pe care am folosit-o:

Iată rezultatul dacă folosesc o dimensiune în două trepte:

Iată rezultatul dacă folosesc o dimensionare cu 3 trepte:

Iată rezultatul dacă folosesc o dimensionare cu 4 trepte:

Iată rezultatul dacă folosesc o dimensionare cu 20 de trepte:

Notă: Se pare că de la 1 pas la 2 pași există o îmbunătățire majoră a calității imaginii, dar cu cât mai mulți pași adăugați procesului, cu atât imaginea devine mai neclară.

Există o modalitate de a rezolva problema prin care imaginea devine mai neclară cu cât mai mulți pași adăugați?

Edit 2013-10-04: Am încercat algoritmul GameAlchemist. Iată rezultatul în comparație cu Photoshop.

14 Răspunsuri 14

Deoarece problema dvs. este de a reduce imaginea, nu are rost să vorbiți despre interpolare - care este despre crearea de pixeli -. Problema aici este reducerea eșantionării.

Pentru a redimensiona o imagine, trebuie să transformăm fiecare pătrat de p * p pixeli din imaginea originală într-un singur pixel în imaginea de destinație.