引言
图片处理现在已经成为了我们生活中的刚需,想必大家也经常有这方面的需求。实际前端业务中,也经常会有很多的项目需要用到图片加工和处理。由于过去一段时间公司的业务需求,让我在这方面积累了一些干货,趁着年后这段时间总结成一系列文章与大家分享,希望能对各位努力中的前端童鞋带来启发和帮助
本系列分成以下4个部分:
-
<李>基础类型图片处理技术之缩放与裁剪;李
<李>基础类型图片处理技术之图片合成;李
<李>基础类型图片处理技术之文字合成;李
<李>算法类型图片处理技术;李
文章中,我会提到很多在实际实践中所遇到的坑或者经验,应该算是干货满满~ ~如果能通读,应该能大大提升对前端图片处理领域的理解,有感兴趣的童鞋可以与我深入讨论,希望本文能达到抛砖引玉的效果,让前端在图像处理方面有更多的可能性,有不足之处望请谅解。
通过这些积累,我封装了几个项目中常用的功能:
图片合成:Git实例图片裁剪:Git人例子像抠除:例子Git
唠叨完这些老套路后,我们开始起飞!
首先,我这里将前端图片处理暂且分成两种类型:基础类型与算法类型;
基础类型的图片处理技术:图片缩放,旋转,添加边框,图片合成,拼图等业务都属于基础类型的图片处理,其区分点在于无需使用像素级别的算法,而是通过计算改变图片的尺寸及位置等来改造图片。例如常用的贴纸功能:
算法类型的图片处理:这类型的图片处理复杂度较高,特点是通过像素级别算法对图片的像素点进行<代码> RGBA 通道值等进行改造,例如我们使用<代码> photshop>
本系列首先从基础类型处理开启我们的旅程。基础类型的图片处理在实际项目中有着大量的使用场景,主要是运用画布<代码> 的能力来完成,不存在性能和兼容性问题,能够达到线上运行标准。我这里将基础类型的图片处理大致的分成以下几种类型,这些类型基本能覆盖日常所有业务场景:
-
<李>图片的缩放;李
<李>图片的裁剪;李
<李>图片的合成;李
图片与图片的合成,例如贴纸,边框,水印等;为图片添加文字,为图片添加基础几何图形;
提示:我已将该类型的图片处理场景封装成了一个插件,基本上能应付所有这类型图片处理的需求,GIT地址(欢迎探讨);在介绍具体的功能前,由于图片的绘制完全的依赖于图片的加载,因此先来了解一些前置知识。
<强> 1,图片的跨域
首先,图片加载并绘制涉及了图片的跨域问题,因此如果是一张在线的图片,需要在图片服务器上设置跨域头,并且在前端加载图片之前将<代码> & lt; img> crossOrigin 设置为<代码> ,否则绘制到画布的时候会报跨域的错误。
提示:这里积累了一些小坑,可以跟大家分享下:
<李> <代码> crossOrigin> base64> <李>当项目为本地包环境时,例如内置于<代码>软件> crossOrigin> webview> base64> <李> <代码> crossOrigin> & lt; img> src 之前进行设置,否则无效;李
<强> 2,图片的加载
由于画布<代码> 的绘制需要的是已经加载完成的图片,我们需要确保绘制的素材图片是已经加载完成的,因此我们需要使用<代码> & lt; img> 的<代码> onload 事件,可以使用html <代码> 中已存在的图片,或者用
JavaScript图片处理与合成总结
