Cómo implementar la compresión de imágenes JS

Este artículo presenta principalmente el método de compresión de imágenes JS, incluido el método de compresión isométrica de imágenes. Espero que sea útil para todos.

La mayoría de las veces necesitamos comprimir un objeto Archivo y luego convertirlo en un objeto Archivo y cargarlo en el servidor de imágenes remoto. A veces también necesitamos comprimir una cadena base64 y luego convertirla; en una cadena base64 para cargar en la base de datos remota; a veces, después de la compresión, puede ser un lienzo, un objeto de imagen o directamente la dirección URL de una imagen. Tantas demandas, también podríamos dibujar una imagen:

Texto alternativo

2 Solución

Como se muestra en la imagen de arriba, Wang Er escribió 7. métodos, que básicamente cubren la mayoría de los tipos de archivos en conversión y compresión JS, entre los cuales:

1 urltoImage (url, fn) cargará el objeto de imagen requerido a través de una URL, donde el parámetro URL pasa la URL de la imagen, y fn. es el método de devolución de llamada, que incluye los parámetros de un objeto Imagen, el código es el siguiente:

2. imagetoCanvas(image) convierte un objeto Imagen en un objeto tipo Canvas, donde el parámetro imagen pasa un objeto Imagen. , el código es el siguiente:

3.canvasResizetoFile(canvas, calidad, fn) convierte el objeto Canvas en un objeto de tipo Blob y pasa el parámetro canvas al objeto Canvas; un tipo numérico de 0-1, que indica la calidad de compresión de la imagen; fn es el método de devolución de llamada, que contiene un parámetro de objeto Blob. El código es el siguiente:

El objeto Blob aquí representa un objeto similar a un archivo inmutable; de los datos originales. Los blobs representan datos que no son necesariamente nativos de JavaScript. La interfaz de Archivo se basa en Blob, que hereda la funcionalidad de Blob y la extiende para admitir archivos en el sistema del usuario. Podemos pensar en ello como un tipo de archivo. Para un uso más específico, consulte la documentación de MDN

4.canvasResizetoDataURL(canvas, calidad) comprime y convierte el objeto Canvas en una cadena dataURL, donde el parámetro canvas se pasa como un objeto Canvas; El parámetro de calidad se pasa cuando dataURL se pasa como una cadena; el parámetro de calidad pasa un número de 0 a 1, lo que indica la calidad de compresión de la imagen; el código es el siguiente:

Para la API toDataURL; consulte la documentación de MDN

5.filetoDataURL(archivo, calidad) lo comprime y lo convierte en una cadena de dataURL, donde el parámetro canvas se pasa como un objeto Canvas; cadena de URL de datos. filetoDataURL (archivo, fn) convierte un archivo de tipo archivo (Blob) en una cadena de datos URL, donde el parámetro de archivo se pasa como un archivo de tipo archivo (Blob) fn es el método de devolución de llamada, que contiene el parámetro de cadena de datos URL; de la siguiente manera:

6.dataURLtoImage(dataurl, fn) Convierte la cadena dataURL en un archivo de tipo imagen, donde el parámetro dataurl se pasa al archivo de tipo imagen, donde el parámetro dataurl se pasa al tipo de imagen archivo.

dataURL(dataurl, fn) convertirá la cadena dataURL en un archivo de tipo imagen, donde el parámetro dataurl pasa la cadena dataURL y fn es un método de devolución de llamada que contiene parámetros de tipo imagen. El código es el siguiente:

; 7. dataURLtoFile(dataurl) convertirá la cadena dataURL en un Blob, donde el parámetro dataurl pasa la cadena dataURL y el código es el siguiente:

8. El código es el siguiente:

3. Encapsulación adicional

Para el método comúnmente utilizado de comprimir un objeto Archivo y luego convertirlo en un objeto Archivo, podemos encapsular el método anterior, por favor consulte el siguiente código:

El parámetro de archivo Lo que se pasa es un archivo de tipo Archivo (Blob); al parámetro de calidad se le pasa un número de 0 a 1, lo que indica la calidad de compresión de la imagen; un método de devolución de llamada que contiene un parámetro de archivo de tipo Blob.

Así es como funciona:

De esta manera, la compresión y carga de imágenes se pueden completar fácilmente. He encapsulado los 8 métodos anteriores y los he puesto en github, si lo desea. puede promoverse vigorosamente.

Materiales de referencia:

MDN

ps: echemos un vistazo a la compresión isométrica de imágenes de JS