js-imagediff

基于 JavaScript / Canvas 的 imagediff 实用程序。

应用程序接口

• createCanvas() 创建一个新的 Canvas 元素。
• createImageData(width, height) 创建一个新的 ImageData 对象。
• isImage(object) 测试 Image 对象。
• isCanvas(object) Canvas 对象的测试。
• isContext(object) CanvasRenderingContext2D 对象的测试。
• isImageData(object) 测试 ImageData 对象。
• isImageType(object) 测试上述任何一项。
• toImageData(object) 将图像类型对象转换为新的 ImageData 对象。
• equal(a, b, tolerance)测试图像类型对象是否相等；接受以像素为单位的容差。
• diff(a, b, options) 对 a 和 b 执行图像差异，返回 a – b。
  
  • options.align设置为'top'在不同尺寸时顶部对齐图像。
• noConflict() 为兼容性从全局空间中删除 imagediff，返回 imagediff。
• imageDataToPNG(imageData, outputFile, [callback]) （仅限节点）使用可选回调将 imageData 渲染为 outputFile 中的 png。

节点

js-imagediff 可通过 npm 获得。它使用需要安装 lib cairo 的节点画布。安装 js-imagediff 与npm install -g imagediff.

命令行

• imagediff [-e|equal] [-t|tolerance VALUE] FILE_A FILE_B 使用可选容差测试两个图像文件的相等性，打印“真”或“假”。
• imagediff [-d|diff] FILE_A FILE_B OUTPUT_FILE 在两个文件之间呈现图像差异，另存为输出文件。

找不到模块“画布”

为了更好的浏览器和 browserify 支持，Canvas 已移至可选依赖项。如果您看到无法找到模块的消息，请先检查npm install，以防安装它确实存在问题。这与 https://github.com/HumbleSoftware/js-imagediff/issues/22 有关。如果您对此有任何问题，或者知道更好的解决方法，请告诉我。

单元测试画布

JS ImageDiff 开启了在 JavaScript 中轻松测试 Canvas 和其他类似图像的对象。js-imagediff 提供了两个 Jasmine 匹配器来使这更容易。

• toImageDiffEqual(expected, tolerance) 期望结果等于另一种图像类型。
• toBeImageData() 期望结果是 ImageData。

在失败的测试中，toImageDiffEqual()将显示预期图像、实际图像和两者的图像差异，让您轻松发现错误。

使用匹配器：

  beforeEach(function () {
    this.addMatchers(imagediff.jasmine);
  });

演示

• 演示可在http://humblesoftware.github.com/js-imagediff/ 获得
• Jasmine 测试演示可在http://humblesoftware.github.com/js-imagediff/test.html 获得

用户

• Flotr2 – 单元测试
• Envision.js – 单元测试
• CSS Critic – CSS 回归测试框架
• HUSL – 人性化 HSL – 用于发布前的回归测试。
• PhantomCSS – CSS 回归测试。

如果您正在使用 js-imagediff pelase，请给我们留言，让我们知道您正在用它做什么。

变更日志

1.0.8

• 更新画布依赖项。
• 暴露内部画布。

1.0.7

• 为画布添加异步图像加载（关闭 #31、#35、#39）。
• 支持--diff, --equal, --tolerance（关闭 #17）。

1.0.6

• 添加顶部对齐的差异选项。
• 修复不同透明胶片的问题。

1.0.5

• 将画布移动到可选的依赖项以获取 browserify 支持。

1.0.4

• 更新了画布依赖项。
• 在 diff 模式下添加对参数计数的检查。

1.0.3

• 添加了 NPM/node.js 支持。
• 为equal和diff方法添加了命令行界面。
• 添加imageDataToPNG了节点环境的方法。
• 添加了处理有损格式的容差，并提供可接受差异的选项。

1.0.2

• 添加了可选的宽度/高度参数以createCanvas与createImageData.
• 修复了toImageDiffEqual()匹配器和非节点类型的问题 – 不会将 ImageData 和上下文转换为 Canvas 元素进行显示。

1.0.1

• 将库移至 imagediff.js
• 添加茉莉花匹配器
• 小错误修复，皮棉修复。

作者

卡尔·萨瑟兰carl@humblesoftware.com
http://www.humblesoftware.com