用canvas实现图片滤镜效果详解之灰度效果
2013-11-04 08:16
615 查看
前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法。
前面介绍的特效中灰度效果最简单,就从这里开始介绍吧。
img.src = ’http://bloglaotou.duapp.com/wp-content/themes/frontopen2/tools/filter/image2.jpg’;
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext(“2d”);
context.drawImage(img, 0, 0);
var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);
// 1.灰度效果
//计算公式 .299 * r + .587 * g + .114 * b;
// calculate gray scale value
for ( var x = 0; x < canvasData.width; x++) {
for ( var y = 0; y < canvasData.height; y++) {
// Index of the pixel in the array
var idx = (x + y * canvasData.width) * 4;
var r = canvasData.data[idx + 0];
var g = canvasData.data[idx + 1];
var b = canvasData.data[idx + 2];
var gray = .299 * r + .587 * g + .114 * b;
// assign gray scale value
canvasData.data[idx + 0] = gray; // Red channel
canvasData.data[idx + 1] = gray; // Green channel
canvasData.data[idx + 2] = gray; // Blue channel
canvasData.data[idx + 3] = 255; // Alpha channel
// 加上黑色的边框
if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
{
canvasData.data[idx + 0] = 0;
canvasData.data[idx + 1] = 0;
canvasData.data[idx + 2] = 0;
}
}
}
context.putImageData(canvasData, 0, 0);
点这里看预览
前面介绍的特效中灰度效果最简单,就从这里开始介绍吧。
1.获取图像数据
img.src = ’http://bloglaotou.duapp.com/wp-content/themes/frontopen2/tools/filter/image2.jpg’;
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext(“2d”);
context.drawImage(img, 0, 0);
var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);
2.通过灰度算法处理图像数据
// 1.灰度效果
//计算公式 .299 * r + .587 * g + .114 * b;
// calculate gray scale value
for ( var x = 0; x < canvasData.width; x++) {
for ( var y = 0; y < canvasData.height; y++) {
// Index of the pixel in the array
var idx = (x + y * canvasData.width) * 4;
var r = canvasData.data[idx + 0];
var g = canvasData.data[idx + 1];
var b = canvasData.data[idx + 2];
var gray = .299 * r + .587 * g + .114 * b;
// assign gray scale value
canvasData.data[idx + 0] = gray; // Red channel
canvasData.data[idx + 1] = gray; // Green channel
canvasData.data[idx + 2] = gray; // Blue channel
canvasData.data[idx + 3] = 255; // Alpha channel
// 加上黑色的边框
if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
{
canvasData.data[idx + 0] = 0;
canvasData.data[idx + 1] = 0;
canvasData.data[idx + 2] = 0;
}
}
}
3.把新的图像数据写入canvas
context.putImageData(canvasData, 0, 0);
4.效果预览
点这里看预览
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- css滤镜实现页面灰色黑白色效果代码
- html5在android中的使用问题及技巧解读
- 非html5实现js版弹球游戏示例代码
- 通过javascript把图片转化为字符画
- Android 游戏开发之Canvas画布的介绍及方法
- HTML5附件拖拽上传drop & google.gears实现代码
- 《HTML+CSS3权威指南》笔记摘要 - 目录
- 关于“HTML5 的未来 - HTML5 还能走多远”一文的一些看法
- html5 App phonegapcn + eclipse + Andriod 安装配置
- HTML5 canvas实现一个简易画板
- [转] HTML5 Canvas Heart
- 关于SurfaceView的问题
- 用nodejs 改造移动版本的osc翻译频道
- jQuery+HTML5声音提示
- HTML5 之美:推荐9款优秀的 HTML5 音乐播放器
- 突袭HTML5之SVG 2D入门10-1
- 为什么Stimulsoft Reports值得升级v2013.2版本