使用Canvas操作像素的方法
现代浏览器支持通过 <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（(）查看画布上的 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)
);
}
效果
到目前为止，我们所介绍的所有内容都是我们需要的基础，以便为视频或图像创建不同的效果。我们可以通过独立转换每种颜色来使用很多不同的效果。
灰阶
将颜色转换为灰度可以使用不同的公式/技巧以不同的方式完成，以避免陷入太深的问题我将向您展示基于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。
双色调
双色调效果和灰度效果的区别在于使用了两种颜色。在灰度上，您有一个从黑色到白色的渐变色，而在双色调中，您可以从任何颜色到任何其他颜色（从蓝色到粉红色）都有一个渐变。
使用灰度的强度值，我们可以将其替换为梯度值。
我们需要创建一个从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;
}
结论
这个主题可以更深入或解释更多的影响。为你做的功课是找到可以应用于这些骨架示例的不同算法。
了解像素在画布上的结构将允许您创建无限数量的效果，如棕褐色，混色，绿色屏幕效果，图像闪烁/毛刺等。
您甚至可以在不使用图像或视频的情况下即时创建效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。