Javascript图像处理之将彩色图转换成灰度图

　　最近看了Justany_WhiteSnow的Javascript图像处理一文，写的非常好，于是就练练手，略做了一些封装：

(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();

　　给一个完整的小例子吧:)

　　本想给个在线运行地址的，但由于园子的图片存在另一个域名下，getImageData存在跨域安全问题，所以就给个下载地址吧(要放在本地的web service上运行哦，或直接丢在VS中运行也可以)： 点此下载

　　最后来张福利，哈哈！