前端图像处理指南
来源:互联网 发布:mac os x 10.7.4升级 编辑:程序博客网 时间:2024/06/06 04:40
计算机图像处理是一门很成熟的技术,任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制,处理起来会有诸多不便,这里所说的前端图像处理,是真的指**不借助任何后端服务**纯前端实现的图像处理。本文会介绍canvas位图处理,SVG矢量图和CSS3图像处理,重点是canvas,并且最后会附上一个小应用。
图像滤镜处理
现在的朋友圈发个图都要用滤镜美一下,复古清纯胶片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) // 绘制处理后图片
}
阅读全文:http://click.aliyun.com/m/9237/
0 0
- 前端图像处理指南
- 前端图像处理指南
- 技术文章 | 前端图像处理指南
- 前端性能优化指南
- 建站指南-前端
- 前端性能优化指南
- 前端性能优化指南
- 前端性能优化指南
- 前端开发质量保证指南
- 前端框架开发指南
- 前端性能优化指南
- 前端优化不完全指南
- 前端性能优化指南
- 前端工程师面试指南
- 前端优化不完全指南
- 前端优化不完全指南
- 前端工程师“应试”指南
- 前端优化不完全指南
- iOS 如何完整复制另一个视图控制器的内容
- 润乾报表如何在工具栏中增加总记录数和本页记录数显示
- C++成员变量、构造函数的初始化顺序
- 1.2数据结构->线性表->链表
- 管线命令与分号连续下达命令区别
- 前端图像处理指南
- 在iptables防火墙下开启vsftpd的端口
- android material design之点击波纹效果(ripple)
- oc-Foundation_03_NSEnumerator
- plist文件生成及使用(帧动画实现)
- java多线程基础知识(二)
- Java实现tcp
- Calix_Day1: 第一周任务
- ZCMU-训练赛-A