JavaScript图片处理与合成总结
引言
图片处理现在已经成为了我们生活中的刚需,想必大家也经常有这方面的需求。实际前端业务中,也经常会有很多的项目需要用到图片加工和处理。由于过去一段时间公司的业务需求,让我在这方面积累了一些干货,趁着年后这段时间总结成一系列文章与大家分享,希望能对各位努力中的前端童鞋带来启发和帮助
本系列分成以下4个部分:
- 基础类型图片处理技术之缩放与裁剪;
- 基础类型图片处理技术之图片合成;
- 基础类型图片处理技术之文字合成;
- 算法类型图片处理技术;
文章中,我会提到很多在实际实践中所遇到的坑或者经验,应该算是干货满满~~如果能通读,应该能大大提升对前端图片处理领域的理解,有感兴趣的童鞋可以与我深入讨论,希望本文能达到抛砖引玉的效果,让前端在图像处理方面有更多的可能性,有不足之处望请谅解。
通过这些积累,我封装了几个项目中常用的功能:
图片合成:ExampleGit图片裁剪:ExampleGit人像抠除:ExampleGit
唠叨完这些老套路后,我们开始起飞!
首先,我这里将前端图片处理暂且分成两种类型:基础类型与算法类型;
基础类型的图片处理技术:图片缩放,旋转,添加边框,图片合成,拼图等业务都属于基础类型的图片处理,其区分点在于无需使用像素级别的算法,而是通过计算改变图片的尺寸及位置等来改造图片。例如常用的贴纸功能:
算法类型的图片处理:这类型的图片处理复杂度较高,特点是通过像素级别算法对图片的像素点进行
本系列首先从基础类型处理开启我们的旅程。基础类型的图片处理在实际项目中有着大量的使用场景,主要是运用
- 图片的缩放;
- 图片的裁剪;
- 图片的合成;
图片与图片的合成,例如贴纸,边框,水印等;为图片添加文字;为图片添加基础几何图形;
Tips:我已将该类型的图片处理场景封装成了一个插件,基本上能应付所有这类型图片处理的需求,GIT地址(欢迎探讨);
在介绍具体的功能前,由于图片的绘制完全的依赖于图片的加载,因此先来了解一些前置知识。
1、图片的跨域
首先,图片加载并绘制涉及了图片的跨域问题,因此如果是一张在线的图片,需要在图片服务器上设置跨域头,并且在前端加载图片之前将
Tips:这里积累了一些小坑,可以跟大家分享下:
-
crossOrigin需要严格设置,既只有是线上图片时,才设置,而本地路径或者 base64时,则一定不能设置,否则在某些系统下会报错,导致图片加载失败; - 当项目为本地包环境时,例如内置于
App中时, crossOrigin值无效, webview的安全机制会导致无论该值设置与否,都会报跨域的错误。解决办法是:需要将所有图片转换成 base64才能正确绘制; -
crossOrigin值一定要在图片加载之前设置,即为 <img>赋值 src之前进行设置,否则无效;
2、图片的加载
由于
介绍图片加载的前置知识后,我们先来看最简单的图片处理---缩放与裁剪!
Tips:相信大家阅读本文时,如果对canvas不太了解,可以查询下对应的 API文档即可,本文不再对 canvas基础 API做详细讲解。
一、图片的缩放
图片的缩放最常见的场景是做图片的压缩。在保证图片清晰的前提下通过合理地缩小图片尺寸,能大大的降低图片的大小。在实际应用场景中,有着广泛的用途。例如图片上传时,用户自主上传的图片可能是一张非常大的尺寸,例如现在手机所拍摄的照片尺寸经常能达到
1、新建一个
该画布既为图片缩放后的尺寸,此处有个点是需要保证图片的比例不变,因此需要通过计算得出画布的宽与高:
2、将图片画入后再导出成
这里使用2个最常用的方法:
image:需要绘制的图片源,需要接收已经加载完成的
type:图片格式,一般可以使用
Tips:此处有个坑,想导出jpg格式的图片必须用 image/jpeg,不能使用 image/jpg;
3.多种格式的图片转换成
我们常用的图片上传功能,我们使用的是原生的
使用
对
Tips:这里有个小坑是,图片的
1、可以使用
2、这里有个
二、图片的裁剪
在实际项目中,由于图片的宽高比例各式各样,而展示和使用一般需要一个较为固定的比例,此时便需要将图片裁剪成我们需要的宽高比例,使用到的方式其实和图片的缩放基本一致,主要是通过调整
此处以需要将一张
三、图片的旋转
图片的旋转的原理同样也是将图片绘制到画布上进行旋转后再导出。其实使用到的是
这里有个比较特别的部分,就是这里旋转的是画布的画板部分,并不是整个画布容器,而画布容器外面不会被绘制,因此这里就会出现一个图像四个角被裁剪掉的问题:
解决的方式就是:
将画布容器放大,变成:
上面这个例子中,由于图片是正方形,因此将容器的宽高放大1.5倍便可保证图片不会被裁剪,而现实中的图片由于宽高比例不定,因此这个放大系数是一个动态的值:
Tips:由于我们将画板基点移动到画布中心了,因此在绘制的时候,要相对于基点调整dx与 dy;
总结
本文主要介绍了一些前端图片处理的前置知识:
图片处理技术分类;
基础类型图片处理技术;算法类型图片处理技术;图片的跨域;图片的加载;
还有讲解了属于基础类型图片处理中最简单的两类:
图片的缩放;图片的裁剪;图片的旋转;
相信大家已经对图片的处理有了个大致的了解了。下篇文章,我们将继续深入研究基础类型中的图片合成,也是各种干货满满,美不胜收。
最后,非常感谢各位童鞋的阅读,有何建议或者疑惑,可以随时与我讨论哈
您可能感兴趣的文章:
js生成word中图片处理方法 angular.js+node.js实现下载图片处理详解 js图片处理示例代码
- PHP / JavaScript / jQuery 表单验证与处理总结: 第①部分 PHP 表单验证与处理
- javascript图片与加载处理基础详细讲解几种方法实现
- 用Canvas+Javascript FileAPI 实现一个跨平台的图片剪切、滤镜处理、上传下载工具
- Java图片处理(一)图片合成
- JavaScript 错误处理与调试经验总结
- JavaScript 事件流、事件处理程序及事件对象总结
- javascript处理HTML的Encode(转码)和Decode(解码)总结
- [javascript-snippet]使用javascript+html5实现图片的灰度处理
- Javascript的新领域——动态图片处理之SVG
- Atitit.java图片图像处理attilax总结 BufferedImage extends java.awt.Image获取图像像素点image.getRGB(i, lineIndex); 图片剪辑/AtiPlatf_cms/src/com/attilax/img/imgx.javacutImage图片处理titit 判断判断一张图片是否包含另一张小图片 atitit 图片去噪算法的原理与
- 超实用的javascript时间处理总结
- JavaScript图片尺寸处理小结
- Android App 瘦身总结 第一章 图片资源的优化处理
- javascript,ASP页面跳转处理总结
- Javascript验证上传图片大小[前台处理]
- PHP Imagick 图片合成 圆角处理
- 七牛---关于图片处理问题总结
- iOS有关图片处理的总结 (四)------图片的饱和度,亮度,对照度。
- Atitit.java图片图像处理attilax总结
- [置顶] 【android】Android中图形图片及处理相关Api的小总结