Pixastic, librairie d’édition d’images coté client

Une demande atypique

Nous travaillons en ce moment sur le référencement d’un site, dont le client nous a soumis une demande très particulière. Son site, un réseau social spécialisé, compte des nombreuses images des membres. Or, comme la litanie de les télécharger sur son poste, les éditer et les remettre en ligne lui prend trop de temps, il souhaite pouvoir faire toutes les manipulations d’édition en ligne.

Pas de problème, nous nous sommes dit,  il y a des nombreux scripts sur le web avec les fonctionnalités nécessaires pour une édition de base: recadrage, redimensionnements, flou, … Ok, mais avec la possibilité de créer une zone floue sur une image (et non toute l’image)?…

C’est donc cette demande atypique qui nous à permis de trouver Pixastic, une librairie JavaScript expérimentale d’édition d’images.

Canvas? un peu, rien, à la folie!

Développée en JavaScript, cette librairie tire partie du nouvel élément HTML5 canvas. Cet élément offre tant de possibilités aux développeurs que des épais libres sont déjà disponibles. Canvas n’est pas supporté par tus les navigateurs, mais dans notre cas cela ne pose pas de problème car il suffit que notre client utilise Firefox ou Opera. Canvas définie une zone dans la page qui peut être modifiée avec JavaScript au niveau du pixel, ce qui permet des nombreux effets:

  • Blend
  • Blur
  • BlurFast
  • Brightness/Contrast
  • ColorAdjust
  • ColorHistogram
  • Crop
  • Desaturate
  • Edge Detection
  • Edge Detection 2
  • EmbossFlip
  • HorizontallyFlip
  • VerticallyGlow
  • Histogram
  • Hue/Saturation/Lightness
  • InvertLaplace
  • Edge Detection
  • Lighten
  • Mosaic
  • Noise
  • Pointillize
  • Posterize
  • Remove Noise
  • Sepia
  • Sharpen
  • Solarize
  • Unsharp Mask

Du moment qu’on a accès au pixel on peu lui appliquer toutes sortes d’algorithmes, et obtenir une variété énorme de filtres…, bref de quoi se fabriquer un navigateur-photoshop!

Un petit test rapide pour vérifier que tout cela est bien vraie

Pour nous simplifier les choses, il y a des nombreuses demos de chacun de ces effets sur le site, un éditeur en ligne très complet, et cerise sur le gâteau, pour les adeptes de JQuery, la possibilité d’utiliser Pixastic en tant que plugin de ce framework.

Nous allons tester l’éditeur en ligne, pour savoir si la demande de notre client (rendre floue une zone d’une image) peut être honorée avec cette librairie:

Nous chargeons une image:

pixastic etape 1

Ensuite nous sélectionnons le parasol…

 

pixastic etape 2

…parés pour appliquer le filtre….

pixastic etape 4

 

Oui!, ça marche! notre client peut être tranquille, le parasol et ses inavouables secrets resteront à l’abri des regards indiscrets. Maintenant il “suffit” d’adapter cette librairie à son site.

Pixastic a été développé par Jacob Seidelin, avec la licence Mozilla Public License (MPL).

A bientôt.

 

Laissez nous un commentaire ou posez votre question

Current day month ye@r *