现代浏览器支持通过 <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颜色
颜色可以用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元素:
<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 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 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.2126R + 0.7152G + 0.0722B // 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 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 }}
简而言之,我们从颜色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
结论
这个主题可以更深入或解释更多的影响。为你做的功课是找到可以应用于这些骨架示例的不同算法。
了解像素在画布上的结构将允许您创建无限数量的效果,如棕褐色,混色,绿色屏幕效果,图像闪烁/毛刺等。
您甚至可以在不使用图像或视频的情况下即时创建效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。