六、获取canvas上的像素

6.1 getImageData

该方法用于获取canvas上的像素信息，返回一个对象

使用方式：

ctx.getImageData(x, y, w, h)
    x：要获取的矩形区域的 x 点
    y：要获取的矩形区域的 y 点
    w：矩形的宽
    h：矩形的高

特点：需要服务器环境

6.2 putImageData

将像素信息放回：

ctx.putImageData(imgData, x, y);
    imgData：像素对象
    x：需要放回到canvas的 x 点
    y：需要放回到canvas的 y 点

<div id="btns">
    <button id="getPX">获取像素</button>
    <button id="red">去掉红色</button>
    <button id="green">去掉绿色</button>
    <button id="blue">去掉蓝色</button>
    <button id="gray">灰度</button>
</div>

// 获取元素
var canvas = document.getElementById("myCanvas");
var getPX = document.getElementById("getPX");
var red = document.getElementById("red");
var green = document.getElementById("green");
var blue = document.getElementById("blue");
var gray = document.getElementById("gray");
// 获取画笔
var ctx = canvas.getContext("2d");

// 创建图片元素
var img = new Image();
// 设置路径
img.src = "images/head_pic.jpg";
// 添加 load事件
img.onload = function(){
    // 绘制图片
    ctx.drawImage(this, 0, 0, 1024, 680);
}

// 添加事件
getPX.onclick = function(){
    // 获取像素信息
    var imgData = ctx.getImageData(0, 0, 1024, 680);
    console.log(imgData);
}

red.onclick = function(){
    // 获取像素信息
    var imgData = ctx.getImageData(0, 0, 1024, 680);
    for (var i = 0; i < imgData.data.length; i += 4){
        imgData.data[i] = 0;
    }
    // 将修正之后的像素对象，重新放回canvas上，否则不会有效果
    ctx.putImageData(imgData, 0, 0);
}

green.onclick = function(){
    // 获取像素信息
    var imgData = ctx.getImageData(0, 0, 1024, 680);
    for (var i = 1; i < imgData.data.length; i += 4){
        imgData.data[i] = 0;
    }
    // 将修正之后的像素对象，重新放回canvas上，否则不会有效果
    ctx.putImageData(imgData, 0, 0);
}

blue.onclick = function(){
    // 获取像素信息
    var imgData = ctx.getImageData(0, 0, 1024, 680);
    for (var i = 2; i < imgData.data.length; i += 4){
        imgData.data[i] = 0;
    }
    // 将修正之后的像素对象，重新放回canvas上，否则不会有效果
    ctx.putImageData(imgData, 0, 0);
}

gray.onclick = function(){
    // 获取像素信息
    var imgData = ctx.getImageData(0, 0, 1024, 680);
    for (var i = 0; i < imgData.data.length; i += 4){
        var r = imgData.data[i];
        var g = imgData.data[i + 1];
        var b = imgData.data[i + 2];

        // 获取平均值
        var avg = (r + g + b) / 3;

        // 重新设置
        imgData.data[i] = avg;
        imgData.data[i + 1] = avg;
        imgData.data[i + 2] = avg;
    }
    // 将修正之后的像素对象，重新放回canvas上，否则不会有效果
    ctx.putImageData(imgData, 0, 0);
}