使用Canvas操作像素的方法

現代瀏覽器支援透過<video>元素播放影片。大多數瀏覽器也可以透過MediaDevices.getUserMedia()API存取攝影機。但即使這兩件事結合起來，我們也無法直接存取和操縱這些像素。

幸運的是，瀏覽器有一個Canvas API，允許我們使用JavaScript繪製圖形。實際上，我們可以從影片本身將圖像繪製到<canvas> ，這使我們能夠操作和展示這些像素。

您在此學到的關於如何操作像素的方法，將成為您提供處理任何種類或任何來源的圖像和影片的基礎，而不僅僅是canvas。

在我們開始播放影片之前，讓我們看看如何將圖像添加到畫布。

 <img src><div> <canvas id=Canvas class=video></canvas></div>

我們創建了一個圖像元素來表示要在畫布上繪製的圖像。或者，我們可以在JavaScript中使用Image物件。

 var canvas;var context;function init() { var image = document.getElementById('SourceImage'); canvas = document.getElementById('Canvas'); context = canvas.getContext('2d'); drawImage(image); // Or // var image = new Image(); // image.onload = function () { // drawImage(image); // } // image.src = 'image.jpg';}function drawImage(image) { // Set the canvas the same width and height of the image canvas.width = image.width; canvas.height = image.height; context.drawImage(image, 0, 0);}window.addEventListener('load', init);

上面的程式碼將整個圖像繪製到畫布上。

透過CodePen上的Welling Guzman（(@wellingguzman）查看畫布上的Paint image on canvas影像。

現在我們可以開始玩這些像素了！

畫布上的圖像資料允許我們操縱和更改像素。

data屬性是一個ImageData對象，它具有三個屬性- 寬度，高度和資料/所有這些都代表基於原始圖像的東西。所有這些屬性都是唯讀的。我們關心的是數據，一個由Uint8ClampedArray物件表示的一維數組，包含RGBA格式中每個像素的資料。

儘管資料屬性是唯讀的，但並不意味著我們無法更改其值。這意味著我們不能將另一個陣列指派給此屬性。

 // Get the canvas image datavar imageData = context.getImageData(0, 0, canvas.width, canvas.height);image.data = new Uint8ClampedArray(); // WRONGimage.data[1] = 0; // CORRECT

你可能會問，Uint8ClampedArray物件代表什麼值。以下是來自MDN的描述：

Uint8ClampedArray類型數組表示一個8位元無符號整數的數組，它被箝位到0-255;如果您指定的值超出[0,255]的範圍，則將設定0或255;如果你指定一個非整數，最近的整數將被設定。內容初始化為0.一旦建立，就可以使用物件的方法來引用數組中的元素，或使用標準數組索引語法（即使用括號表示法）

簡而言之，這個數組在每個位置儲存範圍從0到255的值，這使得它成為RGBA格式的完美解決方案，因為每個部分都由0到255個值表示。

顏色可以用RGBA格式表示，它是紅色，綠色和藍色的組合。 A表示顏色不透明度的α值。

數組中的每個位置代表一個顏色（像素）通道值。

• 第一個位置是紅色值
• 第二個位置是綠色值
• 第三個位置是藍色值
• 第四個位置是Alpha值
• 第5個位置是下一個像素紅色值
• 第6個位置是下一個像素的綠色值
• 第7個位置是下一個像素的藍色值
• 第8個位置是下一個像素Alpha值
• 等等...

如果您有2x2影像，那麼我們有一個16位元陣列（每個2x2像素x 4值）。

2x2影像縮小了

該數組將如下所示：

 // RED GREEN BLUE WHITE[ 255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255, 255, 255, 255, 255]

我們可以做的最快的事情之一是透過將所有RGBA值變更為255來將所有像素設為白色。

 // Use a button to trigger the effectvar button = document.getElementById('Button');button.addEventListener('click', onClick);function changeToWhite(data) { for (var i = 0; i < data.length; i++) { data[i] = 255; }}function onClick() { var imageData = context.getImageData(0, 0, canvas.width, canvas.height); changeToWhite(imageData.data); // Update the canvas with the new data context.putImageData(imageData, 0, 0);}

資料將作為參考傳遞，這意味著我們對它所做的任何修改，它都會改變傳遞參數的值。

不需要太多計算的好效果就是反轉影像的顏色。

可以使用XOR運算子（^）或此公式255 - 值（值必須介於0-255之間）來反轉顏色值。

 function invertColors(data) { for (var i = 0; i < data.length; i+= 4) { data[i] = data[i] ^ 255; // Invert Red data[i+1] = data[i +1] ^ 255; // Invert Green data[i+2] = data[i+2] ^ 255; // Invert Blue }}function onClick() { var imageData = context.getImageData(0, 0, canvas.width, canvas.height); invertColors(imageData.data); // Update the canvas with the new data context.putImageData(imageData, 0, 0);}}

我們正在像前面那樣將循環增加4而不是1，所以我們可以從像素到像素，每個像素填充數組中的4個元素。

alpha值對反轉顏色沒有影響，所以我們跳過它。

使用下面的公式可以調整影像的亮度：newValue = currentValue + 255 *（brightness / 100）。

1. 亮度必須介於-100和100之間
2. currentValue是紅色，綠色或藍色的目前光照值。
3. newValue是目前色燈加上亮度的結果
4. 調整影像的對比度可以用這個公式來完成：

 factor = (259 * (contrast + 255)) / (255 * (259 - contrast))color = GetPixelColor(x, y)newRed = Truncate(factor * (Red(color) - 128) + 128)newGreen = Truncate( factor * (Green(color) - 128) + 128)newBlue = Truncate(factor * (Blue(color) - 128) + 128)

主要計算是獲取將應用於每個顏色值的對比因子。截斷是一個確保值保持在0到255之間的函數。

讓我們將這些函數寫入JavaScript：

 function applyBrightness(data, brightness) { for (var i = 0; i < data.length; i+= 4) { data[i] += 255 * (brightness / 100); data[i+1] += 255 * (brightness / 100); data[i+2] += 255 * (brightness / 100); }}function truncateColor(value) { if (value < 0) { value = 0; } else if (value > 255) { value = 255; } return value;}function applyContrast(data, contrast) { var factor = (259. * (contrast + 255.0)) / (255.0 * (259.0 - contrast)); for (var i = 0; i < data.length; i+= 4) { data[i] = truncateColor(factor * (data[i] - 128.0) + 128.0); data[i+ 1] = truncateColor(factor * (data[i+1] - 128.0) + 128.0); data[i+2] = truncateColor(factor * (data[i+2] - 128.0) + 128.0); }}

在這種情況下，您不需要truncateColor函數，因為Uint8ClampedArray會截斷這些值，但為了翻譯我們在其中新增的演算法。

需要記住的一點是，如果套用亮度或對比度，則影像資料被覆蓋後無法回到先前的狀態。如果我們想要重置為原始狀態，則原始影像資料必須單獨儲存以供參考。保持圖像變數對其他函數可存取將會很有幫助，因為您可以使用該圖像來重繪畫布和原始圖像。

 var image = document.getElementById('SourceImage');function redrawImage() { context.drawImage(image, 0, 0);}

為了使它適用於視頻，我們將採用我們的初始圖像腳本和HTML程式碼並做一些小的修改。

透過替換以下行來更改影片元素的Image元素：

 <img src>

...with this:

 <video src></video>

JavaScript

替換這一行：

 var image = document.getElementById('SourceImage');

....加入這行：

 var video = document.getElementById('SourceVideo');

要開始處理視頻，我們必須等到視頻可以播放。

 video.addEventListener('canplay', function () { // Set the canvas the same width and height of the video canvas.width = video.videoWidth; canvas.height = video.videoHeight; // Play the videoWidth; canvas.height = video.videoHeight; // Play the videoWidth.play(eoeo video.play(videoHeight; // Play the video video.play( ); // start drawing the frames drawFrame(video);});

當有足夠的數據可以播放媒體時，至少在幾幀內播放事件播放。

我們無法看到畫布上顯示的任何視頻，因為我們只顯示第一幀。我們必須每n毫秒執行一次drawFrame以跟上視訊幀速率。

在drawFrame內部，我們每10ms再次呼叫drawFrame。

 function drawFrame(video) { context.drawImage(video, 0, 0); setTimeout(function () { drawFrame(video); }, 10);}

在執行drawFrame之後，我們建立一個循環，每10ms執行一次drawFrame - 足夠的時間讓影片在畫布中保持同步。

我們可以使用我們之前創建的相同函數來反轉顏色：

 function invertColors(data) { for (var i = 0; i < data.length; i+= 4) { data[i] = data[i] ^ 255; // Invert Red data[i+1] = data[i +1] ^ 255; // Invert Green data[i+2] = data[i+2] ^ 255; // Invert Blue }}

並將其加入drawFrame函數中：

 function drawFrame(video) { context.drawImage(video, 0, 0); var imageData = context.getImageData(0, 0, canvas.width, canvas.height); invertColors(imageData.data); context.putImageData(imData,,), 0, 0); setTimeout(function () { drawFrame(video); }, 10);}

我們可以新增一個按鈕並切換效果：

 function drawFrame(video) { context.drawImage(video, 0, 0); if (applyEffect) { var imageData = context.getImageData(0, 0, canvas.width, canvas.height); invertors(0, 0, canvas.width, canvas.height); invertors(imageDatadata); context .putImageData(imageData, 0, 0); } setTimeout(function () { drawFrame(video); }, 10);}

我們將保留我們用於影片的相同程式碼，唯一不同的是我們將使用MediaDevices.getUserMedia將視訊串流從檔案變更為相機串流。

MediaDevices.getUserMedia是棄用先前API MediaDevices.getUserMedia（）的新API。瀏覽器仍支援舊版本，某些瀏覽器不支援新版本，我們必須求助於polyfill以確保瀏覽器支援其中一種。

首先，從影片元素中刪除src屬性：

 <video><code></pre><pre><code>// Set the source of the video to the camera streamfunction initCamera(stream) { video.src = window.URL.createObjectURL(stream);}if (navigator .mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({video: true, audio: false}) .then(initCamera) .catch(console.error) );}

Live Demo

到目前為止，我們所介紹的所有內容都是我們需要的基礎，以便為影片或圖像創建不同的效果。我們可以透過獨立轉換每種顏色來使用許多不同的效果。

將顏色轉換為灰度可以使用不同的公式/技巧以不同的方式完成，以避免陷入太深的問題我將向您展示基於GIMP desaturate tool去飽和工具和Luma的五個公式：

 Gray = 0.21R + 0.72G + 0.07B // LuminosityGray = (R + G + B) ÷ 3 // Average BrightnessGray = 0.299R + 0.587G + 0.114B // rec601 standardGray = 0.2126. / ITU-R BT.709 standardGray = 0.2627R + 0.6780G + 0.0593B // ITU-R BT.2100 standard

我們想要使用這些公式找到的是每個像素顏色的亮度等級。該值的範圍從0（黑色）到255（白色）。這些值將創建灰階（黑白）效果。

這意味著最亮的顏色將最接近255，最暗的顏色最接近0。

Live Demo

雙色調效果和灰階效果的差別在於使用了兩種顏色。在灰度上，您有一個從黑色到白色的漸變色，而在雙色調中，您可以從任何顏色到任何其他顏色（從藍色到粉紅色）都有一個漸變。

使用灰度的強度值，我們可以將其替換為梯度值。

我們需要建立一個從ColorA到ColorB的漸層。

 function createGradient(colorA, colorB) { // Values of the gradient from colorA to colorB var gradient = []; // the maximum color value is 255 var maxValue = 255; // Convert the hex color values to RGB = object as to getRGBColor(colorA); var to = getRGBColor(colorB); // Creates 256 colors from Color A to Color B for (var i = 0; i <= maxValue; i++) { // IntensityB will go from 0 to 255 // IntensityA will go from 255 to 0 / / IntensityA will decrease intensity while instensityB will increase // What this means is that ColorA will start solid and slowly transform into ColorB // If you look at it in other way the transparency of color A will increase and the transparency of color B will decrease var intensityB = i; var intensityA = var intensityA = - intensityB = i; var intensityA = 編號 - // intensity = + // intensityA = + - // intensity = + // // intensity = + // // intensitya = + // // intensity = + // // intensity = + // // intensity = + // > intensity = + // // intensitya = + // > intensity = + // // intensitya = + // > intensity + // // intensitya = + // > intensity + // // intensitya = + // > intensity + // // intensitya =d - nintensity = max> The formula below combines the two color based on their intensity // (IntensityA * ColorA + IntensityB * ColorB) / maxValue gradient[i] = { r: (intensityA*from.r + intensityB*to.r) / maxValue, g: (intensityA*from.g + intensityB *to.g) / maxValue, b: (intensityA*from.b + intensityB*to.b) / maxValue }; } return gradient;}// Helper function to convert 6digit hex values to a RGB color objectfunction getRGBColor(hex){ var colorValue; if (hex[0] === '#') { hex = hex.substr(1); } colorValue = parseInt(hex, 16); return { r: colorValue >> 16, g: (colorValue >> 8) & 255, b: colorValue & 255 }}

簡而言之，我們從顏色A創建一組顏色值，降低強度，同時轉到顏色B並增加強度。

從#0096ff 到#ff00f0

 var gradients = [ {r: 32, g: 144, b: 254}, {r: 41, g: 125, b: 253}, {r: 65, g: 112, b: 251}, {r: 91} , g: 96, b: 250}, {r: 118, g: 81, b: 248}, {r: 145, g: 65, b: 246}, {r: 172, g: 49, b: 245}, {r: 197, g: 34, b: 244}, {r: 220, g: 21 , b: 242}, {r: 241, g: 22, b: 242},];

縮放顏色過渡的表示

上面有一個從＃0096ff到＃ff00f0的10個顏色值的漸變示例。

顏色過渡的灰階表示

現在我們已經有了影像的灰階表示，我們可以使用它將其映射到雙色調漸變值。

The duotone gradient has 256 colors while the grayscale has also 256 colors ranging from black (0) to white (255). That means a grayscale color value will map to a gradient element index.

 var gradientColors = createGradient('#0096ff', '#ff00f0');var imageData = context.getImageData(0, 0, canvas.width, canvas.height);applyGradient(imageData.data);for (var i = 0vas.height);applyGradient(imageData.data);for (var i = 0vas.height);applyGradient(imageData.data);for (var i = 0vas.height);applyGradient(imageData.data);for (var i = 0vas.height);applyGradient(imageData.data);for (var i = 000%; i < data.length; i += 4) { // Get the each channel color value var redValue = data[i]; var greenValue = data[i+1]; var blueValue = data[i+2]; // Mapping the color values to the gradient index // Replacing the grayscale color value with a color for the duotone gradient data[i] = gradientColors[redValue].r; data[i+1] = gradientColors[greenValue].g; data[i+2] = gradientColors[blueValue].b; data[i+3] = 255;}

Live Demo

這個主題可以更深入或解釋更多的影響。為你做的功課是找到可以應用於這些骨架範例的不同演算法。

了解像素在畫布上的結構將允許您創建無限數量的效果，例如棕褐色，混色，綠色螢幕效果，圖像閃爍/毛刺等。

您甚至可以在不使用圖像或影片的情況下即時創建效果

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。