現代瀏覽器支持通過 <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 data
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
image.data = new Uint8ClampedArray(); // WRONG
image.data[1] = 0; // CORRECT
你可能會問，Uint8ClampedArray對象代表什么值。以下是來自MDN的描述：
Uint8ClampedArray類型數組表示一個8位無符號整數的數組，它被鉗位到0-255;如果您指定的值超出[0,255]的范圍，則將設置0或255;如果你指定一個非整數，最近的整數將被設置。內容初始化為0.一旦建立，就可以使用對象的方法引用數組中的元素，或使用標準數組索引語法（即使用括號表示法）
簡而言之，這個數組在每個位置存儲范圍從0到255的值，這使得它成為RGBA格式的完美解決方案，因為每個部分都由0到255個值表示。
RGBA顏色
顏色可以用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 "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);
}
數據將作為參考傳遞，這意味著我們對它做出的任何修改，它都會改變傳遞參數的值。
反轉顏色
不需要太多計算的好效果就是反轉圖像的顏色。
可以使用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）。
- 亮度必須介于-100和100之間
- currentValue是紅色，綠色或藍色的當前光照值。
- newValue是當前顏色燈加亮度的結果
- 調整圖像的對比度可以用這個公式 來完成：
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.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函數，因為Uint8ClampedArray會截斷這些值，但為了翻譯我們在其中添加的算法。
需要記住的一點是，如果應用亮度或對比度，則圖像數據被覆蓋后無法回到之前的狀態。如果我們想要重置為原始狀態，則原始圖像數據必須單獨存儲以供參考。保持圖像變量對其他函數可訪問將會很有幫助，因為您可以使用該圖像來重繪畫布和原始圖像。
var image = document.getElementById('SourceImage');
function redrawImage() {
context.drawImage(image, 0, 0);
}
使用視頻
為了使它適用于視頻，我們將采用我們的初始圖像腳本和HTML代碼并做一些小的修改。
HTML
通過替換以下行來更改視頻元素的Image元素：
...with this:
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 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(imageData, 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);
invertColors(imageData.data);
context.putImageData(imageData, 0, 0);
}
setTimeout(function () {
drawFrame(video);
}, 10);
}
使用 camera
我們將保留我們用于視頻的相同代碼，唯一不同的是我們將使用MediaDevices.getUserMedia將視頻流從文件更改為相機流。
MediaDevices.getUserMedia是棄用先前API MediaDevices.getUserMedia（）的新API。瀏覽器仍舊支持舊版本，并且某些瀏覽器不支持新版本，我們必須求助于polyfill以確保瀏覽器支持其中一種。
首先，從視頻元素中刪除src屬性：
<video><code></pre>
<pre><code>// Set the source of the video to the camera stream
function 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 // Luminosity
Gray = (R + G + B) ÷ 3 // Average Brightness
Gray = 0.299R + 0.587G + 0.114B // rec601 standard
Gray = 0.2126R + 0.7152G + 0.0722B // ITU-R BT.709 standard
Gray = 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
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 object
function 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 = 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
結論
這個主題可以更深入或解釋更多的影響。為你做的功課是找到可以應用于這些骨架示例的不同算法。
了解像素在畫布上的結構將允許您創建無限數量的效果，如棕褐色，混色，綠色屏幕效果，圖像閃爍/毛刺等。
您甚至可以在不使用圖像或視頻的情況下即時創建效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
