HTML5中增加的Canvas元素，配合JS靈活的語法，處理起圖片變得異常簡單，不需要在客戶端用C/C++寫一大堆程式碼，對於熟悉JS的程式設計師來說，只需要考慮處理圖片的邏輯了。

      canvas中如果想要處理圖片就需要藉助ImageData這個物件，就是將畫布中某一區域中的影象以RGBA的方式儲存下來，存成一個二維陣列。

     ctx.getImageData( x, y, w, h) //獲取ImageData ctx.putImageData( x, y, w, h) //將ImageData繪在畫布上

     寫了個簡單的處理影象的類，可以翻轉/灰化/去色/高亮/設單色值

     /** * @author Norris Tong */ var PS = function( config ){ //$.extend( this, config ); return this; } PS.prototype = { //將影象灰化 gray : function( ctx, imageData ){ var w = imageData.width, h = imageData.height, ret = ctx.createImageData( w, h ); for (i=0; i<w; i++) { for (j=0; j<h; j++) { var index=(i*h+j) * 4; var red=imageData.data[index]; var green=imageData.data[index+1]; var blue=imageData.data[index+2]; var alpha=imageData.data[index+3]; var average=(red+green+blue)/3; ret.data[index]=average; ret.data[index+1]=average; ret.data[index+2]=average; ret.data[index+3]=alpha; } } return ret; }, // 生成ImageData createImageData : function( ctx, ori, from, w, h ){ var ret = ctx.createImageData( w, h ); var total = w * h * 4; from = from * w * 4; for (var i= 0 ; i< total; i++) { ret.data[ i ] = ori.data[ from + i ]; } return ret; }, //生成ImageData //對稱影象反轉 createImageDataTurn : function( ctx, ori, from, w, h ){ var ret = ctx.createImageData( w, h ); var total = w * h * 4; from = from * w * 4; for (var j=0; j<h; j++) { for (var i=0; i<w; i++) { var a = (j * w + i) * 4, b = from + a, c = (j * w + w- i) * 4; ret.data[ c++ ] = ori.data[ b++ ]; ret.data[ c++ ] = ori.data[ b++ ]; ret.data[ c++ ] = ori.data[ b++ ]; ret.data[ c++ ] = ori.data[ b++ ]; } } return ret; }, //將整個圖片設定為某一顏色值 setColorR : function( ctx, imageData, n ){ var w = imageData.width, h = imageData.height, ret = ctx.createImageData( w, h ); var total = w * h * 4; for (var i=0; i<total; i +=4 ) { ret.data[i] = n; // imageData[ i ]; ret.data[i+1]= imageData.data[ i + 1 ]; ret.data[i+2]= imageData.data[ i + 2 ]; ret.data[ i+3]= imageData.data[ i + 3 ]; } return ret; }, //將整個圖片設定為某一顏色值 setColorG : function( ctx, imageData, n ){ var w = imageData.width, h = imageData.height, ret = ctx.createImageData( w, h ); var total = w * h * 4; for (var i=0; i<total; i +=4 ) { var red=imageData.data[i], green=imageData.data[i+1], blue=imageData.data[i+2]; var a = (red + green + blue) / 3; ret.data[i] = a; ret.data[i+1]= a + n; ret.data[i+2]= a; ret.data[ i+3]= imageData.data[ i + 3 ]; } return ret; }, //將整個圖片設定為某一顏色值 setColorB : function( ctx, imageData, n ){ var w = imageData.width, h = imageData.height, ret = ctx.createImageData( w, h ); var total = w * h * 4; for (var i=0; i<total; i +=4 ) { ret.data[i] = imageData.data[ i ]; ret.data[i+1]= imageData.data[ i + 1 ]; ret.data[i+2]= n; ret.data[ i+3]= imageData.data[ i + 3 ]; } return ret; }, //高亮整個圖片 highlight : function( ctx, imageData, n ){ var w = imageData.width, h = imageData.height, ret = ctx.createImageData( w, h ); var total = w * h * 4; for (var i=0; i<total; i +=4 ) { ret.data[i] = imageData.data[ i ] + n; ret.data[i+1]= imageData.data[ i + 1 ] + n; ret.data[i+2]= imageData.data[ i + 2 ] + n; ret.data[ i+3]= imageData.data[ i + 3 ]; } return ret; }, //去色 紫色 247, 0, 255 removeColor : function( ctx, imageData, r, g, b ){ var w = imageData.width, h = imageData.height, ret = ctx.createImageData( w, h ); var total = w * h * 4; for (var i=0; i<total; i +=4 ) { var red=imageData.data[i], green=imageData.data[i+1], blue=imageData.data[i+2]; //相等則全透明 if ( r == red && green == g && blue == b ){ ret.data[ i+3]= 0; }else{ ret.data[i] = red; ret.data[i+1]= green; ret.data[i+2]= blue; ret.data[ i+3]= imageData.data[ i + 3 ]; } } return ret; } }; PS = new PS();

     通過一系列操作，渲染好影象後，就需要藉助如下的程式碼將畫布中的影象儲存成圖片

     //將影象輸出為base64壓縮的字串 預設為image/png var data = canvas.toDataURL(); //刪除字串前的提示資訊 "data:image/png;base64," var b64 = data.substring( 22 ); //POST到伺服器上，生成圖片 $.post( "save.aspx" , { data : b64, name : filename }, function(){ //OK });

    save.aspx中的程式碼如下：

    protected void Page_Load(object sender, EventArgs e) { if (Request["name"] != null) { string name = Request["name"]; String savePath = Server.MapPath("~/images/output/"); try { FileStream fs = File.Create(savePath + "/" + name); byte[] bytes = Convert.FromBase64String(Request["data"]); fs.Write(bytes, 0, bytes.Length); fs.Close(); } catch (Exception except) { } } }

   PS: 由於沙箱的限制，想在瀏覽器端通過JS直接存為本地圖片，似乎是不大可能，現在網上較為折中的方式為

   window.location.href = "image/octet-stream" + data

   但這種方式不能指定儲存的檔名，在FF下預設是xxxxx.part