前端UI设计稿对比工具 - chrome+webpack插件

（切图仔）前端开发者一大重要的职责就是将 UI画稿转化为实际可用的页面，效果图的还原度在至关大的程度上决定了 UI 和 PM的满意度

通常状况下，拿到设计稿后，懒散点的可能直接看图软件打开，肉眼测距就开搞了，负责点的会打开 PS或者更正规的 Photoshop，力图精确到 px，这两种方法各有利弊，前者的还原度大几率堪忧，后者耗时耗力，能把眼睛看瞎，最后都不必定能过得了设计师的像素眼

鄙人不才，刚好热衷并擅长于肉眼测距，只要不是苛刻到死盯像素级的差别，那么彻底足够交差，然而天有不测风云，公司的设计部近来加大了对设计稿还原度的较真劲头，致使我与设计师之间摆头的频率直线拉升，一来二去以后筋疲力尽，细细想来，不是长久之计，因而决定着手从根源上解决这个问题

uipx-chrome-plugin

肉眼测距与 PS测量各有利弊，最好能摒弃糟粕并把这两个的优势结合到一块儿，肉眼测距的优势是短平快，缺点是不够精确，PS测距的优势是够精确，缺点是太慢了，碰上赶进度的需求根原本不及，因此须要作到既快又准

那么，若是把还原稿从 PS中移到正在开发的页面上，再加上一些必要的辅助能力，好比测距，这不就能解决上面的问题了吗？

通常状况下，不管开发 PC端的页面仍是移动端的页面，咱们都是习惯于在 PC的浏览器上进行调试，既然是浏览器，那么我首先就想到浏览器扩展插件了

这个插件最好具有如下几个功能：

• 测距 测量设计稿与页面还原图之间元素位置、尺寸的差别，相似于 PS的标尺，方便调节
• 反相 一是方便对比差别，二是对于一个像素来讲，与其反相事后并设置透明度为 0.5的像素混合重叠后，合成后的颜色将变为灰色，这是一个很直观的断定像素是否相同的因素
• 透明度调节 一是方便对比差别，二是辅助反相
• 拖拽UI设计稿 仍是方便对比差别
• 位置微调 对 拖拽UI设计稿 功能的补充
• 透明化非必要的色值 好比，对于一张设计稿来讲，它的背景若是是白色，那么在对比的时候，这个白色的背景彻底能够透明化处理，只露出主体元素，排除了非必要元素的干扰

因而，能够先上效果图了：

需求点有了，设计稿有了，实现就很简单了

此 chrome扩展插件，主要分为三个部分

popup

也就是上面那个图，鼠标点浏览器的右上角扩展插件图标后出现的页面

这个页面就是个展现层，整合上面所说的那几个功能点，响应用户的操做，主要就是页面绘制与事件注册

content

注入到实际开发页面上的代码，用于响应 popup的动做

前端操做图片最方便的就是 canvas了，经过将设计稿绘制到 canvas上，能够很轻易地实现上面说的那几个功能点

此脚本会向页面上追加一个 canvas元素，设计稿的承载以及功能点的实现，例如反相、透明等都在这个 canvas上实现

background

此脚本是做为一个数据缓存库来用的，由于 popup的生命周期很短，展示了就是生成，消失了就是销毁，没法长时间地保存变量值，须要经过此脚原本间接保存

插件的运行就是依靠这三部分相互通讯完成，核心代码很简单，我就很少说了，感兴趣的能够本身看下，源码地址

uipx-webpack-plugin

因为 uipx-chrome-plugin 是一个 chrome的扩展插件，没法在移动端使用，而移动端几乎又是我现今开发的所有场景，有些不太方便，虽然通常而言也都是在 chrome的模拟移动设备下完成移动端开发，但不实际弄到真机上总感受不得劲，因而在小伙伴的启发下，决定将 uipx-chrome-plugin改形成一个 webpack 插件，表现形式就直接（抄）参考 vconsole-webpack-plugin

具体原理基本上和 uipx-chrome-plugin差很少，只不过是平台 API差别罢了，另外，此插件彻底是经过 js注入的，因此也不像 uipx-chrome-plugin那样能够直接写 html，不过这都很容易解决

此插件已经发布到 npm 了，能够直接下载使用，源代码也已经上传到 Github 感兴趣的能够下载使用

小结

这两个插件代码层面上没什么难度，但确实又能够解决实际问题，这种轮子仍是能够造一造的，另外，轮子的代码和平时业务代码的差别仍是比较大的，更能体现出一我的的编码水平和风格，没有业务的桎梏，在写代码的时候有更大的发挥空间，不失为自省吾身的一种途径