前言
有时我们为了比较不同设备类型展示的效果往往会给图片添加 iPhone 手机外壳效果，手机添加无疑是很费时的，这个效果快捷指令也可以为我们实现。这次记录一下实现照片加壳的过程，末尾附快捷指令口令。
设计思路
- 支持多张图加壳，需要选择多张图片并进行遍历
- 获取图片尺寸并将尺寸调整为需要的设备尺寸
- 使用遮罩层和目标图片合成符合展示的设备图
- 使用 iPhoneX 设备壳底图与设备图进行叠图完成最终效果
设备尺寸大全
| 机型 | 屏幕尺寸（英寸） | 分辨率（像素） | 缩放因子 |
| iPhone 16 Pro Max | 6.7 | 1300x2600 | 3x |
| iPhone 16 Pro | 6.1 | 1200x2600 | 3x |
| iPhone 16 Plus | 6.7 | 1290x2800 | 3x |
| iPhone 16 | 6.1 | 1170x2532 | 3x |
| iPhone 15 Pro Max | 6.7 | 1290x2800 | 3x |
| iPhone 15 Pro | 6.1 | 1170x2532 | 3x |
| iPhone 15 Plus | 6.7 | 1290x2800 | 3x |
| iPhone 15 | 6.1 | 1170x2532 | 3x |
| iPhone 14 Pro Max | 6.7 | 1290x2800 | 3x |
| iPhone 14 Pro | 6.1 | 1170x2532 | 3x |
| iPhone 14 Plus | 6.7 | 1284x2778 | 3x |
| iPhone 14 | 6.1 | 1170x2532 | 3x |
| iPhone 13 Pro Max | 6.7 | 1284x2778 | 3x |
| iPhone 13 Pro | 6.1 | 1170x2532 | 3x |
| iPhone 13 Mini | 5.4 | 1080x2340 | 3x |
| iPhone 13 | 6.1 | 1170x2532 | 3x |
| iPhone 12 Pro Max | 6.7 | 1284x2778 | 3x |
| iPhone 12 Pro | 6.1 | 1170x2532 | 3x |
| iPhone 12 Mini | 5.4 | 1080x2340 | 3x |
| iPhone 12 | 6.1 | 1170x2532 | 3x |
| iPhone 11 Pro Max | 6.5 | 1242x2688 | 3x |
| iPhone 11 Pro | 5.8 | 1125x2436 | 3x |
| iPhone 11 | 6.1 | 828x1792 | 2x |
| iPhone XR | 6.1 | 828x1792 | 2x |
| iPhone XS Max | 6.5 | 1242x2688 | 3x |
| iPhone XS | 5.8 | 1125x2436 | 3x |
| iPhone X | 5.8 | 1125x2436 | 3x |
| iPhone SE3 | 4.7 | 750x1334 | 2x |
| iPhone SE2 | 4.7 | 750x1334 | 2x |
| iPhone SE | 4 | 640x1136 | 2x |
| iPhone 8 Plus | 5.5 | 1080x1920 | 3x |
| iPhone 8 | 4.7 | 750x1334 | 2x |
| iPhone 7 Plus | 5.5 | 1080x1920 | 3x |
| iPhone 7 | 4.7 | 750x1334 | 2x |
| iPhone 6S Plus | 5.5 | 1080x1920 | 3x |
| iPhone 6S | 4.7 | 750x1334 | 2x |
| iPhone 6 Plus | 5.5 | 1080x1920 | 3x |
| iPhone 6 | 4.7 | 750x1334 | 2x |
| iPhone 5S/5C | 4 | 640x1136 | 2x |
| iPhone 5 | 4 | 640x1136 | 2x |
| iPhone 4S | 3.5 | 640x960 | 2x |
| iPhone 4 | 3.5 | 640x960 | 2x |
| iPhone 3Gs | 3.5 | 320x480 | 1x |
| iPhone 3G | 3.5 | 320x480 | 1x |
| iPhone 1 | 3.5 | 320x480 | 1x |
前期准备
以 iPhoneX 为例，需要准备配套手机壳底图，将地图拆分为手机壳黑色底图和白色遮罩前景图（直接有一张中间镂空的手机壳框更简单）。
分别将 黑色底图 和 白色地图 进行 base64加密 处理为图片字符串进行保存（这样做的目的也很简单就是为了方便连同底图一起转发给他人使用）
实现
1.添加配置
根据设备尺寸大全配置对应设备的尺寸，从词典中读取设备的宽高并存入变量中
注意下一下从词典获取值的格式
2.调整图片尺寸
遍历选取的图片处理图片宽高：
-
判断当前图片是否为 iPhoneX 尺寸的图片，如果是不做处理
-
非 iPhoneX 尺寸图片进行尺寸调整
3.图片处理为设备图
将前面准备的设备前景图字符码转为图片并对选取的图片进行处理。
处理完成后我们将得到这样的效果图
4.设备图与底图叠加
解码设备底图，使用处理好的设备图与底图进行叠图处理
处理完成后我们将得到如下效果图
示例及效果预览
快捷指令口令
本文同步自微信公众号 “程序员小溪” ，这里只是同步，想看及时消息请移步我的公众号，不定时更新我的学习经验。
扫一扫
3014
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
