ImageData 数据数组不等于数组文字

Question

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>

我正在尝试使用从 ImageData 组装的 pixelColor 数组作为 getObjectId() 函数的参数，该函数将 return 具有指定颜色数组的对象的 ID。为什么函数 returning undefined？为什么里面的if条件不满足？

编辑：添加了 getter 函数。

Answer 1

您的 getObjectId 正在比较传递给 obj.color 的参数，它是一个数组。

在JavaScript中，arrays are objects, and objects have an identity. Equality operators like == or ===检查此标识，而不是所有对象的内容都相同。（== 也做一些时髦的隐式类型转换，这就是为什么最好选择 === 除非你真的需要有趣的行为）

身份允许修改对象而不改变类似的其他对象，也不必成为一个新的、不同的对象：

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]

你要查找的是 structural equality, and JavaScript does not offer a built-in way to do it. There are a bunch of libraries and Whosebug answers that provide a function to do it, but in your case, if you assume the input is an array too, you can use Array#every，将数组的每个组件与输入中的相应组件进行比较：

if (obj.color.every((x, i) => x == color[i])) {
    return obj.id;
}

ImageData 数据数组不等于数组文字

Array of ImageData data is not equal to array literal

javascript

arrays

imagedata