window.onload = function() {
    //try and create a canvas element
    var testCanvas = document.createElement('canvas');

    //check if object supports getContext() method  
    if (testCanvas.getContext !== undefined) {
        var canvas = document.getElementById("effectsCanvas"),
            context = canvas.getContext("2d");

        canvas.style.border = "2px solid blue";

        var destX = 0,
            destY = 0,
            imageObj = new Image();

        imageObj.onload = function() {
            context.drawImage(imageObj, destX, destY);
            var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
            var pixels = imgData.data;
            for (var i = 0, n = pixels.length; i < n; i += 4) {
                var grayscale = pixels[i] * .3 + pixels[i + 1] * .59 + pixels[i + 2] * .11;
                pixels[i] = grayscale; // red
                pixels[i + 1] = grayscale; // green
                pixels[i + 2] = grayscale; // blue
                // alpha
            }
            context.putImageData(imgData, 0, 0);
        };
        imageObj.src = "images/TEST.jpg"; //！！注意这里的图片要和网页同源，不然不能读取照片的信息进而不能实现变成灰度
    } else {
        document.writeln('You are plum outta luck, cuz your browser does not support the canvas element.');
    }
};