Toile HTML5 toDataURL 8 bits?

Question

Dans une application web, je crée actuellement l'utilisateur doit fournir des images qui sont stockées côté serveur dans une base de données. Pour minimiser la charge du serveur, je gère le redimensionnement de l'image côté client grâce à HTML5 Canvas et demande à l'utilisateur d'approuver au préalable la qualité de l'image redimensionnée.

Le problème que j'ai rencontré est le suivant: la taille du fichier de l'image redimensionnée est grande. Si je redimensionne la même image avec Paint.NET, je peux obtenir une image PNG 8 bits parfaitement décente. Même l'image Paint.NET 32 bits est plus petite que celle qui apparaît sur le serveur via toDataURL. J'ai essayé de jouer avec le paramètre de qualité toDataURL mais le modifier n'a aucun effet - exactement la même taille de données.

Je dois mentionner que je suis en train de tester avec Chrome 20.0.1132.57 m et que les seuls navigateurs qui sont pertinents pour l'application sont les versions de bureau de Chrome et Safari. Je sais que je pourrais faire un peu de traitement d'image côté serveur mais je veux éviter cela si possible. Question - que puis-je faire pour réduire la taille du fichier image envoyé par le navigateur?

Answer 1

Les navigateurs peuvent heureusement ignorer tout paramètre de qualité donné pour toDataUrl et autres. Je ne crois pas l'honorer est obligatoire par la spécification.

La seule façon de contrôler la qualité serait exactement

• Écrivez votre propre compresseur PNG JS ou utiliser quelque chose que vous pouvez voler les internets https://github.com/imaya/CanvasTool.PngEncoder

• Dump <canvas> données à ArrayBuffer

• à passer ce WebWorker

• Soit WebWorker compriment à l'aide de votre bibliothèque compresseur PNG

Je crois qu'il existe des solutions de codage et de décodage JPEG/PNG déjà. Alternative, vous pouvez essayer canvas.mozGetAsFile()/canvas.toBlob(), mais je crois que les navigateurs ne respecteront pas encore les paramètres de qualité.

https://developer.mozilla.org/en/DOM/HTMLCanvasElement/