Part7-像素操作 · Canvas學習之旅

[TOC] 在 Canvas 中，可以通過`getImageData()`和`putImageData()`配合使用來對圖片進行像素操作，所謂像素操作，即黑白效果、復古效果、亮度效果等常用圖片處理方式。 ## getImageData() `getImageData()`方法用于獲取一張圖片的像素數據。語法： ```js var imgData = cxt.getImageData(x, y, width, height) var data = imgData.data ``` 說明： x、y 表示所選圖片區域的坐標，width、height 表示所選圖片區域的寬度和高度。該方法返回一個對象，這個對象有一個 data 屬性保存了這一張圖片像素數據的數組，數組取值如 [r1, g1, b1, a1, r2, g2, b2, a2]。即，在 imgData.data 這個數組中每四個數存儲著 1 個像素的 rgba 顏色紙，這四個數分別是該像素的紅（r）、綠（g）、藍（b）、透明度（a）。另外，imgData.data.length 表示圖片像素總量。 ## putImageData() `putImageData()`方法用于輸出一張圖片的像素數據。語法： ```js cxt.putImageData(image, x, y) ``` 說明： image 表示重新繪制的圖形，也就是使用 getImageData() 方法獲取的 canvasPixelArray 對象。x、y 表示重新繪制圖形左上角的橫坐標、縱坐標。 ## 像素操作示例 ### 反轉效果 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <canvas id="canvas" width="1024" height="700" style="border: 1px solid gray; display: block; margin: 0 auto"></canvas> <script> window.onload = function(){ let cnv = document.getElementById('canvas') let cxt = cnv.getContext('2d') let image = new Image() image.src= "./image.jpg" // 500 x 281 image.onload = function () { cxt.drawImage(image, 10, 10) let imageData = cxt.getImageData(10, 10, 500, 281) let data = imageData.data console.log(data) // 遍歷每個像素 for (let i = 0; i < data.length; i += 4) { // 反轉效果即 RGB 顏色值取反 data[i + 0] = 255 - data[i + 0] data[i + 1] = 255 - data[i + 1] data[i + 2] = 255 - data[i + 2] } // 在指定位置輸出圖片 cxt.putImageData(imageData, 10, 300) } } </script> </body> </html> ``` 需要注意的是，getImageData() 需要以服務器形式啟動才能使用（跨域限制），以文件形式打開會有以下錯誤： ![](https://img.kancloud.cn/17/34/173498c38f65f93db7203ac00e5113af_658x111.png) 原因可以參考：[https://www.cnblogs.com/jdksummer/articles/2565998.html](https://www.cnblogs.com/jdksummer/articles/2565998.html) 如果你使用 VSCode 編輯器，安裝 live server 插件后即可以服務器形式啟動文件： ![](https://img.kancloud.cn/8e/d5/8ed5fe298b4d2a321de5e6d641a725c1_475x391.png =300x) 上面的代碼效果如下： ![](https://img.kancloud.cn/5a/35/5a356f011baabbab2a7682a06f607c31_1327x789.png) ### 黑白效果黑白效果，也叫灰度圖，其實現算法如下：首先取紅、綠、藍三個通道的平均值，然后 data[i + 0]、data[i + 1]、data[i + 2] 全部保存為這個平均值即可。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <canvas id="canvas" width="1024" height="700" style="border: 1px solid gray; display: block; margin: 0 auto"></canvas> <script> window.onload = function(){ let cnv = document.getElementById('canvas') let cxt = cnv.getContext('2d') let image = new Image() image.src= "./image.jpg" // 500 x 281 image.onload = function () { cxt.drawImage(image, 10, 10) let imageData = cxt.getImageData(10, 10, 500, 281) let data = imageData.data // 遍歷每個像素 for (let i = 0; i < data.length; i += 4) { let average = (data[i + 0] + data[i + 1] + data[i + 2]) / 3 data[i + 0] = average data[i + 1] = average data[i + 2] = average } cxt.putImageData(imageData, 10, 300) } } </script> </body> </html> ``` ![](https://img.kancloud.cn/31/5f/315f4b89882a5797f46fe10d8e37ca57_1322x790.png) 也可以使用加權平均值來調整黑白效果： ```js let grayscale = data[i] * 0.3 + data[i + 1] * 0.6 + data[i + 2] * 0.1 data[i + 0] = grayscale // 紅 data[i + 1] = grayscale // 綠 data[i + 2] = grayscale // 藍 ``` ![](https://img.kancloud.cn/92/b9/92b9056e90cc3f708c51197b5f3ea99d_1350x748.png) ### 亮度效果亮度效果是指讓圖片變得更亮或者更暗，實現算法很簡單：將紅、綠、藍三個通道值，分別同時加上一個正值或負值即可。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <canvas id="canvas" width="1024" height="700" style="border: 1px solid gray; display: block; margin: 0 auto"></canvas> <script> window.onload = function(){ let cnv = document.getElementById('canvas') let cxt = cnv.getContext('2d') let image = new Image() image.src= "./image2.jpg" // 240 x 163 image.onload = function () { cxt.drawImage(image, 10, 10) let imageData = cxt.getImageData(10, 10, 240, 160) let data = imageData.data console.log(data) // 遍歷每個像素 for (let i = 0; i < data.length; i += 4) { // 亮度效果，三原色同時加上或減去一個值 let a = 100 data[i + 0] += a data[i + 1] += a data[i + 2] += a } // 在指定位置輸出圖片 cxt.putImageData(imageData, 10, 220) } } </script> </body> </html> ``` ![](https://img.kancloud.cn/a0/3d/a03db98207545fa6405b668a708beb53_472x493.png =300x) ### 復古效果復古效果（sepia），是指使得圖片有一種古舊效果。實現算法：將紅、綠、藍三個通道，分別取這三個值的某種加權平均值。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <canvas id="canvas" width="1024" height="700" style="border: 1px solid gray; display: block; margin: 0 auto"></canvas> <script> window.onload = function(){ let cnv = document.getElementById('canvas') let cxt = cnv.getContext('2d') let image = new Image() image.src= "./image.jpg" // 500 x 281 image.onload = function () { cxt.drawImage(image, 10, 10) let imageData = cxt.getImageData(10, 10, 500, 281) let data = imageData.data console.log(data) // 遍歷每個像素 for (let i = 0; i < data.length; i += 4) { let r = data[i + 0] let g = data[i + 1] let b = data[i + 2] data[i + 0] = r * 0.39 + g * 0.76 + b * 0.18 data[i + 1] = r * 0.35 + g * 0.68 + b * 0.16 data[i + 2] = r * 0.27 + g * 0.53 + b * 0.13 // 值隨便取，有一定大小規律即可 } // 在指定位置輸出圖片 cxt.putImageData(imageData, 10, 300) } } </script> </body> </html> ``` ![](https://img.kancloud.cn/7c/83/7c83b3595058a12d17a7a0f73be18860_1327x750.png) ### 紅色蒙版紅色蒙版即讓圖片呈現一種偏紅的效果，實現算法：將紅通道賦值為紅、綠、藍這三個的平均值，并且將綠通道、藍通道都賦值為 0。 ```js // 遍歷每個像素 for (let i = 0; i < data.length; i += 4) { let r = data[i + 0] let g = data[i + 1] let b = data[i + 2] let average = (r + g + b) / 3 data[i + 0] = average data[i + 1] = 0 data[i + 2] = 0 } ``` ![](https://img.kancloud.cn/7f/44/7f448de6316ae2896985069710a42a58_1313x767.png) ### 透明處理語法： ```js let n = 0.5 for (let i = 0; i < data.length; i += 4) { data[i + 3] = data[i + 3] * n // n 的取值范圍為 0.0 ~ 1.0 } ``` ![](https://img.kancloud.cn/63/e3/63e3387d5ff36dda4a5811d2cd583d0d_1354x746.png) ## createImageData() 方法