Enseñarle cómo usar Canvas para procesar imágenes.

Canvas, traducido como lienzo en chino, tiene un nuevo elemento <canvas> en HTML5, que se puede combinar con JavaScript para dibujar gráficos dinámicamente en el lienzo.

Hoy no hablaremos de dibujar gráficos en Canvas, sino de cómo procesar imágenes.

El proceso probablemente sea muy sencillo y se divide principalmente en los siguientes tres pasos:

Sí, tan fácil como meter un elefante en el frigorífico, jaja.

Las principales API de Canvas utilizadas en todo el proceso son:

1. Dibujar una imagen: drawImage()
2. Obtener datos de imagen: getImageData()
3. Reescribir datos de imagen: putImageData()
4. Exportar imagen: toDataURL()

Como sugiere el nombre, este método se utiliza para dibujar imágenes en el lienzo de Canvas. Hay tres usos específicos:

① Coloque la imagen en el lienzo: context.drawImage(img,x,y)

② Coloque la imagen en el lienzo y especifique el ancho y el alto de la imagen: context.drawImage(img,x,y,width,height)

③ Corte la imagen y coloque la parte cortada en el lienzo: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

Los valores de los parámetros anteriores se describen en la siguiente tabla:

Este método se utiliza para obtener datos de imagen del lienzo de Canvas. El uso específico es el siguiente:

Obtenga los datos de píxeles dentro del rango rectangular especificado del lienzo: var ImageData = context.getImageData(x,y,width,height)

Los valores de los parámetros anteriores se describen en la siguiente tabla:

Este método devolverá un objeto ImageData, que tiene tres propiedades: ancho, alto y datos. La matriz de datos que utilizamos principalmente es esta, porque guarda los datos de cada píxel de la imagen. Después de tener estos datos, podemos procesarlos y finalmente reescribirlos en el lienzo de Canvas, realizando así el procesamiento y conversión de las imágenes. Para el uso específico de la matriz de datos, podemos verlo en los siguientes ejemplos.

Este método es muy simple y se utiliza para reescribir datos de imágenes en el lienzo de Canvas. El uso específico es el siguiente:

 contexto.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

Los valores de los parámetros anteriores se describen en la siguiente tabla:

Este método es diferente de los tres métodos anteriores. Es un método del objeto Canvas. Este método devuelve una cadena que contiene el URI de datos. Esta cadena se puede usar directamente como la dirección de ruta de la imagen para completar el atributo src de <img. > etiqueta. Específicamente, el uso es el siguiente:

 var dataURL = canvas.toDataURL(tipo, encoderOptions);

Los valores de los parámetros anteriores se describen en la siguiente tabla:

Este ejemplo presentará brevemente cómo procesar imágenes en color en imágenes en blanco y negro mediante código.

 <!--HTML--><canvas id=ancho del lienzo=600 altura=600></canvas><input id=tipo de mango=valor del botón=procesar imágenes/><id de entrada=crear tipo=valor del botón=generar imágenes /><div id=resultado></div>

 //JavaScriptwindow.onload = function(){ var canvas = document.getElementById(canvas), //Obtener el objeto de lienzo de Canvas context = canvas.getContext('2d'); //Obtener el objeto de contexto 2D, la mayoría de las API de Canvas son Este método de objeto var image = new Image(); //Definir un objeto de imagen image.src = 'imgs/img.jpg'; image.onload = function(){ //¡Debes prestar atención aquí! Todas las operaciones posteriores deben realizarse después de que la imagen se haya cargado correctamente; de ​​lo contrario, la imagen se procesará como no válida context.drawImage(image,0,0); // Comience a dibujar la imagen desde la esquina superior izquierda (0,0) del lienzo. canvas. El tamaño predeterminado es el tamaño real de la imagen var handle = document.getElementById(handle); var create = document.getElementById(create handle.onclick = function(){ // Haga clic en el botón de procesamiento de imágenes para procesar la imagen. var imgData = context.getImageData(0,0,canvas.width,canvas.height); //Obtiene el objeto de datos de la imagen var data = imgData.data; //Obtiene la matriz de datos de la imagen. Representa valores de rojo, verde, azul y transparencia respectivamente var promedio = 0 for (var i = 0; i < data.length; i+=4) { promedio =; Math.floor((data[i]+data[i+1]+data[i+2])/3 // Promedia los valores rojo, verde y azul para obtener los datos del valor en escala de grises[i]; = datos[i+1] = datos[i+2] = promedio; Reescribe el valor de color de cada píxel} imgData.data = context.putImageData(imgData,0,0); // Vuelva a escribir los datos de la imagen procesada en el lienzo de Canvas y la imagen en el lienzo se volverá en blanco y negro}; create.onclick = function(){ // Haga clic en el botón Generar imagen para exportar la imagen var imgSrc = canvas.toDataURL( ); //Obtener la URL de datos de la imagen var newImg = new Image(); var result = document.getElementById(result); newImg.src = imgSrc; resultado.innerHTML = ''; resultado.appendChild(newImg };

Quizás el código anterior no esté muy bien escrito y no parezca tan fácil de entender. Es mejor que lo escriba usted mismo para que pueda comprenderlo más profundamente.

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.