此处出自《JavaScript DOM编程艺术(第二版)》
要点:
- 使用Modernizr对浏览器是否支持< canvas > 进行检测
- 通过getImageData获取用户像素数据
- 对用户的像素数据进行处理
提示:(W3school)
对于 ImageData 对象中的每个像素,都存在着四方面的信息,即 RGBA 值:
- R - 红色 (0-255)
- G - 绿色 (0-255)
- B - 蓝色 (0-255)
- A - alpha 通道 (0-255; 0 是透明的,255 是完全可见的)
grayscale.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--记得添加modernizr插件-->
<script src="scripts/modernizr.custom.77598.js"></script>
</head>
<body>
<img src="images/1.jpg" id="avatar" title="Jeffrey" alt="My Avatar" />
<script src="scripts/grayscale.js"></script>
</body>
</html>
grayscale.js
function convertToGS(img) {
// 如果浏览器不支持<canvas>就返回
if(!Modernizr.canvas) return;
// 存储原始的彩色版
img.color = img.src;
// 创建灰度版
img.grayscale = createGSCanvas(img);
// 鼠标进入图片变为彩色
img.onmouseover = function () {
this.src = this.color;
};
// 鼠标离开图片变为灰色
img.onmouseout = function () {
this.src = this.grayscale;
};
img.onmouseout();
}
function createGSCanvas(img) {
// 创建一个新的canvas元素,在其绘图环境中绘制了彩色图片
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
// 取得原始的图像数据
var c = ctx.getImageData(0, 0, img.width, img.height);
// 循环遍历其中每一个元素,
// 将每个彩色像素的红、绿、蓝彩色成分求平均值,得到彩色值的灰度值
for(i = 0; i<c.height; i++){
for(j = 0; j<c.width; j++){
var x = (i*4) * c.width + (j*4);
var r = c.data[x];
var g = c.data[x+1];
var b = c.data[x+2];
c.data[x] = c.data[x+1] = c.data[x+2] = (r+g+b) / 3;
}
}
// 把灰度数据再放回到画布的绘图环境
ctx.putImageData(c, 0, 0, 0, 0, c.width, c.height);
// 返回原始的图像数据作为新灰度图片的源
return canvas.toDataURL();
}
// 加载转变函数
window.onload = function () {
convertToGS(document.getElementById('avatar'));
};
最终效果
鼠标未进入
鼠标进入