引言
图片处理现在已经成为了我们生活中的刚需,想必大家也经常有这方面的需求。实际前端业务中,也经常会有很多的项目需要用到图片加工和处理。由于过去一段时间公司的业务需求,让我在这方面积累了一些干货,趁着年后这段时间总结成一系列文章与大家分享,希望能对各位努力中的前端童鞋带来启发和帮助
本系列分成以下4个部分:
- 基础类型图片处理技术之缩放与裁剪;
- 基础类型图片处理技术之图片合成;
- 基础类型图片处理技术之文字合成;
- 算法类型图片处理技术;
文章中,我会提到很多在实际实践中所遇到的坑或者经验,应该算是干货满满~~如果能通读,应该能大大提升对前端图片处理领域的理解,有感兴趣的童鞋可以与我深入讨论,希望本文能达到抛砖引玉的效果,让前端在图像处理方面有更多的可能性,有不足之处望请谅解。
通过这些积累,我封装了几个项目中常用的功能:
图片合成: Example Git 图片裁剪: Example Git 人像抠除: Example Git
唠叨完这些老套路后,我们开始起飞!
首先,我这里将前端图片处理暂且分成两种类型:基础类型 与 算法类型;
基础类型的图片处理技术: 图片缩放,旋转,添加边框,图片合成,拼图等业务都属于基础类型的图片处理,其区分点在于无需使用像素级别的算法,而是通过计算改变图片的尺寸及位置等来改造图片。例如常用的贴纸功能:
算法类型的图片处理: 这类型的图片处理复杂度较高,特点是通过像素级别算法对图片的像素点进行RGBA
通道值等进行改造,例如我们使用photshop
或者美图秀秀等工具对图片进行的 美颜 / 滤镜 / 黑白 / 抠图 / 模糊等操作,这类型的重点主要在于算法和性能层面。例如常用的妆容功能:
本系列首先从基础类型处理开启我们的旅程。基础类型的图片处理在实际项目中有着大量的使用场景,主要是运用canvas
的能力来完成,不存在性能和兼容性问题,能够达到线上运行标准。我这里将基础类型的图片处理大致的分成以下几种类型,这些类型基本能覆盖日常所有业务场景:
- 图片的缩放;
- 图片的裁剪;
- 图片的合成;
图片与图片的合成,例如贴纸,边框,水印等;为图片添加文字;为图片添加基础几何图形;
Tips: 我已将该类型的图片处理场景封装成了一个插件,基本上能应付所有这类型图片处理的需求,GIT地址 (欢迎探讨);