知识点:

  1. 操作:叠放图像(Overlay Image)
  2. 操作:获取文件(Get File)
  3. 操作:存储文件(Save File)
  4. 操作:旋转图像(Rotate Image)
  5. 技巧:自定义水印图的位置
  6. 知识点:使用路径代替手动选择文件

在教程的最开始,我们已经通过旅行照拼长图这个例子,认识到了捷径在图片处理方面的基础能力。在那一周的内容里我们也说过:能做到拼图的应用有很多,但是捷径更加灵活,也可以做很多复杂的事。「打水印」算是捷径能完成的图片修改需求中,比较复杂的一项。而根据我们上周学习过的「重复」相关的知识,我们还可以做到批量打水印。

现实世界和程序中的「打水印」有何不同

想要通过捷径解决这样一个问题——如我们一直所做的——是考虑这个问题的本质,再明确其步骤。

「打水印」的本质,就是:把一张图(水印图),放(叠/摞)到另一张图(底图)的上面。水印在上,底图在下

水印在上,底图在下

像这一张我在大阪 USJ 拍的火车头,就是水印图在上,底图(照片)在下。

但是,看了这几周的教程,相信大家都已经很明白:真实世界的感受总是过于综合,而程序里的事则要处处都说清楚讲明白1 ,特别是要自动化批量处理的时候。

现实世界里我们把一张图放到另一张图上面时,上面那张(水印)图的位置、角度等等,我们都不会考虑太多,放上去凭感觉慢慢试就行。但转换到捷径里,我们就需要精准地描述上面这张图的坐标大小透明度等信息。

那么,「批量为图片加水印」这个需求,在捷径中分解步骤的话,实际上是这几步:

  • 第一步,把水印图叠到底图上
  • 第二步,调整水印的位置
  • 第三步,对多张图片执行前两步的结果(批量重复)

第一步:在捷径中确定水印图和底图

将水印图片叠加到原图在捷径里有现成的操作「叠放图像」:

操作「叠放图像」

但是这个操作,是捷径中比较不容易理解的动作之一。它和我们之前学过的「蒙版图像」一样,都是对传入的图片进行加工的操作。这也就是说,单独使用这个操作,什么也不会发生,因为我们缺乏加工的原料。设想一下,只放一个「蒙版图像」,它要把谁蒙版一下呢?

所以,这个「叠放图像」的行为实际上是:把上一步的结果获取的图片作为「底图」,把变量中的图片作为「水印」组合在一起。所以要真正地使用它,其实需要由 4 个操作拼成的操作组合:

为图片添加水印的操作组合
  1. 「获取文件」:用于获取水印图
  2. 「设定变量」:用于把水印图设为变量(用魔法变量的话这一步可以省略)
  3. 「选择照片」:用于选择底图(被打水印的那张图或多张图)
  4. 「叠放图像」:用于打水印,把水印图放到底图上。

知识点:使用路径代替手动选择文件

上面 4 个操作中的第 1 个操作「获取文件」我们是第一次接触。它其中有 2 个玄机:

  1. 获取文件可以手动选择也可以按路径选择。
  2. 获取文件可以从 iCloud Drive 或 Dropbox 里获得。

因为每次打水印都会用同一张照片,所以我们不会想一直手动选择它,而是告诉捷径「水印图在这个路径下,你每次用这个水印图就行。」

所以我们要告诉捷径水印图的路径,这样我们就不用每次都手动选择水印图。

在这里,我们还需要知道另一个捷径的限制:它只能直接获取 iCloud Drive 中「捷径(Shortcuts)」这个文件夹中的文件,也只能把文件直接存入这个文件夹。

获取和存入文件的操作分别是「存储文件」和「获取文件」:

操作「存储文件」和「获取文件」

「获取文件」有一个「显示文稿挑选器(Show Document Picker)」的开关,而「存储文件」有一个「询问存储位置(Ask Where to Save)」的开关。如果我们把这两个开关打开(像上图这样),那么每次运行到这一步,就都会弹出 iCloud Drive 的界面,让我们手动选择要操作的文件或者文件夹。这个时候,我们可以通过捷径进入任何一个 iCloud Drive 的文件夹。

但是,如果我们把这两个开关关掉:

打开「文稿挑选器」和「存储位置」的开关

那么,这两个操作会分别显示两个不同的选项:

  • 「获取文件」会显示「文件路径(File Path)」
  • 「存储文件」会显示「目的路径(Destination Path)」

路径,是文件在计算系统储存的位置。本质上,我们把一个文件存储到计算机的某个文件夹中,就是改变了它的路径。因此如果我们指定一个文件的路径,就能把它放到我们想放的位置。

那么在「获取文件」和「存储文件」这两个操作里,如果我们选择 iCloud Drive,不选择 Dropbox 的话,我们就会发现「路径」那一行默认填写着 /Shortcuts/ 的字样,而且它不能被修改。/Shortcuts/ 是「捷径(Shortcuts)」这个文件夹在 iCloud Drive 的默认路径。如果我们直接指定获取文件或存储文件的路径的话,这个路径就必须带上 /Shortcuts/,也就是说它只能放在「捷径(Shortcuts)」这个文件夹中。不过我们也可以在这个文件夹中创建子文件夹。这是唯一可以灵活变通的地方。

大家要记住捷径的这个机制(限制),以后我们会多次用到它。

因为这个机制,我们想每次不用手动选择水印图,就只能把水印图放在 iCloud Drive 中的捷径文件夹下。

具体操作是:

  1. 先把水印图放到 iCloud Drive 中的「捷径(Shortcuts)」文件夹。
  2. 把水印图改一个名字,比如说「水印图」2 。
  3. 在捷径中,「获取文件」的操作中,「文件路径」改为 /Shortcuts/水印图.png
在文件夹中的样子和在捷径中的样子

第二步:在捷径中调整水印的位置和大小

为图片添加水印的操作组合

打水印的这个 4 步操作组合我们已经搞明白了第 1 步,接下来比较难办的是第 4 步,「叠放图像」:

操作「叠放图像」

「叠放图像」这一步,有 2 种使用方式:

  1. 手动修改水印位置
  2. 指定水印的大小和位置

如果我们打开「叠放图像」中「显示图像编辑器(Show Image Editor)」的开关,那么每次运行到这一步,就会显示出一个图片编辑器。你可以在这个图片编辑器中手动调整水印图片位置等:

演示手动调整水印

但要想自动化批量给一堆图片打水印,那就还是需要指定好水印的大小和位置。捷径提供了这个选项,我们把 「显示图像编辑器」后的开关给关上:

关闭「显示图像编辑器」后的开关

就可以看到我们可以在这里设定水印图的位置、大小和透明度的各项参数。

重点技巧:如何自定义水印图的位置

打开「显示图像编辑器」的开关后,我们可以看到下面第一行出现了「位置」这个选项,里面预设了「中央」、「左上角」、「右上角」、「左下角」、「右下角」这些基本的位置。想要进一步地自定义位置,可以在「位置」中选择「自定」,接下来你在「叠放图像」这个动作里,你就可以看到完整的自定义界面:

打开「显示图像编辑器」后选择「自定」
  • 「宽度(Width)」和「高度(Height)」决定了图片的宽度和高度,单位是像素。如果你设定了一个值,另一个值会自动适配缩放。
  • 「X 坐标(X Coordinate)」和「Y 坐标(Y Coordinate)」是坐标,我们一会要细说它。
  • 「旋转(角度)Rotation(Degrees)」是我们希望水印图旋转的度数。
  • 「不透明度(Opacity)」是透明度的百分比。

在这几个值里,麻烦的是 X、Y 坐标。大多数水印,我们都是想加在右下角的,但是这个右下角并不是完全贴着右边和底边的右下角,它要有些留白,说得稍微专业一点是,距右边和底边各 100 个像素,就像这样:

把水印加在距离底边和右边 100 个像素的位置

但是坐标是从左边和定边出发的,比如我们在「X 坐标」和「Y 坐标」中分别填入 100,那它表示的含义是,距离左边、顶边各 100 个像素:

在「X 坐标」和「Y 坐标」处各填入 100

但我们想要距离右边和底边 100 个像素的图,应该怎么办?解决办法很简单也很有趣,需要一点点空间思维。

我们先利用「旋转图像」这个操作,把底图旋转 180 度:

利用「旋转图像」将照片旋转 180 度

然后把水印,按照坐标,放到距翻转过的图片的定边和左边各 100 像素的位置,也就是左上角。然后我们再把这张图转 180 度,就将图片正了过来,水印也跑到了右下角:

加上水印后,再把图片再旋转 180 度

但是,等等,水印怎么也倒过来了?水印当然会倒过来,因为前面是将带上水印的整张图片转了 180 度。所以在「叠放图片」这一步,要把水印也转 180 度。

把水印图也旋转 180 度

这样,针对位置的调整就完成了。本身捷径指能够根据图片的左边顶边的绝对位置(距离几个像素)来调整水印图的位置,而现在,我们也可以根据右边底边来调整水印图的位置了。

接下来是大小和透明度的问题,这个比较好调整:

  • 调整大小:只调整横坐标即可,竖坐标会随着横坐标比例变化。调整数值建议从 200 开始,每次加减 100。
  • 调整透明度:透明度后面的数值是百分比,100% 为完全不透明,0% 为完全透明。

调整好位置、大小和透明度,我们针对 1 张图片的打水印计划就搞定了。如果你想要把加完水印的图片保存到相册,那么你可以直接在最后一步「旋转图像」之下加上「存储到相簿」这个操作:

使用「存储到相簿」将图片保存到相册中

接下来就是进行批量操作了。

第三步:批量打水印

相信大家现在已经对批量操作很熟悉了。这里我们要用的仍然是「为每个项目重复」,要放在「选择图片」的下面,然后包住添加水印的操作:

用「为每个项目重复」包住添加水印的操作

放在「选择图片」下面,是因为我们会在「选择图片」这一步先选择一批我们想批量加水印的底图。而选择水印图片的操作并不用被包在重复之中,因为水印图我们只要获取到就可以了。而且在获取到后我们已经把它加入到了变量中,接下来每次加水印时调取变量即可。这也是变量更本质的意义。

完整操作以及演示

捷径下载:批量添加水印

素材下载(素材只供捷径练习使用):

练习:想办法做一个捷径,可以做到通过共享表单运行,并做到:

  • 如果通过共享表单运行后获取到图片,就直接为它(们)打上水印;
  • 如果运行后没获取到图片,则获取剪贴板中的图片,为它打上水印;
  • 如果捷径没获取到图片,剪贴板中也没有图片,则选择图片为它(它们)打上水印。

最后,把打上水印的图片保存到文件应用里。

提示:这道题未超纲,并且是一道很综合的题,解决的思路在这两周的内容里已经反复讲过多次。就是我们不断提的输入判断与这节打水印捷径的合并。

  • 1这也是我们觉得程序「笨」的地方,它们总是过于死板,「听不懂」「人话」。但实际上是我们现实生活对事情的感知太综合,转化为描述之后便会模糊。因此人总是产生误会,而机器一旦设置没问题,便很少出错。
  • 2这里要注意两点:1. 水印图要用 png 格式的,因为一般来说 png 格式的图才能有背景透明的效果。2. 给水印图重命名时不用加后缀名。