Javascript圖像處理之將彩色圖轉(zhuǎn)換成灰度圖

(function () {
    function imageToGray(iCanvas, url) {
        this.canvas = iCanvas;
        this.iCtx = this.canvas.getContext("2d");
        this.url = url;
    }

    imageToGray.prototype = {
        imread: function (_image) {
            var width = _image.width,
                height = _image.height;
            this.iResize(width, height);
            this.iCtx.drawImage(_image, 0, 0);
            var imageData = this.iCtx.getImageData(0, 0, width, height),
                tempMat = new Mat(height, width, imageData.data);
            imageData = null;
            this.iCtx.clearRect(0, 0, width, height);
            return tempMat;
        },
        iResize: function (_width, _height) {
            this.canvas.width = _width;
            this.canvas.height = _height;
        },
        RGBA2ImageData: function (_imgMat) {
            var width = _imgMat.col,
                height = _imgMat.row,
                imageData = this.iCtx.createImageData(width, height);
            imageData.data.set(_imgMat.data);
            return imageData;
        },
        render: function () {
            var img = new Image();
            var _this = this;
            img.onload = function () {
                var myMat = _this.imread(img);
                var newImage = cvtColor(myMat);
                var newIamgeData = _this.RGBA2ImageData(newImage);
                _this.iCtx.putImageData(newIamgeData, 0, 0);
            };
            img.src = this.url;
        }
    };

    function Mat(_row, _col, _data, _buffer){
        this.row = _row || 0;
        this.col = _col || 0;
        this.channel = 4;
        this.buffer = _buffer || new ArrayBuffer(_row * _col * 4);
        this.data = new Uint8ClampedArray(this.buffer);
        _data && this.data.set(_data);
        this.bytes = 1;
        this.type = "CV_RGBA";
    }

    function cvtColor(_src) {
        if (_src.type && _src.type === "CV_RGBA") {
            var row = _src.row,
                col = _src.col;
            var dst = new Mat(row, col);
            data = dst.data,
            data2 = _src.data;
            var pix1, pix2, pix = _src.row * _src.col * 4;
            while (pix) {
                data[pix -= 4] = data[pix1 = pix + 1] = data[pix2 = pix + 2] = (data2[pix] * 299 + data2[pix1] * 587 + data2[pix2] * 114) / 1000;
                data[pix + 3] = data2[pix + 3];
            }
        } else {
            return src;
        }
        return dst;
    }

    window.imageToGray = imageToGray;
})();

var iCanvas = document.getElementById("grayImage");//canvas element
var imgToGray = new imageToGray(iCanvas, "images/1.jpg");
imgToGray.render();