怎么用HTML5组件Canvas实现图像灰度化

今天小编给大家分享一下怎么用HTML5组件Canvas实现图像灰度化的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

十载的安庆网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整安庆建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“安庆网站设计”,“安庆网站推广”以来，每个客户项目都认真落实执行。

新建一个html页面，在body标签之间加入

复制代码

代码如下：

灰色滤镜

添加一段最简单的JavaScript脚本

复制代码

代码如下：

 window.onload = function（）{
var canvas = document.getElementById（“ myCanvas”）;
  // TODO：在这里做些事
}
从Canvas对象获取重新定位对象某些上下文的代码如下：
复制代码
代码如下：
var context = canvas.getContext（“ 2d”）;
在html页面中加入一幅图像的html代码如下
复制代码
代码如下：
从html img对象中获取图像对象的javascript代码如下：
复制代码
代码如下：
var image = document.getElementById（“ imageSource”）;
将得到的图像描绘在画布对象中的代码如下：
复制代码
代码如下：
context.drawImage（image，0，0）;
从Canvas对象中获取图像编码数据的代码如下：
复制代码
代码如下：
var canvasData = context.getImageData（0，0，canvas.width，canvas.height）;
读取数值与实现灰度计算的代码如下：
复制代码
代码如下：
for（var x = 0; x 
for（var y = 0; y 
//数组中像素的索引
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;
//分配灰度值
canvasData.data [idx + 0] =灰色；//红色通道
canvasData.data [idx + 1] =灰色；//绿色通道
canvasData.data [idx + 2] =灰色；//蓝色频道
canvasData.data [idx + 3] = 255; // Alpha通道
//添加黑色边框
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;
}
}
}
其中计算灰度公式为灰色= 0.299×红色+ 0.578×绿色+ 0.114 *蓝色
读取出来的像素值顺序为RGBA分别代表红色，绿色，蓝色，alpha通道
处理完成的数据要重新加载到Canvas中。代码如下：
context.putImageData（canvasData，0，0）;
程序最终的效果如下：
完全源代码如下：
复制代码
代码如下：