最近看了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中運行也可以)：?點此下載

　　最后來張福利，哈哈！

轉載于:https://www.cnblogs.com/artwl/archive/2013/01/16/2862093.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Javascript图像处理之将彩色图转换成灰度图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。