Javascript Girl
  1. Javascript Girl
  3. Construire 2D Array of Canvas RGB values
Intereting Posts
Trouver l'emplacement de la ligne sur l'écran Comment faire `var self = this` inside es6 class? Emberjs: Comment rendre une vue avec le nom de la vue en variable? Qu'est ce que Function.prototype.toMethod () fait? Google directions ne fonctionnent pas Pourquoi un index de chaîne dans un tableau javascript n'augmente-t-il pas la longueur? Réactiver JSX: sélectionner "sélectionné" sur l'option sélectionnée <sélectionner> Demandes Ruby on Rails en attente sur Google Chrome Est-il possible de fermer la fenêtre du navigateur à partir de JavaScript? Comment supprimer $ promesse et $ résolus à partir de l'objet json Copier la page Web actuelle dans une nouvelle fenêtre Javascript: Différence entre `new Date (dateString)` vs `new Date (année, mois, jour)` Javascript – Conversion entre une chaîne Unicode et ArrayBuffer Copier un ensemble d'objets dans un autre tableau en javascript (copie profonde) Google Maps sauvegarde l'emplacement du marqueur?

Construire 2D Array of Canvas RGB values

J'essaie d'envoyer un tableau 2D de valeurs RVB à PHP à partir du tableau de valeurs de la méthode getImageData (). 

for (var i=0;i<imgData.data.length;i+=4){ // If you want to know the values of the pixel var r = imgData.data[i + 0]; var g = imgData.data[i + 1]; var b = imgData.data[i + 2]; var a = imgData.data[i + 3]; //[...] do what you want with these values }

À partir de cela, comment créer un tableau 2D de valeurs RVB d'un canevas complet? 

 var rgb = []; for (var i=0;i<imgData.data.length;i+=4){ // If you want to know the values of the pixel var r = imgData.data[i + 0]; var g = imgData.data[i + 1]; var b = imgData.data[i + 2]; var a = imgData.data[i + 3]; var x = Math.floor((i/4) % imageData.width); var y = Math.floor((i/4) / imageData.width); rgb[x] ? (rgb[x][y] = [r,b,g,a]) : (rgb[x] = [[r,b,g,a]]); }

Ce n'est peut-être pas ce que vous voulez, mais si votre intérêt consiste à transférer les données d'image (pas nécessairement la construction d'un tableau du côté client), toDataURL() pourrait être un moyen encore plus simple de transférer vos données d'image …

La canvas.toDataURL('image/png') HTML5 canvas.toDataURL('image/png') produira un URI de données pour vos données d'image, c'est-à-dire une version très longue et codée en texte du PNG. Pas besoin de saisir manuellement les données de l'image. De même, vous pouvez utiliser un codage JPEG si cela est préférable.

Si vous envoyez cette chaîne au serveur, PHP peut décoder en forme binaire directement en la passant comme premier argument à file_get_contents () (c.- $binary = file_get_contents($dataURL) d. $binary = file_get_contents($dataURL) ). Vous pouvez ensuite l'enregistrer sur le disque ou faire ce que vous voulez avec les données binaires PNG comme vous le feriez avec un fichier que vous venez de charger sur le disque.