【亲测免费】 Resemble.js 使用教程

项目介绍

Resemble.js 是一个用于图像分析和比较的 JavaScript 库。它利用 HTML5 的 File API 解析图像数据，并使用 canvas 进行图像差异渲染。Resemble.js 可以用于浏览器中的任何图像分析和比较需求，特别适用于由 PhantomJS 驱动的视觉回归测试库 PhantomCSS。

项目快速启动

安装

首先，通过 npm 安装 Resemble.js：

npm install resemblejs

基本用法

以下是一个简单的示例，展示如何使用 Resemble.js 进行图像比较：

const resemble = require('resemblejs');

resemble('path/to/your/image1.png')
  .compareTo('path/to/your/image2.png')
  .onComplete(data => {
    console.log(data);
    /* 输出示例：
    {
      misMatchPercentage: 10.23, // 差异百分比
      isSameDimensions: true,   // 是否相同尺寸
      getImageDataUrl: function() {}
    }
    */
  });

应用案例和最佳实践

案例一：视觉回归测试

Resemble.js 常用于视觉回归测试，特别是在 PhantomCSS 中。以下是一个简单的视觉回归测试示例：

const resemble = require('resemblejs');

resemble('baseline/image.png')
  .compareTo('screenshots/current/image.png')
  .onComplete(data => {
    if (data.misMatchPercentage > 0) {
      console.log('图像存在差异');
    } else {
      console.log('图像完全相同');
    }
  });

最佳实践

1. 忽略抗锯齿差异：在视觉回归测试中，抗锯齿差异可能导致误报。可以通过设置 ignoreAntialiasing 选项来忽略这些差异：

   resemble('image1.png')
     .compareTo('image2.png')
     .ignoreAntialiasing()
     .onComplete(data => {
       console.log(data);
     });
   

2. 设置差异阈值：可以根据项目需求设置差异阈值，以减少误报：

   resemble('image1.png')
     .compareTo('image2.png')
     .setReturnEarlyThreshold(5) // 设置差异阈值为 5%
     .onComplete(data => {
       console.log(data);
     });
   

典型生态项目

PhantomCSS

PhantomCSS 是一个基于 PhantomJS 的视觉回归测试库，它利用 Resemble.js 进行图像比较。PhantomCSS 可以帮助开发者自动化视觉回归测试，确保前端界面的视觉一致性。

安装 PhantomCSS

npm install phantomcss

使用 PhantomCSS

以下是一个简单的 PhantomCSS 示例：

const phantomcss = require('phantomcss');

phantomcss.init({
  libraryRoot: './node_modules/phantomcss',
  screenshotRoot: './screenshots',
  failedComparisonsRoot: './failures'
});

casper.start('http://example.com');

casper.then(function() {
  phantomcss.screenshot('#element-to-test', 'test-name');
});

casper.then(function() {
  phantomcss.compareAll();
});

casper.run(function() {
  console.log('Tests completed!');
  casper.exit();
});

通过以上步骤，您可以快速上手 Resemble.js 并利用其进行图像分析和比较。结合 PhantomCSS，您可以实现高效的视觉回归测试。