Cómo implementar el método de compresión en JS

Este artículo presenta principalmente los métodos de compresión de imágenes en JS, incluidos los métodos de compresión de imágenes de proporciones iguales. Los amigos que lo necesiten pueden consultarlo. Espero que sea útil para todos.

La mayoría de las veces, necesitamos comprimir un objeto de archivo y luego transferirlo a un servidor de imágenes remoto. A veces también necesitamos comprimir la cadena base64 y luego transferirla a la base de datos remota. A veces puede ser un lienzo, un objeto de imagen o directamente la dirección URL de la imagen. Necesitamos comprimirlos y cargarlos en una ubicación remota, ante tantos requisitos, simplemente hice un dibujo:

Texto alternativo

Segundo, solución

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

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

2. imagetoCanvas(image) convertirá un objeto Imagen en un objeto tipo Canvas, en el que el parámetro Imagen se pasa a un objeto Imagen. El código es el siguiente:

2. p>

3 .Canvas Resizetofile (lienzo, calidad, fn) comprimirá un objeto de lienzo en un objeto Blob; el parámetro de lienzo se pasa al objeto de lienzo en un tipo numérico de 0-1; indica la calidad de la compresión de la imagen; Fn es un método de devolución de llamada que contiene los parámetros de un objeto Blob; el código es el siguiente:

El objeto Blob aquí representa datos sin procesar inmutables, similar a un objeto de archivo. Los blobs representan datos que no son necesariamente una forma nativa de JavaScript. La interfaz de archivos se basa en Blob, hereda la funcionalidad de Blob y la extiende para admitir archivos en el sistema del usuario. Podemos tratarlo como un tipo de archivo y otros usos más específicos pueden consultar la documentación de MDN.

4.canvas Resizeta Taurl (Canvas, calidad) comprimirá un objeto Canvas en una cadena dataURL, en la que el parámetro Canvas se pasa en un objeto Canvas y el parámetro de calidad se pasa en un tipo numérico de 0; -1, que indica la calidad de la compresión de la imagen; el código es el siguiente:

La API toDataURL puede hacer referencia a la documentación de MDN.

5.filetotaurl(file, fn) convertirá un tipo de archivo (Blob) en una cadena DataURL, donde el parámetro File se pasa en un archivo de tipo File (Blob) como un método de devolución de llamada; Parámetros de cadena dataURL; el código es el siguiente:

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

7.dataurltoFile(dataURL) convierte una cadena de cadenas dataURL en un objeto tipo Blob, en el cual el parámetro dataURL se pasa en una cadena dataURL, el código es el siguiente:

No. En tercer lugar, empaquetado adicional

Para el método común de comprimir un objeto de archivo y luego convertirlo en un objeto de archivo, podemos encapsular el método anterior nuevamente y consultar el siguiente código. :

donde, el parámetro de archivo se pasa en un archivo de tipo Archivo (Blob); el parámetro de calidad se pasa en un tipo numérico de 0-1, lo que indica que la calidad de compresión de la imagen es un método de devolución de llamada; contiene parámetros de un archivo tipo Blob.

Así es como funciona:

Esto facilita la compresión y carga de imágenes. Empaqué los ocho métodos anteriores y los puse en github. Puedes hacer tu mejor esfuerzo para protagonizar si quieres.

Archivo de referencia:

MDN

Ps: echemos un vistazo a cómo JS comprime imágenes.