现代浏览器支持通过<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元素：

<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 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

结论

这个主题可以更深入或解释更多的影响。为你做的功课是找到可以应用于这些骨架示例的不同算法。

了解像素在画布上的结构将允许您创建无限数量的效果，如棕褐色，混色，绿色屏幕效果，图像闪烁/毛刺等。

您甚至可以在不使用图像或视频的情况下即时创建效果：

最新文章

  1. 压测如何观测jvm，就是使用jmx来实现jvm监控
  2. asp.net“服务器应用程序不可用” 解决方法
  3. Js获取当前日期时间及其它格式化操作
  4. VC 运行时库 /MD、/MDd 和 /MT、/MTd
  5. 256. Paint House
  6. android shape的使用详解以及常用效果（渐变色、分割线、边框、半透明阴影效果等）
  7. [jQuery] check if an id exists - Google 网上论坛
  8. CSS3——:nth-child选择器基本用法简述
  9. bebugger调试理解commonJS原理
  10. k8s全栈监控之metrics-server和prometheus
  11. Java注解之Retention、Documented、Target、Inherited介绍
  12. 测试驱动android
  13. 禅道项目管理软件&#160;为提交Bug页面添加“优先级”字段
  14. 使用git初始化本地仓库并提交到远程分支
  15. php json josn_decode()返回的是对像，如何把对像转成数组
  16. ZH奶酪：Python 中缀表达式转换后缀表达式
  17. CF&amp;&amp;CC百套计划3 Codeforces Round #204 (Div. 1) D. Jeff and Removing Periods
  18. java阳历转农历
  19. JS框架设计之命名空间设计一种子模块
  20. bzoj2428 [HAOI2006]均分数据 模拟退火

热门文章

  1. yifan的数组
  2. PHP之GET和POST小结
  3. [CSP-S模拟测试]:party?（霍尔定理+最小割+树链剖分）
  4. vue绑定属性、绑定class及绑定style
  5. 汇编指令ADD
  6. Leaflet-Leafletv0.7使用leaflet-bing-layer
  7. laravel 向多视图及所有视图传递数据变量
  8. redux请求数据流程
  9. python-form表单
  10. sourcetree配置gitlab