Canvas es realmente algo mágico. No solo puede dibujar varios gráficos, texto y mapas de bits, sino también realizar operaciones y procesamiento de píxeles complejos en mapas de bits. Por lo tanto, cosas como filtros se pueden implementar usando Canvas. A continuación, es hora de presenciar un milagro.
Primero, necesitamos tener un contenedor Canvas, por ejemplo:
<canvas id=myCanvas ancho=800 alto=800></canvas>
A continuación, necesitamos usar Canvas para hacer un dibujo:
var myCanvas = document.getElementById(myCanvas);var ctx = myCanvas.getContext(2d);var img = new Image();img.src = ./images/1526010092000.jpg;// Prepare su propio enlace de imagen img.onload = (e) => {ctx.drawImage(img, 0, 0, 800, 800);// El primer 800 representa el ancho de la imagen dibujada y el segundo 800 representa la altura de la imagen dibujada}El efecto del primer dibujo de Canvas.
El siguiente paso es realizar algunas operaciones en los píxeles de la imagen. Para implementar dicha operación, primero debe obtener la información de píxeles de la imagen de Canvas, y puede obtener esta información a través de getImageData() .
// ... Omitir el código anterior img.onload = (e) => {// ... Omitir el código anterior img = ctx.getImageData(0, 0, 800, 800); // Obtener el color de cada uno; datos de bytes de píxeles}Dado que el tamaño de la imagen es 800 * 800, es necesario recorrer los píxeles para obtener los valores rojo, verde y azul de cada píxel. por lo tanto:
// ... Omitir el código anterior img.onload = (e) => {// ... Omitir el código anterior var pixelLen = 800 * 800 // Obtener el número de píxeles for(var i = 0; i < pixelLen * 4; i += 4) { var redC = img.data[i], // La primera unidad de byte representa rojo greenC = img.data[i + 1], // La segunda unidad de byte representa verde blueC = img.data[i + 2], // La unidad del tercer byte representa alfa azul = img.data[i + 3] // La unidad del cuarto byte representa la transparencia}}A través del bucle anterior, obtenemos el valor de color específico de cada píxel contenido en los datos de la imagen; una cosa a tener en cuenta es que los datos de cada píxel no son un bit, sino cuatro bits adyacentes, que representan respectivamente el rojo, el verde y el rojo. azul y valores de transparencia del punto. Por lo tanto, de hecho, la longitud de la matriz de datos de bytes de mapa de bits es igual al número de píxeles multiplicado por 4. En el bucle for, también tratamos esta característica en consecuencia.
Al promediar los valores rojo, verde y azul de cada punto y luego asignar el valor promedio generado a los valores rojo, verde y azul del píxel, se puede formar un efecto de escala de grises. Finalmente, putImageData() El método se utiliza para volver a simplemente dibujar la imagen, el código es el siguiente:
// ... Omitir el código anterior img.onload = (e) => { // ... Omitir el código anterior for(var i = 0; i < pixelLen * 4; i += 4) { // . .. Omitir el código anterior var gray = parseInt((redC + greenC + blueC) / 3); // Obtener el valor de gris después de promediar img.data[i] = gray; + 1] = gris; // Cambia el valor verde img.data[i + 2] = gris; // Cambia el valor azul} ctx.putImageData(img, 0, 0, 800, 800);En este momento, se formará un efecto de escala de grises, como se muestra a continuación.
El lienzo dibuja la imagen por segunda vez - efecto de escala de grises
Para controlar la transparencia, solo necesita modificar el valor correspondiente a la unidad del cuarto byte. El rango de valores es 0 ~ 256, 0 representa transparencia completa y 256 representa opacidad completa. Por ejemplo:
// ... Omitir el código anterior img.onload = (e) => { // ... Omitir el código anterior for(var i = 0; i < pixelLen * 4; i += 4) { // . .. Omitir el código anterior img.data[i + 3] = 128; // Transparencia 50% } // ... Omitir el código anterior }Efecto del tercer dibujo del lienzo: aumentar la transparencia.
A partir de esto, controlando el valor de 4 datos para cada píxel de la imagen, se puede lograr el efecto del filtro. ¿No es tan fácil?
Referencias:
"Conocimientos básicos de HTML5, tecnologías centrales y casos de vanguardia" editado por Liu Huan
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.