var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.crossOrigin = 'anonymous'; img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/64px-JavaScript-logo.png'; var obj = { id: 1, color: [240, 219, 79] }; console.log(obj.color); // (3) [240, 219, 79] img.onload = function() { ctx.drawImage(img, 0, 0); var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data; var pixelColor = [data[0], data[1], data[2]]; console.log(pixelColor); // (3) [240, 219, 79] console.log(pixelColor == obj.color); // false var objectId = getObjectId(pixelColor); console.log(objectId); // undefined } function getObjectId(color) { if (obj.color == color) { return obj.id; } return; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <canvas id="canvas" width="64" height="64"></canvas> </body> </html> Estoy tratando de usar la matriz pixelColor ensamblada a partir de ImageData como argumento para una función getObjectId() que devolverá la identificación de un objeto con la matriz de color especificada. ¿Por qué la función regresa undefined ? ¿Y por qué no se cumple la condición if ?
Editar: agregó la función getter.
Su getObjectId está comparando el argumento pasado a obj.color , que es una matriz.
En JavaScript, las matrices son objetos y los objetos tienen una identidad. Los operadores de igualdad como == o === verifican esta identidad, no que todos los contenidos de los objetos sean iguales. ( == también hace algunas conversiones de tipos implícitos funky, por lo que es una buena práctica preferir === a menos que realmente necesite el comportamiento divertido)
La identidad es lo que permite que los objetos se modifiquen sin cambiar otros objetos similares, ni tener que convertirse en un objeto nuevo y diferente:
var a = [1, 2, 3]; var b = [1, 2, 3]; var c = b; b.push(4); console.log(a, b); // prints [1, 2, 3] [1, 2, 3, 4] console.log(c == b, c); // prints true [1, 2, 3, 4] Lo que está buscando se llama igualdad estructural , y JavaScript no ofrece una forma integrada de hacerlo. Hay un montón de bibliotecas y respuestas de StackOverflow que proporcionan una función para hacerlo, pero en su caso, si asume que la entrada también es una matriz, puede usar Array#every , comparando cada componente de la matriz con el correspondiente en la entrada:
if (obj.color.every((x, i) => x == color[i])) { return obj.id; }