Accueil Médias sociaux Comment manipuler des pixels avec le tag de toile HTML5 - pour les nuls

Comment manipuler des pixels avec le tag de toile HTML5 - pour les nuls

Vidéo: Complete Animation Workflow (Adobe Character Animator Tutorial) 2025

Vidéo: Complete Animation Workflow (Adobe Character Animator Tutorial) 2025
Anonim

HTML5 vous permet d'extraire les données d'une balise canvas dans les données de pixels sous-jacentes. La manipulation de ces données vous donne un contrôle étendu de votre image en temps réel. Vous pouvez utiliser ces données pour l'équilibrage des couleurs, ainsi que pour expérimenter vos propres flous, nettets et effets de chrominance.

Peu importe le format dans lequel une image est stockée dans le système de fichiers, elle est affichée sous la forme d'une liste de pixels. Chaque pixel est représenté (dans le système 32 bits standard, de toute façon) par quatre entiers: RGBA. Le R représente la quantité de rouge dans le point courant, G représente le vert et B le bleu. Le A représente alpha, qui est une mesure de la transparence de l'image. Chacune de ces valeurs peut varier de 0 à 255. Lorsque vous convertissez une image au format de données d'image, vous obtenez un grand nombre d'entiers. Chaque groupe de quatre images représente un seul pixel de données de couleur.

Ce code modifie la balance des couleurs d'une image:

function draw () {var drawing = document. getElementById ("dessin"); var con = dessin. getContext ("2d"); var original = document. getElementById ("original"); CANV_WIDTH = 200; CANV_HEIGHT = 200; // dessine l'original sur la toile con. drawImage (original, 0, 0); // récupère les données d'image imgData = con. getImageData (0, 0, 200, 200); // boucle les données d'image pour (ligne = 0; ligne  255) {r = 255;} si (r 255) {g = 255; g 255) {r = 255;} si (b <0) {b = 0;} si (a> 255) {a = 255;} si (a <0) {a = 0;} // retourner de nouvelles valeurs aux données imgData. données [index] = r; imgData. données [index + 1] = g; imgData. données [index + 2] = b; imgData. data [index + 3] = a;} // end col pour la boucle} // end row pour la boucle // dessine une nouvelle image sur canvas con. putImageData (imgData, 0, 0);} // fin de la fonction

Alors que la liste des codes semble assez longue, elle n'est vraiment pas trop difficile à suivre:

  1. Dessine une image originale.

    La technique que vous utiliserez extrait les données d'un élément de canevas. Pour modifier une image, vous devez d'abord la dessiner sur un canevas. Vous pouvez utiliser la méthode drawImage () ordinaire.

  2. Extrayez les données d'image.

    La méthode getImageData () obtient l'image affichée par le canevas actuel et la place dans un vaste tableau d'entiers.

  3. Faites une boucle pour gérer les lignes.

    Les données d'image sont divisées en lignes et en colonnes. Chaque ligne va de 0 à la hauteur de la toile, alors faites une boucle for pour parcourir les lignes.

  4. Faites une autre boucle pour gérer les colonnes.

    A l'intérieur de chaque ligne, il y a assez de données pour aller de 0 à la largeur de la toile, alors faites une seconde pour la boucle à l'intérieur de la première.Il est très fréquent d'utiliser une paire de boucles imbriquées pour parcourir des données bidimensionnelles comme des informations d'image.

  5. Trouvez l'index dans imageData pour la ligne et la colonne en cours.

    Le tableau imageData contient quatre entiers pour chaque pixel, donc nous devons faire un peu de maths pour savoir où est le premier entier pour chaque pixel. La formule la plus simple consiste à multiplier le nombre de lignes par la largeur du canevas, à l'ajouter au nombre de colonnes et à multiplier le résultat entier par quatre.

  6. Tirez les valeurs de couleurs correspondantes à partir de l'index.

    L'index représente également la valeur rouge du pixel courant. Le prochain int contient la valeur verte, suivie par la valeur bleue, et enfin la valeur alpha.

  7. Manipulez les valeurs de couleur comme vous le souhaitez.

    Si vous voulez créer une application d'équilibrage des couleurs, vous pouvez simplement ajouter ou soustraire des valeurs pour modifier l'équilibre général des couleurs. Vous pouvez également faire un travail beaucoup plus élaboré si vous voulez jouer avec la manipulation d'image au niveau des pixels.

  8. Vérifiez les limites.

    La valeur d'un pixel ne peut pas être inférieure à 0 ou supérieure à 255. Vérifiez donc ces deux limites et ajustez toutes les valeurs de pixel pour les limites légales.

  9. Retourne les valeurs manipulées dans le tableau imgData.

    Vous pouvez copier des valeurs dans le tableau, et vous devriez le faire pour rendre les changements visibles.

  10. Dessine les données d'image sur le canevas.

    La fonction putImageData () renvoie les données de l'image en cours dans la zone de dessin en tant qu'image ordinaire. La nouvelle version de l'image reflétera les changements.

Comment manipuler des pixels avec le tag de toile HTML5 - pour les nuls

Le choix des éditeurs

Spotify Mobile Service avec un compte Premium - Les nuls

Spotify Mobile Service avec un compte Premium - Les nuls

Les deux principaux avantages des abonnés Spotify Premium sur Spotify Free ou Les détenteurs d'un compte illimité ont la capacité d'accéder au catalogue de diffusion en continu de Spotify via un appareil mobile et d'écouter des pistes en mode hors connexion à l'aide de votre application mobile ou informatique. Ce sont les deux caractéristiques qui justifient le fait que Spotify ...

Spotify Listes de lecture de Mobile - mannequins

Spotify Listes de lecture de Mobile - mannequins

Comme sur votre ordinateur, vous pouvez gérer les listes de lecture Spotify sur votre téléphone. Toute modification apportée à votre liste de lecture est synchronisée sur tous les appareils auxquels vous êtes connecté, en temps réel. Lorsque vous démarrez l'application Spotify, toutes vos playlists sont affichées immédiatement, mais vous pouvez y accéder à tout moment en appuyant sur ...

Spotify vous permet de vous lier à peu près n'importe quoi - les tuls

Spotify vous permet de vous lier à peu près n'importe quoi - les tuls

Spotify vous permet de copier des liens Web et des URI vous pouvez coller où vous voulez: dans les blogs, les e-mails, les réseaux sociaux, même les documents de traitement de texte. Cliquez avec le bouton droit de la souris sur ce que vous voulez partager et choisissez une option de copie dans le menu contextuel qui s'affiche généralement. Dans certains cas, si vous savez comment un lien est construit, ...

Le choix des éditeurs

Médias sociaux et marketing par e-mail - nuls

Médias sociaux et marketing par e-mail - nuls

Réseaux sociaux clients potentiels via des sites Web et des e-mails. Rappelez-vous, la suppression des e-mails pour gagner du temps est le mode opératoire pour les gens connectés en ligne dans les affaires ces jours-ci. Certaines entreprises estiment avoir le droit d'envoyer des offres quotidiennes et des promotions accompagnées de fanfares. Est-il même possible pour une entreprise de ...

Social Media Commerce: Enregistrement client par Mobile App - dummies

Social Media Commerce: Enregistrement client par Mobile App - dummies

Certains médias sociaux Les applications récompensent leurs utilisateurs pour l'enregistrement depuis les smartphones au fur et à mesure qu'ils passent d'un endroit à un autre dans le monde des briques et du mortier. Cette activité d'enregistrement mobile est populaire auprès de ceux qui se connectent en ligne. Vous pouvez encourager les gens à se présenter à votre lieu de travail. Le leader actuel sur le marché est Foursquare, un ...

Social Media Commerce: Blog pour votre entreprise - dummies

Social Media Commerce: Blog pour votre entreprise - dummies

Quand vous vous sentez prêt Pour passer à l'étape suivante dans le commerce des médias sociaux et faire quelque chose au-delà d'un site Web d'entreprise, vous pouvez développer un blog pour communiquer avec les clients. Les blogs offrent un espace à votre entreprise pour améliorer son message et répondre aux commentaires des lecteurs. Un blog (à partir du web-journal) peut ...

Le choix des éditeurs

Comment traduire votre réseau Ning en une langue non prise en charge - les nuls

Comment traduire votre réseau Ning en une langue non prise en charge - les nuls

Bien que Ning supporte 18 langues , avec autant de langues dans le monde, vous devrez peut-être traduire votre réseau en un réseau que Ning ne prend pas en charge. Créer une nouvelle traduction:

Comment syndiquer le contenu de votre réseau Ning - des nuls

Comment syndiquer le contenu de votre réseau Ning - des nuls

Votre réseau Ning vous offre de nombreuses façons d'utiliser Flux RSS pour syndiquer le contenu que vous et vos membres contribuent au réseau. Si les titres des éléments des flux RSS de votre réseau sont suffisamment informatifs et convaincants, les internautes qui visitent d'autres sites Web qui affichent le flux RSS de votre réseau peuvent cliquer sur les titres ...

Comment utiliser le mur de commentaires de Ning - mannequins

Comment utiliser le mur de commentaires de Ning - mannequins

Votre page de profil Ning a un mur de commentaires, où autre Les membres de Ning peuvent vous laisser des messages. Le mur de commentaires permet aux membres de vous écrire quelque chose, d'inclure un lien vers un autre site Web, d'intégrer de la vidéo à partir du réseau ou d'autres sites, ou de poster une photo pour que vous puissiez la consulter. N'importe qui dans le réseau peut partir ...