前端开发如何用H5替代photoshop做智能切片

前端开发 如何判断首次登录?|高校老师前端开发培训|web前端开发培训总结

切片是ui开发很基础的一项工作。通俗来讲，就是将一张大的设计图利用切片工具，根据自己所需切成一张张小图。也有更聪明的U工或设计师会用ps切片插件来切片，还有一些极客会为自己编写私有的ps切图插件，提高切图效率。让我们来分析下这些切图方式的优劣。同时为各位看官带来一种全新的切图方式，使用html5的canvas技术实现智能切片（目前专注h5和网页切片）。

先抛工具地址：

http://tangbindu.github.io/huapu

先睹为快：

http://ofsky1uvn.bkt.clouddn.com/friend.gif

photoshop切片主要为2种

ps切片工具

原理：使用ps切片工具,把页面分割成n个切片框,ps基于n个切片框输出n张小图片。

优点：上手容易、历史悠久

缺点：工作量大、手工拉切线容易有误差

过程：习惯性新建一张1000×1000的空白图。把设计需要切出的n张小图片全部拉入空白图中，摆好位置，估摸好图片的左上和右下脚，拉出n个切片框（眼都瞎了，还容易出错，有木有）或者拉出n＊4条围住切片的辅助线（手指僵硬，有木有），选择切片工具，点击“基于参考线切片”按钮，最后都另存为web格式。

ps切片插件

原理：photoshop支持javascript编写插件，使用javascrip可访问ps的图层或图层组的信息和图像数据。然后将每个图层输出成单张的png图片。

优点：批量输出切片、图片名即图层名、批量设置尺寸和留白

缺点：需要安装插件、每个切片必须为独立图层或文件夹，且不能识别复合图层

过程：切片图均做成独立图层>选择切图图层>导出切片图层

cutterman切片

canvas智能切片

原理：以往我们把需要切的图片全部放在一个空白的ps画布上，并保持切片之间有一定的间隔值，然后用切片工具拉切片线，花圃切图利用切片之间的间距分离不同切片，如大于某一个间隔值的则是不同的切片。之后利用canvas技术进行像素分离，把图片分割成n张切片图。

优点：无插件依赖，快捷，轻量，极客喜欢

缺点：暂时不支持后退操作，需要制作一张切片聚合图，了解间隔值

注：暂时只支持chrome（程序员的惯性）。尽量聚合图保证图片在3000*3000以内。

切忌：暂时不支持后退操作，后续看大家的反馈，提供支持。

废话不多说，先上示例。

示例过程：

1，保存一张混合n张切片的png图

2，选择一个间隔值（非常重要，当然也可以用默认）

3，点击切图按钮

4，打包下载

http://ofsky1uvn.bkt.clouddn.com/friend.gif

工具主要功能：

1，图片分离

2，单张切片下载

3，打包切片下载

4，调整图片尺寸

5，批量设置留白

6，把切片全改偶数尺寸（h5移动端很有用）

7，批量调整图片尺寸

8，获取图片base64数据,hover在图片上，就能见到获取按钮。

9，支持部分快捷键（全选ctrl+a，取消选择ctrl+d）和ps一样

或许你还不够清楚原理，请用下面的测试图片，来测试这个工具，亲自试用下。请使用chrome浏览器

工具地址：http://tangbindu.github.io/huapu

切片过程：

1，把下面的图片另存为计算机中

2，把图片拉入我的工具里，支持拖拽。

3，鼠标点击图片，下面会出现一个小面板

4，选择间隔一个值（还不懂吗？多试几个不同值看看）

5，点击切图

6，成功