Extraire data Canvas HTML

a marqué ce sujet comme résolu.

Ok, alors ma question est un peu embrouillé mais … :

Supposons que j’ai un canvas HTML, avec disons un cercle, un carré etc

Est-il possible d’en "extraire" les données ? Au lieu d’avoir l’image, d’avoir une genre de liste : [un carrée(0,0,10,10), une ligne(5, 10, 10, 10)…] ?

Si cela me semble assez complexe, je me demande s’il est possible d’"emcapsuler" l’objet canvas pour y ajouter un capteur des fonctions, afin de générer ceci ?

Je ne sais pas vraiment comment fonctionnent les moteurs de navigateurs, donc j’ignore si cela est possible.

Dans l’idée, c’est pour créer une IA sans avoir à gérer la partie "image" …

Merci d’avance :)

+0 -0

Je pense que @A-312 supposait que tu avais la main sur le code qui dessinait dans le canvas.
Mais l’idée est intéressante ! SVG est effectivement bien approprié pour décrire ce que tu cherches (une liste de figure).

Je te conseille de regarder chercher une bibliothèque canvas vers SVG si ça existe.

+0 -0

L’autre solution demande d’installer Firefox 66 ou plus ancien et d’utiliser Canvas debugger.

Sinon tu injectes du js pour scopper chaque function native pour te faire tes propre logs.

const old = ctx.fillRect
ctx.fillRect = function () {
  console.log("fillRect", arguments)
  return old.apply(ctx, arguments)
}

Dans une boucle ça devrait ressembler à :

var CRC2D = CanvasRenderingContext2D.prototype
Object.keys(CRC2D).forEach(key => {
  const exclude = ["canvas", "globalAlpha"]
    try {
    CRC2D[key]
  } catch (e) { // catch TypeError: Illegal invocation (for properties are not a function)
    return false
  }
  if (typeof CRC2D[key] !== "function")
    return false;

  const old = CRC2D[key]

  CRC2D[key] = function () {
    console.log(key, arguments)
    return old.apply(this, arguments)
  }
});

Par exemple sur : https://discordapp.com/login ça donne :

image.png
image.png

EDIT: Il faut opti mon code pour éviter que la console freeze, plus précisément ce passage :

console.log(key, arguments)

Avec par exemple :

const args = []
args.push(key)
;[].forEach.call(arguments, function (val) {
  args.push(val)
});
console.log.apply(console, args);

Ca t’évite de retourner un objet (argument) à chaque ligne, à la place tu as que des int et des strings dans la console :

image.png
image.png

Le code final :

var CRC2D = CanvasRenderingContext2D.prototype
Object.keys(CRC2D).forEach(key => {
  const exclude = ["canvas", "globalAlpha"]
    try {
    CRC2D[key]
  } catch (e) { // catch TypeError: Illegal invocation (for properties are not a function)
    return false
  }
  if (typeof CRC2D[key] !== "function")
    return false;

  const old = CRC2D[key]

  CRC2D[key] = function () {
    const args = []
    args.push(key)
    ;[].forEach.call(arguments, function (val) {
      args.push(val)
    });
    console.log.apply(console, args);
    return old.apply(this, arguments)
  }
});
+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte