JavaScript中如何实现图片处理和合成功能？

本文共计3107个文字，预计阅读时间需要13分钟。

引言：+ 图像处理已经成为我们生活中不可或缺的一部分，无论是想看高清大片还是家常美食，都离不开图像处理技术。在现实的前端业务中，许多项目都需要用到图像加工和处理。首先，我将介绍前端图像处理。

引言：

图片处理现在已经成为了我们生活中的刚需，想必大家也经常有这方面的需求。实际前端业务中，也经常会有很多的项目需要用到

图片加工和处理。

首先，我这里将前端图片处理暂且分成两种类型：基础类型 与 算法类型；

• 基础类型的图片处理技术: 图片缩放，旋转，添加边框，图片合成，拼图等业务都属于基础类型的图片处理，其区分点在于无需使用像素级别的算法，而是通过计算改变图片的尺寸及位置等来改造图片。例如常用的贴纸功能:
  
• 算法类型的图片处理: 这类型的图片处理复杂度较高，特点是通过像素级别算法对图片的像素点进行RGBA通道值等进行改造，例如我们使用photshop或者美图秀秀等工具对图片进行的 美颜 / 滤镜 / 黑白 / 抠图 / 模糊等操作，这类型的重点主要在于算法和性能层面。例如常用的妆容功能:
  

通过这些积累，我封装了几个项目中常用的功能：

• 图片合成: Example Git
• 图片裁剪: Example Git
• 人像抠除: Example Git

本系列首先从基础类型处理开启我们的旅程。基础类型的图片处理在实际项目中有着大量的使用场景，主要是运用canvas的能力来完成，不存在性能和兼容性问题，能够达到线上运行标准。