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

结论

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

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

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

使用Canvas操作像素的更多相关文章

  1. canvas 操作像素 窗帘效果

    代码实例: <!DOCTYPE html> <html> <head> <style> canvas{ background:#eee; } </ ...

  2. canvas 操作像素 反相

    代码实例: <!DOCTYPE html> <html> <head> <style> canvas{ background:#eee; } </ ...

  3. 学习Opencv 2.4.9(二) ---操作像素

    作者:咕唧咕唧liukun321 来自:http://blog.csdn.net/liukun321 本质上说一张图像就是由数值组成的矩阵.Opencv 2.x由 cv::Mat 这个数据结构来表示一 ...

  4. OpenCV坐标系与操作像素的四种方法

    像素是图像的基本组成单位,熟悉了如何操作像素,就能更好的理解对图像的各种处理变换的实现方式了. 1.at方法 第一种操作像素的方法是使用"at",如一幅3通道的彩色图像image的 ...

  5. canvas操作图片,进行面板画图,旋转等

    HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用 ...

  6. OpenCV2计算机编程手册(一)操作像素

    1. 引言 从根本上来说,一张图像是一个由数值组成的矩阵.这也是opencv中使用 代表黑色,代表白色.对于彩色图像(BGR三通道)而言,每个像素需要三个这样的8位无符号数来表示,这种情况下,矩阵的元 ...

  7. 【Direct2D开发】 通过操作像素实现纹理混合

    转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 我们都知道Direct2D可以加载并显示图片,但是不知道你有没有想过,这个2D的图形引擎可以进行纹理混合吗?如果 ...

  8. OpenCV操作像素

    在了解了图像的基础知识和OpenCV的基础知识和操作以后,接下来我们要做的就对像素进行操作,我们知道了图像的本质就是一个矩阵,那么一个矩阵中存储了那么多的像素,我们如何来操作呢?下面通过几个例子来看看 ...

  9. angular使用canvas操作时报错

    最近,用 angular 前端框架为应用登录新增图形验证码认证,由于没有现成的插件,于是便使用canvas+js操作,也是可以正常使用,但是在编译阶段却有个报错: ERROR in src/app/l ...

随机推荐

  1. Key Set

    http://acm.hdu.edu.cn/contests/contest_showproblem.php?pid=1011&cid=594 Key Set Time Limit: 2000 ...

  2. R中unlist函数的使用

    买的书里面实例讲的不清不楚,所以看帮助文档了 用法:unlist(x, recursive = TRUE, use.names = TRUE) 帮助文档讲x可以是向量或者列表,如果是向量,则原样返回, ...

  3. 使用Excel绘制F分布概率密度函数图表

    使用Excel绘制F分布概率密度函数图表 利用Excel绘制t分布的概率密度函数的相同方式,可以绘制F分布的概率密度函数图表. F分布的概率密度函数如下图所示: 其中:μ为分子自由度,ν为分母自由度 ...

  4. Java迭代器模式

    迭代器模式是Java和.Net编程环境中非常常用的设计模式.此模式用于以顺序方式访问集合对象的元素,而不需要知道其底层表示. 迭代器模式属于行为模式类别. 实现实例 在这个实例中,将创建一个Itera ...

  5. 52-python基础-python3-列表-常用列表方法- reverse()方法

    reverse()方法 永久性地修改列表元素的排列顺序,但可随时恢复到原来的排列顺序,为此只需对列表再次调用reverse() 即可. 实例:  

  6. MVC http://stackoverflow.com/tags/model-view-controller/info

    About model-view-controller Model–View–Controller (MVC) is an architectural pattern used in software ...

  7. flex 的经典用法

    Document   11 21 31 41 51 61 71 81 91 101 111 121 131 141 151 161 171 181 191 201 211 221 231 241 25 ...

  8. number框

    因为系统的number框无法设置样式,所以休息无聊时写了一个简单的模拟number框的插件,效果不是很完善,有一些功能可能没注意到 // 简单的模拟number框插件 // 布局: // <di ...

  9. oracle sys_refcursor用法和ref cursor区别

    --创建过程,参数为sys_refcursor,为out型 create or replace procedure aabbsys_refcursor(o out sys_refcursor) is ...

  10. 【记录】Redis 基础

    Redis可以存放五种类型 1:String(字符串) 2:List(列表) 3:Hash(字典) 4:Set(集合) 5:ZSet(有序集合) String (字符串) redis 127.0.0. ...