Javascript Girl
  1. Javascript Girl
  3. Canvas – flip demi-image
Intereting Posts
Pourquoi jQuery ne peut-il pas attacher un gestionnaire de souris sur un objet Flash? Object.ignign n'est pas une fonction JQuery: sélectionnez tout l'élément avec l'attribut personnalisé JQuery passe plus de paramètres dans le rappel Cachant une option dans ng-options Suppression d'objets en double avec soulignement pour Javascript Désactivez tous les éléments de la page avec la fonction modale en utilisant jquery Comment décrypter un message avec CryptoJS AES. J'ai un exemple Ruby qui fonctionne Organiser le prototype javascript tout en conservant la référence et l'héritage des objets Aperçu d'une image avant son chargement Exception de soumission d'événements envoyée par un serveur flasque Impossible d'appeler la fonction Javascript à partir d'un événement button onclick ASP.NET 4 Une étiquette "script" devrait-elle être supprimée? Générer un hachage à partir de la chaîne dans Javascript / jQuery JavaScript pour retarder l'exécution des fonctions après la chargement de la page

Canvas – flip demi-image

J'ai des données d'image en toile, et maintenant je dois prendre la moitié gauche de l'image, la basculer et l'appliquer à droite, comme un effet miroir.

Exemple :

Entrez la description de l'image ici

Pour ça:

Entrez la description de l'image ici

Je suis arrivé à ce point (j'ai les données d'image prêtes): 

ctx.drawImage(this, 0, 0, 960, 540); var imgData = ctx.getImageData(0,0,960,540); // loop through the data and apply mirror ??

La largeur et la hauteur sont connues. Des idées?

  1. Bouclez les données d'image
  2. Si le pixel actuel se trouve dans la moitié gauche de l'image, copiez-le dans une position à droite: 
 for(var y = 0; y < height; y++) { for(var x = 0; x < width / 2; x++) { // divide by 2 to only loop through the left half of the image. var offset = ((width* y) + x) * 4; // Pixel origin // Get pixel var r = data[offset]; var g = data[offset + 1]; var b = data[offset + 2]; var a = data[offset + 3]; // Calculate how far to the right the mirrored pixel is var mirrorOffset = (width - (x * 2)) * 4; // Get set mirrored pixel's colours data[offset + mirrorOffset] = r; data[offset + 1 + mirrorOffset] = g; data[offset + 2 + mirrorOffset] = b; data[offset + 3 + mirrorOffset] = a; } }

Je n'ai pas testé cela, mais il devrait fonctionner (plus ou moins), ou du moins vous donner une idée de la façon de le faire.