没有合适的资源?快使用搜索试试~ 我知道了~
JavaScript如何实现图片处理与合成
0 下载量 143 浏览量
2020-10-15
06:28:59
上传
评论
收藏 196KB PDF 举报
温馨提示
试读
5页
主要介绍了JavaScript如何实现图片处理与合成,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
资源推荐
资源详情
资源评论
JavaScript如何实现图片处理与合成如何实现图片处理与合成
主要介绍了JavaScript如何实现图片处理与合成,文中通过示例代码介绍的非常详细,对大家的学习或者工作具
有一定的参考学习价值,需要的朋友可以参考下
引言:引言:
图片处理现在已经成为了我们生活中的刚需,想必大家也经常有这方面的需求。实际前端业务中,也经常会有很多的项目需要
用到
图片加工和处理。
首先,我这里将前端图片处理暂且分成两种类型:基础类型 与 算法类型;
基础类型的图片处理技术: 图片缩放,旋转,添加边框,图片合成,拼图等业务都属于基础类型的图片处理,其区分点在
于无需使用像素级别的算法,而是通过计算改变图片的尺寸及位置等来改造图片。例如常用的贴纸功能:
算法类型的图片处理: 这类型的图片处理复杂度较高,特点是通过像素级别算法对图片的像素点进行RGBA通道值等进行
改造,例如我们使用photshop或者美图秀秀等工具对图片进行的 美颜 / 滤镜 / 黑白 / 抠图 / 模糊等操作,这类型的重点
主要在于算法和性能层面。例如常用的妆容功能:
通过这些积累,我封装了几个项目中常用的功能:
图片合成: Example Git
图片裁剪: Example Git
人像抠除: Example Git
本系列首先从基础类型处理开启我们的旅程。基础类型的图片处理在实际项目中有着大量的使用场景,主要是运用canvas的
能力来完成,不存在性能和兼容性问题,能够达到线上运行标准。我这里将基础类型的图片处理大致的分成以下几种类型,这
些类型基本能覆盖日常所有业务场景:
图片的缩放;
图片的裁剪;
图片的合成;
图片与图片的合成,例如贴纸,边框,水印等;
为图片添加文字;
为图片添加基础几何图形;
Tips: 我已将该类型的图片处理场景封装成了一个插件,基本上能应付所有这类型图片处理的需求,GIT地址 (欢迎探讨);
在介绍具体的功能前,由于图片的绘制完全的依赖于图片的加载,因此先来了解一些前置知识。
1、图片的跨域、图片的跨域
首先,图片加载并绘制涉及了图片的跨域问题,因此如果是一张在线的图片,需要在图片服务器上设置跨域头,并且在前端加
载图片之前将<img>标签的crossOrigin设置为*,否则绘制到画布的时候会报跨域的错误。
Tips: 这里积累了一些小坑,可以跟大家分享下:
1、crossOrigin需要严格设置,既只有是线上图片时,才设置,而本地路径或者base64时,则一定不能设置,否则在某些系统
下会报错,导致图片加载失败;
2、当项目为本地包环境时,例如内置于 App中时,crossOrigin值无效,webview的安全机制会导致无论该值设置与否,都会
报跨域的错误。解决办法是:需要将所有图片转换成base64才能正确绘制;
3、crossOrigin值一定要在图片加载之前设置,即为<img>赋值src之前进行设置,否则无效;
2、图片的加载、图片的加载
由于canvas的绘制需要的是已经加载完成的图片,我们需要确保绘制的素材图片是已经加载完成的,因此我们需要使用<img>
的onload事件,可以使用html中已存在的图片,或者用js创建一个图片对象:
function loadImage(image, loader, error){
// 创建 image 对象加载图片;
let img = new Image();
// 当为线上图片时,需要设置 crossOrigin 属性;
if(image.indexOf('http') == 0)img.crossOrigin = '*';
img.onload = () => {
loaded(img);
// 使用完后清空该对象,释放内存;
setTimeout(()=>{
img = null;
资源评论
weixin_38689922
- 粉丝: 6
- 资源: 915
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功