現(xiàn)代瀏覽器支持通過(guò) <video>元素播放視頻。大多數(shù)瀏覽器也可以通過(guò) MediaDevices.getUserMedia()API訪問(wèn)攝像頭。但即使這兩件事結(jié)合起來(lái)，我們也無(wú)法直接訪問(wèn)和操縱這些像素。
幸運(yùn)的是，瀏覽器有一個(gè)Canvas API，允許我們使用JavaScript繪制圖形。實(shí)際上，我們可以從視頻本身將圖像繪制到 <canvas>，這使我們能夠操作和展示這些像素。
您在此學(xué)到的關(guān)于如何操作像素的方法，將成為您提供處理任何種類(lèi)或任何來(lái)源的圖像和視頻的基礎(chǔ)，而不僅僅是 canvas。
將圖像添加到畫(huà)布
在我們開(kāi)始播放視頻之前，讓我們看看如何將圖像添加到畫(huà)布。
<img src><div> <canvas id="Canvas" class="video"></canvas></div>
我們創(chuàng)建了一個(gè)圖像元素來(lái)表示要在畫(huà)布上繪制的圖像。或者，我們可以在JavaScript中使用Image對(duì)象。
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);上面的代碼將整個(gè)圖像繪制到畫(huà)布上。
通過(guò) CodePen上的Welling Guzman（(@wellingguzman）查看畫(huà)布上的 Paint image on canvas圖像。
現(xiàn)在我們可以開(kāi)始玩這些像素了！
更新圖像數(shù)據(jù)
畫(huà)布上的圖像數(shù)據(jù)允許我們操縱和更改像素。
data屬性是一個(gè) ImageData對(duì)象，它具有三個(gè)屬性 - 寬度，高度和數(shù)據(jù)/所有這些都代表基于原始圖像的東西。所有這些屬性都是只讀的。我們關(guān)心的是數(shù)據(jù)，一個(gè)由 Uint8ClampedArray對(duì)象表示的一維數(shù)組，包含RGBA格式中每個(gè)像素的數(shù)據(jù)。
盡管數(shù)據(jù)屬性是只讀的，但并不意味著我們無(wú)法更改其值。這意味著我們不能將另一個(gè)數(shù)組分配給此屬性。
// Get the canvas image datavar imageData = context.getImageData(0, 0, canvas.width, canvas.height);image.data = new Uint8ClampedArray(); // WRONGimage.data[1] = 0; // CORRECT
你可能會(huì)問(wèn)，Uint8ClampedArray對(duì)象代表什么值。以下是來(lái)自MDN的描述：
Uint8ClampedArray類(lèi)型數(shù)組表示一個(gè)8位無(wú)符號(hào)整數(shù)的數(shù)組，它被鉗位到0-255;如果您指定的值超出[0,255]的范圍，則將設(shè)置0或255;如果你指定一個(gè)非整數(shù)，最近的整數(shù)將被設(shè)置。內(nèi)容初始化為0.一旦建立，就可以使用對(duì)象的方法引用數(shù)組中的元素，或使用標(biāo)準(zhǔn)數(shù)組索引語(yǔ)法（即使用括號(hào)表示法）
簡(jiǎn)而言之，這個(gè)數(shù)組在每個(gè)位置存儲(chǔ)范圍從0到255的值，這使得它成為RGBA格式的完美解決方案，因?yàn)槊總€(gè)部分都由0到255個(gè)值表示。
RGBA顏色
顏色可以用RGBA格式表示，它是紅色，綠色和藍(lán)色的組合。 A表示顏色不透明度的α值。
數(shù)組中的每個(gè)位置代表一個(gè)顏色（像素）通道值。
如果您有2x2圖像，那么我們有一個(gè)16位陣列（每個(gè)2x2像素x 4值）。
2x2圖像縮小了
該數(shù)組將如下所示：
// RED GREEN BLUE WHITE[ 255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255, 255, 255, 255, 255]
更改像素?cái)?shù)據(jù)
我們可以做的最快的事情之一是通過(guò)將所有RGBA值更改為255來(lái)將所有像素設(shè)置為白色。
// Use a button to trigger the "effect"var 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);}數(shù)據(jù)將作為參考傳遞，這意味著我們對(duì)它做出的任何修改，它都會(huì)改變傳遞參數(shù)的值。
反轉(zhuǎn)顏色
不需要太多計(jì)算的好效果就是反轉(zhuǎn)圖像的顏色。
可以使用XOR運(yùn)算符（^）或此公式255 - 值（值必須介于0-255之間）來(lái)反轉(zhuǎn)顏色值。
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);}我們正在像前面那樣將循環(huán)增加4而不是1，所以我們可以從像素到像素，每個(gè)像素填充數(shù)組中的4個(gè)元素。
alpha值對(duì)反轉(zhuǎn)顏色沒(méi)有影響，所以我們跳過(guò)它。
亮度和對(duì)比度
使用下面的公式可以調(diào)整圖像的亮度：newValue = currentValue + 255 *（brightness / 100）。
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)
主要計(jì)算是獲取將應(yīng)用于每個(gè)顏色值的對(duì)比度因子。截?cái)嗍且粋€(gè)確保值保持在0到255之間的函數(shù)。
讓我們將這些函數(shù)寫(xiě)入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.0 * (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函數(shù)，因?yàn)閁int8ClampedArray會(huì)截?cái)噙@些值，但為了翻譯我們?cè)谄渲刑砑拥乃惴ā?/p>
需要記住的一點(diǎn)是，如果應(yīng)用亮度或?qū)Ρ榷龋瑒t圖像數(shù)據(jù)被覆蓋后無(wú)法回到之前的狀態(tài)。如果我們想要重置為原始狀態(tài)，則原始圖像數(shù)據(jù)必須單獨(dú)存儲(chǔ)以供參考。保持圖像變量對(duì)其他函數(shù)可訪問(wèn)將會(huì)很有幫助，因?yàn)槟梢允褂迷搱D像來(lái)重繪畫(huà)布和原始圖像。
var image = document.getElementById('SourceImage');function redrawImage() { context.drawImage(image, 0, 0);}使用視頻
為了使它適用于視頻，我們將采用我們的初始圖像腳本和HTML代碼并做一些小的修改。
HTML
通過(guò)替換以下行來(lái)更改視頻元素的Image元素：
<img src>
...with this:
<video src></video>
JavaScript
替換這一行：
var image = document.getElementById('SourceImage');...添加這行：
var video = document.getElementById('SourceVideo');要開(kāi)始處理視頻，我們必須等到視頻可以播放。
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 video video.play(); // start drawing the frames drawFrame(video);});當(dāng)有足夠的數(shù)據(jù)可以播放媒體時(shí)，至少在幾幀內(nèi)播放事件播放。
我們無(wú)法看到畫(huà)布上顯示的任何視頻，因?yàn)槲覀冎伙@示第一幀。我們必須每n毫秒執(zhí)行一次drawFrame以跟上視頻幀速率。
在drawFrame內(nèi)部，我們每10ms再次調(diào)用drawFrame。
function drawFrame(video) { context.drawImage(video, 0, 0); setTimeout(function () { drawFrame(video); }, 10);}在執(zhí)行drawFrame之后，我們創(chuàng)建一個(gè)循環(huán)，每10ms執(zhí)行一次drawFrame - 足夠的時(shí)間讓視頻在畫(huà)布中保持同步。
將效果添加到視頻
我們可以使用我們之前創(chuàng)建的相同函數(shù)來(lái)反轉(zhuǎn)顏色：
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函數(shù)中：
function drawFrame(video) { context.drawImage(video, 0, 0); var imageData = context.getImageData(0, 0, canvas.width, canvas.height); invertColors(imageData.data); context.putImageData(imageData, 0, 0); setTimeout(function () { drawFrame(video); }, 10);}我們可以添加一個(gè)按鈕并切換效果：
function drawFrame(video) { context.drawImage(video, 0, 0); if (applyEffect) { var imageData = context.getImageData(0, 0, canvas.width, canvas.height); invertColors(imageData.data); context.putImageData(imageData, 0, 0); } setTimeout(function () { drawFrame(video); }, 10);}使用 camera
我們將保留我們用于視頻的相同代碼，唯一不同的是我們將使用MediaDevices.getUserMedia將視頻流從文件更改為相機(jī)流。
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
效果
到目前為止，我們所介紹的所有內(nèi)容都是我們需要的基礎(chǔ)，以便為視頻或圖像創(chuàng)建不同的效果。我們可以通過(guò)獨(dú)立轉(zhuǎn)換每種顏色來(lái)使用很多不同的效果。
灰階
將顏色轉(zhuǎn)換為灰度可以使用不同的公式/技巧以不同的方式完成，以避免陷入太深的問(wèn)題我將向您展示基于GIMP desaturate tool去飽和工具和Luma的五個(gè)公式：
Gray = 0.21R + 0.72G + 0.07B // LuminosityGray = (R + G + B) ÷ 3 // Average BrightnessGray = 0.299R + 0.587G + 0.114B // rec601 standardGray = 0.2126R + 0.7152G + 0.0722B // ITU-R BT.709 standardGray = 0.2627R + 0.6780G + 0.0593B // ITU-R BT.2100 standard
我們想要使用這些公式找到的是每個(gè)像素顏色的亮度等級(jí)。該值的范圍從0（黑色）到255（白色）。這些值將創(chuàng)建灰度（黑白）效果。
這意味著最亮的顏色將最接近255，最暗的顏色最接近0。
Live Demo
雙色調(diào)
雙色調(diào)效果和灰度效果的區(qū)別在于使用了兩種顏色。在灰度上，您有一個(gè)從黑色到白色的漸變色，而在雙色調(diào)中，您可以從任何顏色到任何其他顏色（從藍(lán)色到粉紅色）都有一個(gè)漸變。
使用灰度的強(qiáng)度值，我們可以將其替換為梯度值。
我們需要?jiǎng)?chuàng)建一個(gè)從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 var from = 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 = maxValue - intensityB; // 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 }}簡(jiǎn)而言之，我們從顏色A創(chuàng)建一組顏色值，降低強(qiáng)度，同時(shí)轉(zhuǎn)到顏色B并增加強(qiáng)度。
從 #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},];縮放顏色過(guò)渡的表示
上面有一個(gè)從＃0096ff到＃ff00f0的10個(gè)顏色值的漸變示例。
顏色過(guò)渡的灰度表示
現(xiàn)在我們已經(jīng)有了圖像的灰度表示，我們可以使用它將其映射到雙色調(diào)漸變值。
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 = 0; 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
結(jié)論
這個(gè)主題可以更深入或解釋更多的影響。為你做的功課是找到可以應(yīng)用于這些骨架示例的不同算法。
了解像素在畫(huà)布上的結(jié)構(gòu)將允許您創(chuàng)建無(wú)限數(shù)量的效果，如棕褐色，混色，綠色屏幕效果，圖像閃爍/毛刺等。
您甚至可以在不使用圖像或視頻的情況下即時(shí)創(chuàng)建效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
