Código de implementación de filtros y aprendizaje de Canvas

En esta era de proliferación de productos digitales, tomar fotografías se ha convertido en una parte indispensable de la vida, ya sea que esté en casa, de excursión o viajando lejos, siempre tomará algunas fotografías hermosas. Pero las fotografías tomadas directamente por la cámara suelen tener una cierta brecha entre ellas y nuestras expectativas psicológicas. Entonces, ¿cómo reducir esta brecha? La respuesta son las imágenes P de belleza, por lo que están apareciendo todo tipo de cámaras de belleza y las imágenes P se han convertido en una habilidad portátil.

De hecho, la llamada belleza es solo el uso de muchos filtros, y los filtros utilizan ciertos algoritmos para manipular los píxeles de la imagen para obtener algunos efectos de imagen especiales. Los amigos que han usado Photoshop saben que hay muchos filtros en PS. A continuación usaremos la tecnología js canvas para lograr varios efectos de filtro.

Recientemente aprendí lo más destacado de HTML5- canvas . Usando Canvas, el personal de front-end puede realizar fácilmente el procesamiento de imágenes. Hay muchas API. Esta vez aprenderé principalmente las API más utilizadas y completaré los dos códigos siguientes:

• Implementar filtro de decoloración.
• Implementar filtro de color negativo (color inverso)

Este elemento HTML está diseñado para gráficos vectoriales del lado del cliente. No tiene ningún comportamiento propio, pero expone una API de dibujo al JavaScript del cliente para que el script pueda dibujar lo que quiera en un lienzo.

Una diferencia importante entre <canvas> y SVG y VML es que <canvas> tiene una API de dibujo basada en JavaScript, mientras que SVG y VML usan un documento XML para describir el dibujo.

La mayor parte de la API de dibujo de Canvas no está definida en el elemento <canvas> en sí, sino en un objeto del entorno de dibujo obtenido a través del método getContext() del lienzo. El ancho y alto predeterminados del elemento <canvas> son 300 px y 150 px respectivamente.

 // Procesa el elemento del lienzo var c = document.querySelector(#my-canvas);c.width = 150;c.height = 70 // Obtiene el objeto de contexto en la etiqueta del lienzo especificada var ctx = c.getContext(2d ); ctx.fillStyle = #FF0000; // Color ctx.fillRect(0, 0, 150, 75);

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.moveTo(0, 0); //Coordenada inicial ctx.lineTo(200, 100); .stroke(); // Dibujar inmediatamente

Para ctx.arc() , los cinco parámetros son: (x,y,r,start,stop) . Entre ellos, xey son las coordenadas del centro del círculo y r es el radio.

Las unidades de start y stop son radianes . Ni longitud, ni grados.

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.beginPath();ctx.arc(95, 50, 40, 0, 2 * Math.PI);ctx. ataque();

 var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.font = 30px Arial;ctx.fillText(Hola mundo, 10, 50);

En cuanto a las API de procesamiento de imágenes, existen principalmente cuatro:

Dibujar una imagen: drawImage(img,x,y,width,height) o drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

Obtener datos de imagen: getImageData(x,y,width,height)

Reescribir datos de imagen: putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

Exportar imagen: toDataURL([type, encoderOptions])

Para obtener descripciones más detalladas de la API y los parámetros, consulte: Explicación de los parámetros de la API de procesamiento de imágenes de Canvas

Según estas API, podemos dibujar nuestras imágenes en el elemento canvas . Supongamos que nuestra imagen es ./img/photo.jpg .

 <script> window.onload = function () { var img = new Image() // Declarar un nuevo objeto de imagen img.src = ./img/photo.jpg // Después de cargar la imagen img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); // Según el tamaño de la imagen, especifique el tamaño del lienzo canvas.width = img.width canvas.height = img.height // Dibuja la imagen ctx.drawImage(img, 0, 0, canvas.width, canvas.height) } }</script>

Como se muestra en la siguiente figura, la imagen está dibujada en el lienzo:

Aquí tomamos prestada principalmente la función getImageData , que devuelve el valor RGBA de cada píxel. Con la ayuda de fórmulas de procesamiento de imágenes, puede manipular píxeles para realizar las operaciones matemáticas correspondientes.

El efecto de eliminación de color es equivalente a las fotografías en blanco y negro tomadas con cámaras antiguas. Basándose en la sensibilidad del ojo humano, la gente ha dado la siguiente fórmula:

gray = red * 0.3 + green * 0.59 + blue * 0.11

El código es el siguiente:

 <script> ventana.onload = función () { var img = nueva imagen() img.src = ./img/photo.jpg img.onload = función () { var lienzo = document.querySelector(#mi-lienzo); var ctx = lienzo.getContext(2d); lienzo.ancho = img.ancho lienzo.alto = img.alto ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // Iniciar procesamiento de filtro var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); for (var i = 0; i < imgData.data ). longitud / 4; ++i) { var rojo = imgData.data[i * 4], verde = imgData.data[i * 4 + 1], azul = imgData.data[i * 4 + 2]; var grey = 0.3 * red + 0.59 * green + 0.11 * blue; // Calcular gris // Actualizar RGB, nota: // imgData.data[i * 4 + 3] almacenado es alfa, no es necesario cambiar imgData.data[i * 4] = grey; imgData.data[i * 4 + 1] = imgData.data[i * 4 + 2] = gris; } ctx.putImageData(imgData, 0, 0 // Reescribir datos de imagen} }</script>);

El efecto es como se muestra a continuación:

4.2 Efecto de color negativo

El efecto de color negativo consiste en restar el valor actual del valor máximo. El valor numérico máximo teórico en RGB obtenido por getImageData es: 255. Entonces, la fórmula es la siguiente:

new_val = 255 - val

El código es el siguiente:

 <script> ventana.onload = función () { var img = nueva imagen() img.src = ./img/photo.jpg img.onload = función () { var lienzo = document.querySelector(#mi-lienzo); var ctx = lienzo.getContext(2d); lienzo.ancho = img.ancho lienzo.alto = img.alto ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // Iniciar procesamiento de filtro var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); for (var i = 0; i < imgData.data ). longitud / 4; ++i) { var rojo = imgData.data[i * 4], verde = imgData.data[i * 4 + 1], azul = imgData.data[i * 4 + 2]; // Actualizar RGB, nota: // imgData.data[i * 4 + 3] almacena alfa, no es necesario cambiar imgData.data[i * 4] = 255 - imgData . datos[i * 4]; imgData.data[i * 4 + 1] = 255 - imgData.data[i * 4 + 1]; * 4 + 2] = 255 - imgData.data[i * 4 + 2]; } ctx.putImageData(imgData, 0, 0); // Reescribir datos de imagen} }</script>

Las representaciones son las siguientes:

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.