Hum
02月08日
iPhone X 截图掐头去尾 | Workflow 定制
| 本文为付费栏目文章，您已订阅，可阅读全文 |
需求
我是一名互联网网站的编辑，经常需要截手机图。最近入了 iPhone X 之后发现它截图太长，非常不适合在文章中展示。而且 iPhone X 上下两个部分一般没有意义，特别是底部那个很难看的悬浮条。所以想能够对这样的截图进行一个处理，切掉上下没有用的部分。
iPhone X 截图中被截取部分
Workflow 说明及使用方法
这个需求实现起来很容易，如果想适应的情况更多一点的话——比如横向拼图时，也可以把一张拼图的头尾去掉等——需要一点点 Workflow 的进阶知识。考虑到我个人的使用情况，我在这个 Workflow 的基本需求上增加了一些新的实用处理，总的来说是以下 4 点：
- 可以截一张 iPhone X 截图的头尾；
- 可以横向截多张 iPhone X 截图的头尾；
- Workflow 运行结束后可以预览效果后再做分享。
动作下载：iPhone X 截图掐头去尾
使用方法：在相册中选中要掐头去尾的图片，在分享菜单中运行 Workflow 即可。可以选中多张截图，选中多张截图时会自动先把截图横向拼接，然后再整体掐头去尾，效果如下：
多张图片先拼接、再掐头去尾
整个流程的思路说明
整个动作有一个核心功能部分（裁切截图）以及两个特殊部分（判断截图数量后拼图、自动适配宽度）组成。
核心功能部分
这个 Workflow 的核心部分主要用了 Crop Image（裁切图片）这个动作。
由于 iPhone X 的状态栏和底栏这两部分的大小是不一样的，根据 Apple 提供的 Sketch UI 素材，我推断出 iPhone X 顶部状态栏高度是 132 像素（44x3），底部是 102（34x3）：
iPhone X 截图中不需要的部分
所以我们要使用 Workflow 中 Crop Image 这个动作里的 Custom（自定义）这种裁切方式来裁切：
Crop Image
其中：
- Y Coordinate 指从屏幕顶部算第多少个像素后开始裁，这里填的是 132，也就是说图片是从上往下数第 132 个像素开始裁，上面的都不要了；
- Width 指宽度，我们裁切的主要是上下两个无用的部分，而且会有拼图的情况，所以宽度应该灵活一些，现在动作里填的是 Detail of Images，意思是前面传进来的图片有多宽，我们最终裁切出来的图片就有多宽；
- Height 指裁切后图片的高度，这个高度是从 Y Coordinate 里的数字中的像素开始算起的，这个 2202 的由来是：Y Coordinate 里的 132 告诉 Workflow，不要从上往下数第 132 个像素上面的东西（也就是状态栏部分），接下来，我们也不要的底部指示条的高度是 102 像素。iPhone X 截图的总高度是 2346，于是 ：2436−132−102=2202，这个 2202 就是这么来的。
至此是整个 Workflow 的核心部分，有这一个部分就足够对 iPhone X 的截图进行掐头去尾。不过，如果想让这个 Workflow 更加完善，适应的场景更多，我们还得对它进行一些修改。
判断是否是多张图片、拼图
经常在文章里插拼图的人都应该清楚，单独一张 iPhone 截图效果还是会很差，所以有需要的话可以多拼一两张，平衡宽和高。
在 Workflow 里，我们可以使用 Combine Images（拼接图片） 来拼多图：
Combine Images
这是我们会用到的 Combine Images 的参数，Side-by-Side 是指并排拼接，Horizontal 是指横向拼接，Spacing 是指图片之间的空白像素数。
有了这个动作，再接上刚才的 Crop Image，我们就可以先拼接多张 iPhone X 截图，再一齐掐头去尾，提高效率。不过说是这么说，如果做起来，就有一定的难度，因为首先你要让 Workflow 知道你选的是一张图片还是多张图片，如果是一张图片的时候它就不拼图直接裁，如果是多张图片的时候它得先拼图再裁切。而这要用到 If 这个判断条件的动作：
If 整个流程
这里用到了一个我在《Workflow 思路教程》里提到的如何判断上一步有没有结果的技巧，就是用 Count（计数） 来数一下总共接受了多少个 items（项目），如果是一张截图，那就是一个 item，那就不用拼图直接裁；如果是多张截图，那就是多个 items，那就要先拼图再裁切。
自动适配宽度
不论拼图与否，我们最后出来的图片都和原截图的宽度没有关系，所以我们在 If 部分的最后，需要把最终选择要裁剪的图片的宽度保存一下（见上图右下角最后一步），稍后要在核心步骤 Crop Image 这一步填入这个变量：
Crop Image
结合这两步，就可以让 Workflow 来判断是否是多张图片，是多张图片的话就先拼图再裁切，裁切的图片可以自动适配原图宽度。
总结
给 iPhone X 的截图掐头去尾这个需求，只要能确定不需要的部分的宽度就可以轻松解决。但是要注意，并不是所有 iPhone X 上的软件都在上下留了白，很多软件，比如 Google Calendar 和 Timepage 这些软件，会把上下的空间都利用了，甚至放上按钮，这种情况下就不能贸然切掉。
还有一种情况是头部可以截掉，底部不能截，比如 Safari 阅读模式、Instapaper、Pocket 这些阅读类软件。这种情况你可以根据教程将 Workflow 动作稍作修改，就能实现。
说回 Workflow。一个单一目的的 Workflow 总是很好做，但是我们应该要求自己在制作时考虑多种情况，尽量满足让这个单一目的能遇到的各种情况。同时要注意一些 Workflow 的思路，比如这次用到的判断单张截图还是多张截图的步骤，是个很通用的步骤，我在很多 Workflow 里都用过它。这种思路积累得越多，在制作 Workflow 时就能越顺手。
上一期
下一期
精选评论（0） 我的评论