Código de muestra para Canvas y compresión de imágenes

He escrito un artículo sobre el procesamiento de imágenes de Canvas. Hoy hablaremos sobre cómo usar Canvas para comprimir imágenes.

A continuación, explicaré el proceso específico de compresión de imágenes de Canvas con ejemplos específicos.

1. Obtener archivos locales

 <!--HTML--><tipo de entrada=id de archivo=elegir-img />

 // JSvar elegirImg = document.getElementById(choose-img); elegirImg.onchange = function(e){ var file = this.files[0] // ... (Parte del código se omite y se mostrará en secuencia, la misma a continuación)};

Es muy simple, simplemente obtenga el archivo local a través del botón tipo archivo.

 <!--HTML--><div id=resultado></div>

 // JSvar result = document.getElementById(result); // Se utiliza para mostrar resultados de salida de imágenes o mensajes de error if(/image/.test(file.type)){ // Determinar si el tipo de archivo es una imagen // ... }else{ result.innerHTML = '<span style=color: red;>¡Tipo de archivo incorrecto! </span>';}

 var img = new Image(), // Crea un objeto de imagen para colocar la imagen original lector = new FileReader();reader.readAsDataURL(file); Leer en formato base64 y almacenarlo en el atributo de resultado del objeto FileReader; lector .onload = function(){ img.src = this.resultado; Asigne directamente la cadena de imagen base64 a document.body.insertBefore(img,chooseImg) en el src del objeto Imagen; // Inserte la imagen de salida antes del botón de archivo img.onload = function(){ // ... }; };

 var lienzo = document.createElement('canvas');canvas.width = img.clientWidth;canvas.height = img.clientHeight;var contexto = canvas.getContext('2d');

Nota: El tamaño del lienzo es el mismo que el ancho y el alto de la imagen de entrada.

 contexto.drawImage(img,0,0,canvas.width,canvas.height);

 <!--HTML-->Relación de compresión de imagen: <id de entrada=tipo de velocidad=número min=0 max=100 /> %

 // JSvar rate = document.getElementById(rate).value || 100; // Ingrese la relación de compresión de la imagen, el valor predeterminado es 100% var imgUrl = canvas.toDataURL(file.type,rate/100); El parámetro es el tipo de imagen de salida y el segundo es la relación de compresión result.innerHTML = 'Después de la compresión: <img src='+ imgUrl +' />'; Mostrar la imagen comprimida en el resultado img.style.display = 'none' // Ocultar la imagen original

Imprima nuevamente la imagen dibujada en el lienzo en formato base64.

 <!--HTML-->Relación de compresión de imagen: <input id=rate type=number min=0 max=100 /> %<input type=file id=choose-img /><div id=resultado></div >

 // JSvar elegirImg = document.getElementById(elegir-img), resultado = document.getElementById(resultado); elegirImg.onchange = función(e){ var archivo = this.files[0]; file.type)){ var img = nueva Imagen(), lector = nuevo FileReader(); lector.readAsDataURL(archivo lector.onload); function(){ img.src = this.result; document.body.insertBefore(img,chooseImg); img.onload = function(){ var lienzo = document.createElement('canvas'); ; lienzo.altura = img.clientHeight; var contexto = lienzo.getContext('2d'); context.drawImage(img,0,0,canvas.width,canvas.height); var rate = document.getElementById(rate).value || var imgUrl = canvas.toDataURL(file.type,rate/100); result.innerHTML = 'Después de la compresión: <img src='+ imgUrl +' />'; img.style.display = 'none'; } }; } else{ result.innerHTML = '<span style=color: red;>¡Tipo de archivo incorrecto! </span>'; }};

Después de las pruebas, se descubrió que el efecto de compresión de imágenes en formato JPEG es mejor a través de Canvas, mientras que el efecto de compresión PNG no es obvio y, a veces, se vuelve más grande.

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.