Los navegadores modernos admiten la reproducción de videos a través de <video> elemento. La mayoría de los navegadores también tienen acceso a cámaras web a través del MediaDevices.getUserMedia() API. Pero incluso con esas dos cosas combinadas, realmente no podemos acceder y manipular esos píxeles directamente.
Afortunadamente, los navegadores tienen una API de Canvas que nos permite dibujar gráficos usando JavaScript. De hecho, podemos dibujar imágenes en el <canvas> del propio vídeo, lo que nos da la posibilidad de manipular y jugar con esos píxeles.
Todo lo que aprenda aquí sobre cómo manipular píxeles le brindará una base para trabajar con imágenes y videos de cualquier tipo o fuente, no solo lienzos.
Agregar una imagen al lienzo
Antes de comenzar a jugar con el video, veamos cómo agregar una imagen al lienzo.
<img id="SourceImage" src="https://css-tricks.com/manipulating-pixels-using-canvas/image.jpg">
<div class="video-container"></div>Creamos un elemento de imagen que representa la imagen que se va a dibujar en el lienzo. Alternativamente, podríamos usar el Image objeto en JavaScript.
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="https://css-tricks.com/manipulating-pixels-using-canvas/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);El código anterior dibuja la imagen completa en el lienzo.
¡Ahora podemos empezar a jugar con esos píxeles!
Actualización de los datos de la imagen
Los datos de la imagen en el lienzo nos permiten manipular y cambiar los píxeles.
La propiedad de datos es una ImageData objeto con tres propiedades: el width, height y data/ todos los cuales representan esas cosas basadas en la imagen original. Todas estas propiedades son readonly. El que nos importa es data, n arreglo unidimensional representado por un Uint8ClampedArray objeto, que contiene los datos de cada píxel en formato RGBA.
Aunque el data la propiedad es readonly, no significa que no podamos cambiar su valor. Significa que no podemos asignar otra matriz a esta propiedad.
// 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¿Qué valores tiene el Uint8ClampedArray objeto representan, usted puede pedir. Aquí está la descripción de MDN:
El Uint8ClampedArray matriz tipada representa una matriz de enteros sin signo de 8 bits sujetos a 0-255; si especificó un valor que está fuera del rango de [0,255], se establecerá 0 o 255 en su lugar; si especifica un valor no entero, se establecerá el entero más cercano. Los contenidos se inicializan a 0. Una vez establecido, puede hacer referencia a elementos en la matriz usando los métodos del objeto o usando la sintaxis de índice de matriz estándar (es decir, usando la notación de corchetes)
En resumen, esta matriz almacena valores que van de 0 a 255 en cada posición, lo que la convierte en la solución perfecta para el formato RGBA, ya que cada parte está representada por valores de 0 a 255.
colores RGBA
Los colores se pueden representar en formato RGBA, que es una combinación de rojo, verde y azul. El A representa el valor alfa que es la opacidad del color.
Cada posición en la matriz representa un valor de canal de color (píxel).
- La primera posición es el valor rojo
- La segunda posición es el valor verde
- La tercera posición es el valor azul
- La cuarta posición es el valor Alfa
- La quinta posición es el siguiente valor de píxel rojo
- La sexta posición es el siguiente valor de píxel verde
- La séptima posición es el siguiente valor de píxel azul
- La octava posición es el siguiente valor alfa de píxel
- Y así…
Si tiene una imagen de 2 × 2, entonces tenemos una matriz de 16 posiciones (valor de 2 × 2 píxeles × 4 cada uno).
La imagen 2×2 ampliada de cerca
La matriz se representará como se muestra a continuación:
// RED GREEN BLUE WHITE
[ 255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255, 255, 255, 255, 255]Cambiar los datos de píxeles
Una de las cosas más rápidas que podemos hacer es establecer todos los píxeles en blanco cambiando todos los valores RGBA a 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);
}El data se pasará como referencia, lo que significa que cualquier modificación que le hagamos cambiará el valor del argumento pasado.
Invertir colores
Un buen efecto que no requiere mucho cálculo es invertir los colores de una imagen.
La inversión de un valor de color se puede hacer usando el operador XOR (^) o esta fórmula 255 - value (el valor debe estar entre 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);
}Estamos incrementando el ciclo en 4 en lugar de 1 como lo hicimos antes, por lo que podemos de píxel a píxel que cada uno llene 4 elementos en la matriz.
El valor alfa no tiene efecto en la inversión de colores, por lo que lo omitimos.
Brillo y contraste
El ajuste del brillo de una imagen se puede hacer usando la siguiente fórmula: newValue = currentValue + 255 * (brightness / 100).
brightnessdebe estar entre -100 y 100currentValuees el valor de luz actual de rojo, verde o azul.newValuees el resultado de la luz de color actual másbrightness
El ajuste del contraste de una imagen se puede hacer con esta fórmula:
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)El cálculo principal es obtener el factor de contraste que se aplicará a cada valor de color. Truncate es una función que asegura que el valor permanezca entre 0 y 255.
Escribamos estas funciones en 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);
}
}En este caso no necesita el truncateColor funcionan como Uint8ClampedArray truncará estos valores, pero por el bien de traducir el algoritmo, lo agregamos.
Una cosa a tener en cuenta es que, si aplica brillo o contraste, no hay forma de volver al estado anterior ya que los datos de la imagen se sobrescriben. Los datos de la imagen original deben almacenarse por separado como referencia si queremos restablecer el estado original. Será útil mantener la variable de imagen accesible para otras funciones, ya que puede usar esa imagen para volver a dibujar el lienzo con la imagen original.
var image = document.getElementById('SourceImage');
function redrawImage() {
context.drawImage(image, 0, 0);
}usando videos
Para que funcione con videos, vamos a tomar nuestro script de imagen inicial y código HTML y realizar algunos pequeños cambios.
HTML
Cambie el elemento Imagen con un elemento de video reemplazando esta línea:
<img id="SourceImage" src="https://css-tricks.com/manipulating-pixels-using-canvas/image.jpg">…con este:
<video id="SourceVideo" src="https://css-tricks.com/manipulating-pixels-using-canvas/video.mp4" width="300" height="150"></video>JavaScript
Reemplace esta línea:
var image = document.getElementById('SourceImage');…con este:
var video = document.getElementById('SourceVideo');Para comenzar a trabajar con el video, tenemos que esperar hasta que se pueda reproducir el video.
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);
});El evento canplay se activa cuando hay suficientes datos disponibles para que los medios se puedan reproducir, al menos durante un par de fotogramas.
No podemos ver ninguno de los videos que se muestran en el lienzo porque solo estamos mostrando el primer cuadro. debemos ejecutar drawFrame cada n milisegundos para mantenerse al día con la tasa de cuadros de video.
Dentro drawFrame nosotros llamamos drawFrame de nuevo cada 10 ms.
function drawFrame(video) {
context.drawImage(video, 0, 0);
setTimeout(function () {
drawFrame(video);
}, 10);
}Después de ejecutar drawFrame, creamos un bucle ejecutando drawFrame cada 10 ms: tiempo suficiente para mantener el video sincronizado en el lienzo.
Agregar el efecto al video
Podemos usar la misma función que creamos antes para invertir colores:
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
}
}Y añádelo a la drawFrame función:
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);
}Podemos agregar un botón y alternar los efectos:
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);
}usando la cámara
Vamos a mantener el mismo código que usamos para el video con la única diferencia de que vamos a cambiar la transmisión de video de un archivo a la transmisión de la cámara usando MediaDevices.getUserMedia
Dispositivos multimedia.getUserMedia es la nueva API, en desuso de la API anterior Navegador.getUserMedia. Todavía hay soporte de navegador para la versión anterior y algunos navegadores no son compatibles con la nueva versión y tenemos que recurrir a polyfill para asegurarnos de que el navegador sea compatible con uno de ellos.
Primero, quite el src atributo del elemento de video:
<video id="SourceVideo" width="300" height="150"></video>// Set the source of the video to the camera stream
function initCamera(stream) {
video.srcObject = stream;
}
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({video: true, audio: false})
.then(initCamera)
.catch(console.error)
);
}Demo en vivo
Efectos
Todo lo que hemos cubierto hasta ahora es la base que necesitamos para crear diferentes efectos en un video o una imagen. Hay un montón de efectos diferentes que podemos usar transformando cada color de forma independiente.
escala de grises
La conversión de un color a una escala de grises se puede hacer de diferentes maneras utilizando diferentes fórmulas/técnicas, para evitar profundizar demasiado en el tema, le mostraré cinco de las fórmulas basadas en la herramienta de desaturación de GIMP y 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 standardLo que queremos encontrar usando estas fórmulas es el nivel de intensidad de brillo de cada color de píxel. El valor oscilará entre 0 (negro) y 255 (blanco). Estos valores crearán un efecto de escala de grises (blanco y negro).
Esto significa que el color más brillante será el más cercano a 255 y el color más oscuro será el más cercano a 0.
Demo en vivo
Duotonos
La diferencia entre el efecto de duotono y el efecto de escala de grises son los dos colores que se utilizan. En escala de grises, tiene un degradado de negro a blanco, mientras que en duotono puede tener un degradado de cualquier color a cualquier otro color, azul a rosa como ejemplo.
Usando el valor de intensidad de la escala de grises, podemos reemplazar esto de los valores de gradiente.
Necesitamos crear un gradiente de ColorA a 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
}
}En resumen, estamos creando una matriz de valores de color desde el Color A, disminuyendo la intensidad mientras vamos al Color B y aumentando su intensidad.
Desde #0096ff a #ff00f0
Representación ampliada de la transición de color
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},
];Arriba hay un ejemplo de un degradado de 10 valores de colores de #0096ff a #ff00f0.
Representación en escala de grises de la transición de color.
Ahora que tenemos la representación en escala de grises de la imagen, podemos usarla para asignarla a los valores de gradiente de duotono.
El degradado de duotono tiene 256 colores, mientras que la escala de grises también tiene 256 colores que van desde el negro (0) hasta el blanco (255). Eso significa que un valor de color en escala de grises se asignará a un índice de elemento degradado.
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;
}Demo en vivo
Conclusión
Este tema puede profundizar más o explicar más efectos. La tarea para usted es encontrar diferentes algoritmos que pueda aplicar a estos ejemplos de esqueleto.
Saber cómo se estructuran los píxeles en un lienzo le permitirá crear una cantidad ilimitada de efectos, como sepia, combinación de colores, un efecto de pantalla verde, parpadeo/fallo de la imagen, etc.
Incluso puede crear efectos sobre la marcha sin usar una imagen o un video: