Wadda, zoom image avec canvas
Cette semaine, à la cantine, des membres du W3C ont présenté les activités du consortium. Les intervenants nous ont parlé de CSS3 et d’HTML5, avec les balises video et canvas : Le W3C monte au front.
La balise canvas permet d’effectuer des rendus dynamiques d’images dans un navigateur ; c’est-à-dire réaliser des animations d’images, interprétées par le navigateur. Précédemment, pour les sites internet, les animations étaient la plupart du temps codées en Flash. La balise canvas permet de limiter l’utilisation du Flash et ainsi d’améliorer les performances en rendant les pages moins lourdes.
Wadda est une fonctionnalité permettant de zoomer dans une image à partir de la balise canvas. Il suffit d’appeler une librairie JavaScript dans l’entête de sa page puis d’insérer le code adapter pour l’affichage de l’image concernée.
Bien se rappeler que pour l’intégration d’un zoom dans une page, il est nécessaire d’avoir deux images distinctes ; l’une pour la miniature, l’autre pour la haute définition. Wadda se charge de faire le rapport de coordonnées du curseur et d’agrandissement entre les deux images.
Au chargement de la page, plusieurs paramètres sont configurables :
- Taille de la zone de vision
- Fondu sur les bords de la zone de vision
- Valeur du grossissement
- Décalage du curseur
Voir Introducing Wadda the image zoomer using canvas.
Articles similaires :
- Graphiques (Charts) avec JavaScript
- Humble Finance: graphiques dynamiques avec HTML5
- Le futur avec HTML5 par Bruce Lawson
- Video for Everybody!, lecture de vidéos avec HTML5 ou pas
- Galerie d’images avec bxGallery sous jQuery