本文转载自Lady_澜澜,原文地址:

http://blog.sina.com.cn/s/blog_c4565a780102wxry.html


命令:Blink-diff --output D:\result.png  D:\06.png  D:\002.png

blob.png


实现效果:

1、对比两张图片,生成的结果图片会将不同处标记出来。

2、对比两个文件夹下的图片,生成结果图片集,效果跟两张的一样。

 

搭建环境:

1、装JDK,搭建JAVA环境,百度有教程。命令:Java -version +回车 验证是否成功。

2、装nodejs,官网下载,百度仍旧有教程。命令:nodejs -v +回车 验证是否成功。这里还得多说一句,目前的nodejs安装包都有集成npm,所以安装好nodejs,也就安装好npm,用命令:npm -v +回车 验证是否成功。

 

装blink-diff:

1、到nodejs的安装路径下执行以下三条命令(如我的是:C:\Programs Files\nodejs):

 1) npm install blink-diff

 2)npm install --save blink-diff 

 3)npm install --save-dev blink-diff

若想全局安装,可在命令后面加上 -g 。

 

2、对比两张图片的命令(若全局安装直接执行,否则要转到nodejs路径下执行):

 Blink-diff --output D:\output.png  D:\image1.png  D:\image2.png

注意:这里的 output.png 若不指明路径,默认生在当前路径下,image1和image2也是一样,除非在当前路径下,否则一定要带路径,不然系统找不到。

 

3、可到D盘目录下查看生成的output.png图片。

 

4、对比两个文件夹下的图片的命令:

 这里不能只执行一条简单的命令,而是需要一些参数,这时候就需要把代码都写到一个js文件中,再到nodejs路径下执行这个js文件。这里有两个问题:

 

1)怎么把文件夹路径配置进去?

 

这里是用一个for循环来执行的,把文件夹下的图片用数字命名,对应的图片名进行比较,最后将生成的图片放到配置的文件夹下,命名跟AB一致。

下面是关键代码:

 

 for(var i=1;i<3;i++){

var diff = new BlinkDiff({

//AB两个文件夹路径配置

      imageAPath: "D:/one/"+i+".png",

      imageBPath: "D:/two/"+i+".png",

   //这些参数可以去google查一下,具体我就不说了

    thresholdType: BlinkDiff.THRESHOLD_PERCENT,

      threshold: 0.01,

      delta: 50,

      outputMaskRed: 0,

      outputMaskBlue :255,

      hideShift: true,

   //输出文件夹配置路径

     imageOutputPath:  "D:/output/"+i+".png"

});

diff.run(function (error, result) {

   if (error) {

     throw error;

   } else {

      console.log(diff.hasPassed(result.code) ? 'Passed' : 'Failed');

      console.log('Found ' + result.differences + ' differences.');

   }

});

}


其实这样就实现了两个文件夹下面的图片对比,但是在用node命令执行这个js文件之前,需要require以下blink-diff,不然无法识别,所以代码前还需要添加一句:

var BlinkDiff=require('blink-diff');

 

 

2)怎么实现自动数出文件夹里面的图片数?

 

图片是可以进行对比了,但是如果文件夹下的图片个数变化,需要手动修改代码,不好维护,所以需要写一个方法让它自动读取图片个数。这里用到了nodejs的fs,它可以实现读取某个文件夹下所有文件的信息,当然文件个数只是它的属性,我们就要这个属性。

 

代码如下:

 

var fs = require('fs');//使用之前还是要require一下,不然node不认识

function getCount(path){

var fileList=[];

readFile(path,fileList);

return fileList;

}

function readFile(path,filesList)

{

   files = fs.readdirSync(path);//需要用到同步读取

   files.forEach(walk);

   function walk(file)

   {  

        states = fs.statSync(path+'/'+file);         

        if(states.isDirectory())

        {

            readFile(path+'/'+file,filesList);

        }

        else

        {   

            //创建一个对象保存信息

            var obj = new Object();

            obj.size = states.size;//文件大小,以字节为单位

            obj.name = file;//文件名

            obj.path = path+'/'+file; //文件绝对路径

            filesList.push(obj);

        }     

    }

}

//其实上面的方法最终实现的是将文件夹下的所有文件信息保存为一个数组fileList

//现将上面的方法实际使用,得到one文件夹下的所有文件的一个数组,命名为count

var count= getCount("D:/one");

 

我们就可以把之前for循环中i<3 换成i< count.length 来实现自动数文件个数了。

 

到此为止,实现了全部功能,赶紧动手试试吧。

 

贴上完整代码作为参考,执行命令:node blinkdiff.js 。

 

 blinkdiff.js

 

var BlinkDiff=require('blink-diff');

//利用nodejs的一个文件读取的功能fs

//直接用别人写好的两个方法getCount和readFile,拿到fs对某文件夹所有文件的详细信息的一个数组

//我们只需要去用这个数组的length属性,方法可以直接copy,不用理解

var fs = require('fs');

function getCount(path){

var fileList=[];

readFile(path,fileList);

return fileList;

}

function readFile(path,filesList)

{

   files = fs.readdirSync(path);//需要用到同步读取

   files.forEach(walk);

   function walk(file)

   {  

        states = fs.statSync(path+'/'+file);         

        if(states.isDirectory())

        {

            readFile(path+'/'+file,filesList);

        }

        else

        {   

            //创建一个对象保存信息

            var obj = new Object();

            obj.size = states.size;//文件大小,以字节为单位

            obj.name = file;//文件名

            obj.path = path+'/'+file; //文件绝对路径

            filesList.push(obj);

        }     

    }

}

//将上面的方法实际使用,得到one文件夹下的所有文件的一个数组,命名为count

var count= getCount("D:/one");

//直接在此使用数组count的length属性

for(var i=1;i

var diff = new BlinkDiff({

     imageAPath: "D:/one/"+i+".png",

     imageBPath: "D:/two/"+i+".png",

thresholdType: BlinkDiff.THRESHOLD_PERCENT,

     threshold: 0.01,

     delta: 50,

     outputMaskRed: 0,

     outputMaskBlue :255,

     hideShift: true,

    imageOutputPath:  "D:/output/"+i+".png"

});

diff.run(function (error, result) {

   if (error) {

      throw error;

   } else {

      console.log(diff.hasPassed(result.code) ? 'Passed' : 'Failed');

      console.log('Found ' + result.differences + ' differences.');

   }

});

}


还有一点需要说明一下,命令执行结束后,显示fail表示图片有不一样的地方,显示pass表示图片一模一样。

出现fail千万不要误以为又是error.