JavaScript图片处理与合成总结

引言

图片处理现在已经成为了我们生活中的刚需,想必大家也经常有这方面的需求。实际前端业务中,也经常会有很多的项目需要用到图片加工和处理。由于过去一段时间公司的业务需求,让我在这方面积累了一些干货,趁着年后这段时间总结成一系列文章与大家分享,希望能对各位努力中的前端童鞋带来启发和帮助

本系列分成以下4个部分:

  1. 基础类型图片处理技术之缩放与裁剪;
  2. 基础类型图片处理技术之图片合成;
  3. 基础类型图片处理技术之文字合成;
  4. 算法类型图片处理技术;

文章中,我会提到很多在实际实践中所遇到的坑或者经验,应该算是干货满满~~如果能通读,应该能大大提升对前端图片处理领域的理解,有感兴趣的童鞋可以与我深入讨论,希望本文能达到抛砖引玉的效果,让前端在图像处理方面有更多的可能性,有不足之处望请谅解。

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

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

唠叨完这些老套路后,我们开始起飞!

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

基础类型的图片处理技术: 图片缩放,旋转,添加边框,图片合成,拼图等业务都属于基础类型的图片处理,其区分点在于无需使用像素级别的算法,而是通过计算改变图片的尺寸及位置等来改造图片。例如常用的贴纸功能:

算法类型的图片处理: 这类型的图片处理复杂度较高,特点是通过像素级别算法对图片的像素点进行RGBA通道值等进行改造,例如我们使用photshop或者美图秀秀等工具对图片进行的 美颜 / 滤镜 / 黑白 / 抠图 / 模糊等操作,这类型的重点主要在于算法和性能层面。例如常用的妆容功能:

本系列首先从基础类型处理开启我们的旅程。基础类型的图片处理在实际项目中有着大量的使用场景,主要是运用canvas的能力来完成,不存在性能和兼容性问题,能够达到线上运行标准。我这里将基础类型的图片处理大致的分成以下几种类型,这些类型基本能覆盖日常所有业务场景:

  • 图片的缩放;
  • 图片的裁剪;
  • 图片的合成;

图片与图片的合成,例如贴纸,边框,水印等;为图片添加文字;为图片添加基础几何图形;

Tips: 我已将该类型的图片处理场景封装成了一个插件,基本上能应付所有这类型图片处理的需求,GIT地址 (欢迎探讨);

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/504.html