javascript - 如何在 JavaScript 中匹配两个图像？

Question

这个问题已经有答案了:

Compare two Images in JavaScript (8 个回答)

已关闭 8 年前。

我想将两个图像相互匹配，如果它们匹配，则结果将是 true 。如果不是，那么它将返回 false 。但我想要用 JavaScript 实现。

Answer 1

您可以通过将图像转换为base64字符串来检查

function getBase64Image(img) {
// Create an empty canvas element
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;

// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

// Get the data-URL formatted image
// Firefox supports PNG and JPEG. You could check img.src to
// guess the original format, but be aware the using "image/jpg"
// will re-encode the image.
var dataURL = canvas.toDataURL("image/png");

return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

然后

var a = new Image(),
    b = new Image();
a.src = url_a;
b.src = url_b;

var a_base64 = getBase64Image(a),
    b_base64 = getBase64Image(b);

if (a_base64 === b_base64)
{
    // they are identical
}
else
{
    // you can probably guess what this means
}

您可以看到this link了解更多。