srcmini本文概述
你曾经玩过Spot差异游戏吗？如果你没有童年, 这是一种难题, 其目的是在两张图片之间找到一定数量的细微差别, 通常是并排打印的, 否则是相同的。有时候, 这个游戏可能会变得非常令人头疼。
查看以下示例, 尝试自己搜索差异(如果你有时间, 请继续阅读, 我们可以保证总共有4个差异)：
但是, 真的吗？看起来有点复杂, 我们需要一段时间才能发现它们。编写一些JavaScript可以为我们发现差异的结果如何, 结果它应该生成如下图像：
更好的是, 我们的图像有所不同！图像的区分是一项非常出色的任务, 这要归功于js-imagediff。 js-imagediff是基于JavaScript / Canvas的imagediff实用程序, 可在浏览器中以及与Node.js一起使用。有关此库的更多信息, 请访问Github上的官方存储库。
在本文中, 我们将向你展示如何开始使用该库以及如何使用该库区分图像或检查2个图像是否相等。
1.安装
首先, 需要下载精简的js-imagediff库脚本或源代码, 然后使用script标签将其包含在HTML文档中：
<!-- Include the image-diff library -->
<script src="image-diff.min.js"></script>包含库后, 你将可以在浏览器中使用window.imagediff或仅使用imagediff访问它。
2.发现差异
该库非常易于使用, 要开始使用, 你显然需要至少2张图像进行比较。然后分别从image元素创建一个变量并获取其值, 该值可以是<img>元素或JavaScript Image类的实例(你需要使用JavaScript手动设置src属性)。
然后使用imagediff的diff方法, 该方法期望将图像作为区分参数。此方法是同步的, 将立即返回一个ImgData, 该ImgData包含突出显示所提供图像之间差异的图像。可以在画布上绘制此ImgData(画布的putImageData方法), 以便向你的用户显示差异：
// Instance of the first image
var ImageA = document.getElementById("image-element-1");
// or
// var ImageA = new Image();
// ImageA.src = "image1-file.png";
// Instance of the second image
var ImageB = document.getElementById("image-element-2");
// or
// var ImageB = new Image();
// ImageB.src = "image2-file.png";
// Create the image that shows the difference between the images
var diff = imagediff.diff(ImageA, ImageB);
// Create a canvas with the imagediff method (with the size of the generated image)
var canvas = imagediff.createCanvas(diff.width, diff.height);
// Retrieve the 2d context
var context = canvas.getContext('2d');
// Draw the generated image with differences on the canvas
context.putImageData(diff, 0, 0);
// Now you can do whatever you want with the canvas
// for example render it inside a div element:
document.getElementById("some-div-id").appendChild(canvas);另一方面, 你可以使用imagediff的equal方法验证是否图像与其他图像相同：
// Instance of the first image
var ImageA = document.getElementById("imageA");
// or
// var ImageA = new Image();
// ImageA.src = "image1-file.png";
// Instance of the second image
var ImageB = document.getElementById("imageB");
// or
// var ImageB = new Image();
// ImageB.src = "image2-file.png";
// Create the image that shows the difference between the images
var isEqual = imagediff.equal(ImageA, ImageB , 0);
// True or False according to the images
console.log(isEqual);第三个参数指定以像素为单位的公差。
注意
你需要处理的唯一问题是它们用来验证是否加载了图像的方式(因为你无法从两个不可用的图像中得到区别)。在我们的示例中, 我们将使用标志变量, 该标志变量在加载图像时会增加其值。通过为所有图像分配相同的onload回调来增加它(当flag变量达到2时, 相同数量的图像然后将进行diff处理)。
示例：通过img标签加载图像
下面的示例显示如何区分通过文档中的<img>标记加载的2张图像。 onLoad回调仅在加载图像后执行(以确认检查图像的加载事件), 并且一旦完成区分, 它将把画布附加到图像所在的同一div上：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Div to show the images -->
<div id="result-container">
<img src="example_a.png" id="imageA"/>
<img src="example_b.png" id="imageB"/>
</div>
<!-- Include the image-diff library -->
<script src="image-diff.min.js"></script>
<script>
// A flag variable to indicate wheter the 2 images were loaded or not
var loadedImages = 0;
// Create a variable from the first image
var ImageA = document.getElementById("imageA");
// Create a variable from the second image
var ImageB = document.getElementById("imageB");
/**
* Callback that should be executed when the images are finally loaded.
*
**/
var onImagesLoaded = function () {
// Increment the images loaded flag
loadedImages++;
// Skip execution of the callback if the 2 images have been not loaded
// Otherwise continue with the diff
if(loadedImages != 2){
return;
}
// Create the image that shows the difference between the images
var diff = imagediff.diff(ImageA, ImageB);
// Create a canvas with the imagediff method (with the size of the generated image)
var canvas = imagediff.createCanvas(diff.width, diff.height);
// Retrieve the 2d context
var context = canvas.getContext('2d');
// Draw the generated image with differences on the canvas
context.putImageData(diff, 0, 0);
// Add the canvas element to the div element to show
document.getElementById("result-container").appendChild(canvas);
// Display some alert !
alert("Done!");
};
// Set the onLoad callback of the images
ImageA.addEventListener("load", onImagesLoaded, false);
ImageB.addEventListener("load", onImagesLoaded, false);
</script>
</body>
</html>对于一些示例图像, 结果将类似于：
示例：使用JavaScript加载图像
如果你不是使用图像来处理文档, 而是使用JavaScript直接抽象地操作它们, 那么你将没有任何<img>标记, 这意味着你将需要使用JavaScript的Image类来处理图像。
但是, 以与通过HTML加载图像相同的方式, 你将需要通过onload回调检查图像是否已加载。区分完成后, 会将画布添加到结果容器div上, 以图形方式显示结果：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Some div to append the result canvas later -->
<div id="result-container"></div>
<!-- Include the image-diff library -->
<script src="image-diff.min.js"></script>
<script>
// A flag variable to indicate wheter the 2 images were loaded or not
var loadedImages = 0;
// Create a variable from the first image
var ImageA = new Image();
ImageA.src = "./example_a.png";
// Create a variable from the second image
var ImageB = new Image();
ImageB.src = "./example_b.png";
/**
* Callback that should be executed when the images are finally loaded.
*
*
**/
var onImagesLoaded = function () {
// Increment the images loaded flag
loadedImages++;
// Skip execution of the callback if the 2 images have been not loaded
// Otherwise continue with the diff
if(loadedImages != 2){
return;
}
// Create the image that shows the difference between the images
var diff = imagediff.diff(ImageA, ImageB);
// Create a canvas with the imagediff method (with the size of the generated image)
var canvas = imagediff.createCanvas(diff.width, diff.height);
// Retrieve the 2d context
var context = canvas.getContext('2d');
// Draw the generated image with differences on the canvas
context.putImageData(diff, 0, 0);
// Add the canvas element to the div element to show
document.getElementById("result-container").appendChild(canvas);
// Display some alert !
alert("Done!");
};
// Set the onLoad callback of the images
ImageA.onload = onImagesLoaded;
ImageB.onload = onImagesLoaded;
</script>
</body>
</html>我们的示例将生成与前面的示例相同的黑色图像：
编码愉快！
评论前必须登录！
注册