Bidouilleur

Pixastic est une librairie Javascript qui vous permet d’appliquer des filtres sur les images de votre page d’un simple clic et sans passer par un script PHP!

Pixastic exploite les nouvelles possibilités de dessin ( canvas) implémenté dans HTML5, elle n’est donc supportée que par les navigateurs suivants :  Firefox, Opera , Safa­ri et les dernières versions de WebKit. Mais cette liste devrait vite s’agrandir…

Voici toutes les possibilités(in english) qu’offre cette librairie de traitement d’ image :

• Blend
• Blur
• Blur Fast
• Brightness/Contrast
• Color Adjust
• Crop
• Desaturate
• Edge Detection
• Edge Detection2
• Emboss
• Flip Horizontally
• Flip Vertically
• Glow
• Histogram
• Hue/Saturation/Lightness
• Invert
• Laplace Edge Detection
• Lighten
• Mosaic
• Noise
• Posterize
• Pointillize
• Remove Noise
• Sepia
• Sharpen
• Unsharp Mask

Pixastic - Librairie Javascript de traitement d' image

Pixastic possède son plugin Jquery !

Exemple de Code avec Jquery :

1
2
3
4
5
6
7
8
9
10

// invert the image with id="prettyface"
$("#prettyface").pixastic("invert");
 
// convert all images with class="photo" to greyscale
$(".photo").pixastic("desaturate");
 
// chained blur and a regional emboss, see image further down
$("#myimage")
	.pixastic("blurfast", {amount:0.2})
	.pixastic("emboss", {direction:"topleft", rect:{left:50,top:50,width:150,height:150}});

Pour télécharger la librairie rendez-vous ici.

Vous pouvez aussi la tester sur le Pixastic editor!

Amusez-vous bien!

Twitter ce post

En attendant  l’ implémentation du CSS3 (qui nous permettra de faire tourner les éléments d’une page) dans tous les navigateurs, voici un petit plugin Jquery qui va vous permettre d’appliquer un effet de rotation sur vos images comme ci-dessous..

Le plugin est compatible  Opera, Safari, Chrome, FireFox mais aussi IE6, IE7 si vous ajoutez le plugin ExCanvas.

Code:

1
2
3

$(document).ready(function(){
   $('#image').rotate(-25);
});

Twitter ce post

Enfin! Après plus de 6 mois sans nouvelle version majeure, Jquery revient en force avec sa version 1.3.1 !

Au menu :

• Un moteur de sélection complètement réécrit,  il devient un module indépendant nommé Sizzle, celui-ci serait 2 fois plus rapide que l’ancien :
  

  Performances du Moteur de sélection de Jquery 1.3

• L’ arrivée des Live Events qui permettent d’attacher une action sur évènement des Éléments existants ou futurs: Exemple.
• La réécriture de la gestion des évènements ( Aucun impact pour nous)
• La réécriture de l’injection HTML qui décuple la vitesse d’execution des injections :
  

  Performances Jquery 1.3 - Injection HTML

• Réécriture du calcul de position d’un Élément, la encore la performance est présente !
  

  Performance Jquery 1.3 - Calcul de position

  Plus de nombreuses corrections…. Et tout ceci tient toujours en 18 ko dans sa version gzippé!

Pour aller plus loin, suivez ce lien.

Twitter ce post