前端图片编辑功能的实践小结，面试加分项

我们研究了抖音、快手等的封面编辑功能。在体验完之后，感觉他们的功能还是相对单一，基本只有花字、和模板。所以我们提供更丰富的能力，且具有淘宝的特色，能服务好我们的客户。

▐  竞品分析

下图一抖音、图二快手、图三淘系

能力	抖音	快手	淘系
花字	✔️	✔️	✔️
模板	✖️	✔️	✔️
边框	✖️	✖️	✔️
滤镜	✖️	✖️	✔️
画笔（笔触）	✖️	✖️	✔️
形状	✖️	✖️	✔️
点9图	✔️	✖️	✔️
实时编辑	✖️	✔️	✔️

图一

图二

图三

▐  核心效果：花字

花字的难点在于实现一套协议多端渲染，所以需要充分考虑移动端、PC 端的渲染差异。其次需要考虑如何快速拓展新效果。

▐  难点一：点 9 图

什么是点 9 图？为什么难？

点 9 图是一种特殊的图片样式，可以确保图片拉伸时，所设定的关键部分不变形 移动端系统支持点 9 图渲染，但 PC 端需要实现一套点 9 图渲染引擎

普通图片经由原图拉伸之后，会产生缺角部分的形变。但我们希望的是，边角部分始终不变，这样才符合视觉的需求。所以在这张点 9 图中，两个缺角，其实就是整张图的关键部分。大多数的点 9 图，其实也就是对边角有一些特殊要求。我们通常可以通过 4 个方向的 Padding，来将这些关键部分划分出来。

• 点9图实现：三个步骤（对应三个 Canvas）

步骤一：裁剪区块 （SourceCanvas 对源图片进行裁剪）

步骤二：区块拉伸 （ScaleCanvas 对某一个区块进行拉伸、平铺）

步骤三：区块拼接 （TargetCanvas 将处理好的区块拼接起来，导出目标尺寸的新图片）

• 拉伸区块的变形问题

对于一些素材，在上图的 2、4、5…用于拉伸的区块上可能也存在一些图案，所以我们给定一个宽高比，在宽高比之内，做拉伸，到达宽高比之后，将两张原图拼接，并重新拉伸到相应的大小，之后不停的拼接。这种处理方式，可以同时解决相框特效，因为本质上，相框其实就是区块 5 为透明的点 9 图

▐  难点二：定位与线性布局

定位的协议，我们先设定了上、下、左、右、中 5 个方向的二进制值，最后通过位运算得出细分的 9 个点，实现一个9宫格式的定位。而对于线性布局，它原本也是移动端的概念，我们在 PC 端上实现了横纵两种配置。

/定位协议/

上：00001 (二进制)

左：00010

下：00100

右：01000

中：10000

// 设置好上述五个方向的值之后，对每个方向互相做或运算。

如：

00001

| 00010

---

00011

上左 = 上|左 = 00001 | 00010 = 00011 (十进制：3)

上中 = 上|中 = 00001 | 10000 = 10001 (十进制：17)

上右 = 上|右 = 00001 | 01000 = 01001 (十进制：9)

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

ps://img-blog.csdnimg.cn/img_convert/621960a57eb42479e02d6d64c0c81891.png)

前端面试题汇总