html5 访问像素值 (使图像反相)

<canvas id="myCanvas" width="500" height="500"></canvas>

// 使图像反显
    function draw(id){
        var canvas = document.getElementById(id);
        if(canvas == null){
            return false;
        }
        var context = canvas.getContext("2d");
        var img = new Image();
        img.src = 'heng.jpg';
        img.onload = function(){
            context.drawImage(img,0,0,500,500);

            console.log(img.width,img.height,canvas.width, canvas.height)// 510  764   500   500

            var imagedata = context.getImageData(0,0,canvas.width,canvas.height);
            var pixel = imagedata.data;

            for(var i = 0, n = pixel.length; i < n; i+=4 ){
                pixel[i + 0] = 255 - pixel[i + 0];// red
                pixel[i + 1] = 255 - pixel[i + 1];// green
                pixel[i + 2] = 255 - pixel[i + 2];// blue
            }
            context.putImageData(imagedata,0,0);
        };
    }

    draw("myCanvas");

　　

　　var imagedata = context.getImageData(0,0,canvas.width,canvas.height); 
　　该方法使用四个参数，sx,sy,sw,sh.(sx,sy分别表示所获取区域的起点横坐标，起点纵坐标; sw,sh分别表示所获取区域的宽度和高度)
　　imagedata 是一个 CanvasPixelArray 对象，具有width,height,data等属性。data属性是一个保存像素数据的数组[r1,g1,b1,a1,r2,g2,b2,a2...]
　　context.putImageData(imagesdata, dx,dy[,dirtyX, dirtyY,dirtyWidth,dirtyHeight]);
　　　　后面dirtyX, dirtyY,dirtyWidth,dirtyHeight 这四个参数为可选参数，给出一个矩形的起点横坐标，起点纵坐标，宽度与高度，如果加上这四个参数，则只绘制像素组中这个矩形范围内的图像。

　　attention: 在测试代码的时候，直接打开会报错：

　　　　Unable to get image data from canvas because the canvas has been tainted by cross-origin data

　　　需要放到localhost下面运行即可