为什么要偶数尺寸
说起切图，每个做h5的UI开发都不会陌生，甚至都是老朋友了。视觉常常以手机实际分辨率出设计稿，但由于高分屏的原因，网页的分辨率一般是手机实际分辨率的一半（DPI为2的情况下），切图在网页中的宽高也就要设置成实际尺寸的一半了。如果切图实际尺寸含有奇数的话，就会出现width:xx.5px等的情况了。因为半像素在各手机上的表现可能会有各种意想不到的情况（可能正确显示，可能四舍五入显示，也可能纯舍或纯入显示），而且也不合理（我们都知道最小的尺寸单位应该是1px），如果用于雪碧图+项目构建工具更会出现错位的情况，所以一般情况下半像素都是要避免的，切图一般都要求是偶数尺寸。
之前我们是这样做的
我们常常使用ps的cutterman来切图，但cutterman默认只会按切图实际尺寸切出来，这时我们就要再检查一下切出来的图片是否为偶数尺寸，不是的话又要用ps通过加大1px画布的方式变成偶数（修改图像大小会拉伸或收缩，就破坏了原来的样子了）。如果切图有很多的话，这个重复的人工操作就十分烦人了。
来，解放你的双手吧
既然是重复的劳动，就应该交给计算机去处理，因此，我在深圳打台风不用上班的那天（但我热爱工作，工作使我快乐--- (￢￢) ԅ），写了一个小工具，用来批量或自动使切图变成偶数尺寸。
github地址在此：https://github.com/jasonxxp/coupleImage
使用方法：
1.在工具根目录下输入npm install，获取依赖库；或将node_modules下的images压缩包解压缩。
2.将要转换的图片放到src参数对应的目录下（默认为input）。
3-1.批量生成图片：在工具根目录下输入node batch，会将src参数对应的目录（默认为input）下的图片转换成偶数尺寸生成到dist参数对应的目录下（默认为output）。
3-2.自动监控生成图片：在工具根目录下输入node watch，会监控src参数对应的目录（默认为input）下的图片。若有新的图片，会自动转换成偶数尺寸生成到dist参数对应的目录下（默认为input，即在同一个目录将图片转换成偶数尺寸）。
用家秀
在实际使用中，我常使用node watch命令，然后将cutterman的生成目录设置成监控的目录。当cutterman切好图后，图片就会自动转换成偶数尺寸，然后图就可以直接用于项目中了。
最后再灌两碗鸡汤
虽然是不起眼的1px，但作为负责的UI开发在力所能及的情况下也应该要认真对待。拿梁朝伟给小米note2拍的MV《一面运气，一面实力》做比喻，一个h5能火是运气，让看到的人满意要靠实力，运气就是要让人看到你另一面的用心和实力。很多东西可能一开始看起来不起眼，要解决它可能无谓又困难，但只要一直保持着一份匠心用心去做，事情也许都会变得没那么困难起来，然后做着做着，可能事情就完成得七七八八了。
