Come comprimere le immagini .png durante l'esportazione da Canvas usando toDataURL()?

Question

È necessario generare immagini .png di dimensioni pari a ~ 20k utilizzando la tela HTML5. Sfortunatamente, quando crei .pngs usando il metodo toDataURL(), non puoi specificare la qualità che puoi con jpegs.

Qualche idea per una soluzione alternativa? toDataURL sembra essere l'unico modo per generare immagini da Canvas e canvas sembra essere lo strumento migliore per l'elaborazione delle immagini senza interazione con il server. Apprezzo qualsiasi suggerimento.

Answer 1

C'è un modo per avere compressione per immagini PNG utilizzando il processo di perdita dello zlib senza perdita http://www.w3.org/TR/PNG-Compression.html. Esiste una libreria (https://github.com/ShyykoSerhiy/canvas-png-compression) che fornisce uno shim per HTMLCanvasElement.toDataURL() quando il tipo di immagine è 'image/png' e consente di fornire 'quality' come secondo parametro a HTMLCanvasElement.toDataURL() per png.

NOTA che fornisce risultati migliori (dimensioni ridotte) solo in Chrome. Firefox a volte ha una compressione migliore di canvas-png-compression (come per la versione 0.0.3).

Answer 2

Si può fare qualcosa ridimensionandolo e ridimensionandolo nuovamente.

• Ridimensionare disegnando su una tela più piccola, quindi ottenere l'URL dei dati.

• Creare un oggetto immagine impostare l'origine dati come origine.

• Draw sulla tela originale con questo oggetto img (ovviamente all'interno del callback evento onload)

• Trovare il rapporto tra dimensioni delle tele per darvi un risultato ottimale sperimentando un po '.