技术文章 | 前端图像处理指南
2017-08-22 14:25
435 查看
本文来源于阿里云-云栖社区,原文点击这里。
计算机图像处理是一门很成熟的技术,任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制,处理起来会有诸多不便,这里所说的前端图像处理,是真的指**不借助任何后端服务**纯前端实现的图像处理。本文会介绍canvas位图处理,SVG矢量图和CSS3图像处理,重点是canvas,并且最后会附上一个小应用。
HTML5 canvas为我们提供了一块画布,让前端也有了操作位图的功能:图片旋转、缩放、滤镜、压缩等都可以通过JS来实现。
通过设置drawImage参数可以实现图片绘制、缩放、拉伸和裁剪等操作(
详细用法参考 drawImage(),DEMO源码戳这里 JS Bin.
只需要drawImage一个方法,就可以实现基本图形处理功能,再结合鼠标或滚轮事件,就可以实现更复杂的局部放大预览,缩放等功能了。
现在的朋友圈发个图都要用滤镜美一下,复古清纯胶片LOMO各种风格应有尽有。canvas提供了getImageData方法来获取图像上每一个像素点的RGBA信息,这样我们就能对图片进行像素级处理了。通过特定算法来重写imageData中的像素信息,然后用setImageData方法把新的数据重新绘制在canvas上,这样就可以实现图像滤镜打码加特效等一系列功能。
比如我们现在要实现一个复古滤镜:
详细用法参考 getImageData() 和 putImageData(),DEMO源码戳这里 JSFiddle.
滤镜处理关键在于滤镜算法,要想写出更高级的特效需要有计算机图形学基础,对卷积矩阵、拉普拉斯变换、傅里叶变换等数学知识也要了解,这个坑很大我就不挖了。
加完特效后如果我们想把图像保存下来,就可以用toDataURL方法来对图片进行格式转换、压缩存储了。
>>>展开全文
计算机图像处理是一门很成熟的技术,任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制,处理起来会有诸多不便,这里所说的前端图像处理,是真的指**不借助任何后端服务**纯前端实现的图像处理。本文会介绍canvas位图处理,SVG矢量图和CSS3图像处理,重点是canvas,并且最后会附上一个小应用。
canvas位图处理
HTML5 canvas为我们提供了一块画布,让前端也有了操作位图的功能:图片旋转、缩放、滤镜、压缩等都可以通过JS来实现。
图像基本处理
通过设置drawImage参数可以实现图片绘制、缩放、拉伸和裁剪等操作(注意canvas无法绘制体积过大图片,否则会卡甚至崩掉,大图可以分块读取绘制):
详细用法参考 drawImage(),DEMO源码戳这里 JS Bin.
只需要drawImage一个方法,就可以实现基本图形处理功能,再结合鼠标或滚轮事件,就可以实现更复杂的局部放大预览,缩放等功能了。
图像滤镜处理
现在的朋友圈发个图都要用滤镜美一下,复古清纯胶片LOMO各种风格应有尽有。canvas提供了getImageData方法来获取图像上每一个像素点的RGBA信息,这样我们就能对图片进行像素级处理了。通过特定算法来重写imageData中的像素信息,然后用setImageData方法把新的数据重新绘制在canvas上,这样就可以实现图像滤镜打码加特效等一系列功能。比如我们现在要实现一个复古滤镜:
// 复古滤镜处理算法:获取每个像素的RGB信息,并按特定权重返回其加权平均值 let sepiaFilter = function(imgData) { let d = imgData.data for (let i = 0; i < d.length; i += 4) { let r = d[i] let g = d[i + 1] let b = d[i + 2] d[i] = (r * 0.393) + (g * 0.769) + (b * 0.189) // red d[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168) // green d[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131) // blue } return imgData } //图像地址必须和当前页面同域,否则会报cross-origin错误 img.src = '/img/logo@2x.png' img.onload = () => { ctx.drawImage(img, 0, 0) // 绘制原图 let imgData = ctx.getImageData(0, 0, img.width, img.height) // 获取图片信息 ctx.putImageData(sepiaFilter(imgData), 100, 0) // 绘制处理后图片 }
详细用法参考 getImageData() 和 putImageData(),DEMO源码戳这里 JSFiddle.
滤镜处理关键在于滤镜算法,要想写出更高级的特效需要有计算机图形学基础,对卷积矩阵、拉普拉斯变换、傅里叶变换等数学知识也要了解,这个坑很大我就不挖了。
图像base64存储
加完特效后如果我们想把图像保存下来,就可以用toDataURL方法来对图片进行格式转换、压缩存储了。>>>展开全文
相关文章推荐
- 图像处理-Blob分析 技术文章收集
- 前端图像处理指南
- 前端图像处理指南
- 前端图像处理指南
- 博为峰Java技术文章 ——JavaSE Swing 事件处理的过程与步骤
- 博为峰Java技术文章 ——JavaSE Swing列表框选取事件的处理
- 基于Qt的图像处理技术和算法
- 博为峰Java技术文章 ——JavaSE Swing 骤匿名类方式处理事件
- (转载)(官方)UE4--图像编程----粒子模块技术指南
- 图像处理与模式识别文章收集
- 图像处理技术上的空间域和空间频率域
- Android从入门到精通第9章:图形图像处理技术
- 数字图像处理技术在TWaver可视化中的应用
- 图像处理中的全局优化技术(经典至极)
- 数字图像处理技术内容与发展现状
- 博为峰JavaEE技术文章 —— Hibernate 指南(2)Hbm文件
- .Net文档图像处理工具包GdPicture.NET发布v14,提供最先进的PDF和文档成像技术
- 技术文章 | 阿里云前端周刊 - 第 19 期
- Visual C++实现视频图像处理技术
- Android图像处理技术(实现Android中的PS)(五)