Canvas相关处理,备忘。
场景:图片浏览网站,多图片平铺展示,各种颜色同时在同一页面展示,容易使用户产生眼花缭乱的感觉。所以多图片浏览可利用Canvas对所有图片进行灰度处理,当用户焦点定位到某一图片时才使该图片“变亮”。
图片灰度处理代码如下:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function pageLoaded(){
var canvas=document.getElementById("myCanvas");
//源图片
var image=document.getElementById("imageSource");
var imageWidht=image.width;
var imageHeight=image.height;
canvas.width=imageWidht;
canvas.height=imageHeight;
var context=canvas.getContext("2d");
//绘制
context.drawImage(image,0,0);
//获取对象 指定矩形范围内的像素数据
var canvasData=context.getImageData(0,0,imageWidht,imageHeight);
/*canvasData.data为图片像素的数组
对于canvasData中每一个像素都包含四方面的信息:
R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的ÿ