簡介： 在此所謂的影像處理是真的將影像的畫素數值內容取出進行實質運算，而非以整張影像為操作標的縮放旋轉等等處理。這是在一般網頁程式很罕見的動作，原因是在HTML5的Canvas出現之前，很難取得影像的個別像素值，且JS的執行速度較慢，一般系統不傾向使用JS進行複雜的運算，尤其是影像處理。但是隨著HTML5的進化，預期未來一定會有越來越多用JS處理影像的嘗試，在本單元我們就來學習一下如何用 JS 程式操作這些影像資料陣列。 範例照片下載     請將以上照片下載到你的網站，大小是400X400點。 啟動程式設計 請在網頁上加入一個Canvas標籤，id設為"canvas" width=400 height=400 再加入三個 Input(Button)物件，value分別改為：Red, Gray, Inverse 三者的 onclick觸發事件分別為：ToRed, ToGray與 ToInv 首先網頁載入時的程式碼如下： 執行程式之後你的網頁上應該會顯示上圖的一隻牛！實際過程是： 1.取得網頁上的畫布物件 2.建立繪圖物件(2D) 3.牛的圖片先載入一個img物件，再將此img繪製在畫布上。 因為繪圖物件實際會在其他的資料處理程序中用到，所以升級為全域變數c。 紅色色板 接著建立ToRed的程式，將圖片的紅色值抽出： 在此先是用getImageData指令取出影像的RGBA陣列值，其中A是不透明度，預設是255全不透明。 必須注意的是取得的是一維陣列，JS預設狀況下沒有二維以上陣列的設計。 接著就是宣告一個準備放心影像資料的陣列，在此可以輸入寬高值(400X400)，但產生的依舊是一維陣列。 兩個迴圈的最內部需要先換算XY座標對應的一維陣列指標 k ！每一個像速點站四個元素，分別是RGB與A。 所以複製R值，並將GB值改為零之後，新陣列只有紅色，以putImageData貼回畫布即完成處理。 依此類推也可以製作綠與藍色版圖的程式。 灰階程式 與色板程式相似，取得RGB值之後平均，並設定為RGB的新值就是灰階了！ 負片程式 負片就是RGB亮度都相反，所謂相反是亮變暗，暗變亮，及值是255所以就是255減去原亮度值：