Código de muestra para html5 usando lienzo para comprimir imágenes

Hace dos días, hice una función para convertir imágenes a base64 para cargarlas. Descubrí que si la base64 de la imagen es demasiado grande, la solicitud se volverá muy lenta y el tiempo de espera será muy alto, así que pensé en comprimir la imagen. antes de cargarlo y luego cargarlo en segundo plano, lo que puede mejorar en gran medida la eficiencia. Aquí se presentan algunos errores que se encuentran al usar lienzo para comprimir imágenes. El código completo se proporcionará al final del artículo.

El primer error es que al comprimir la imagen, no se obtienen el ancho y el alto de la imagen en sí, y se proporciona un ancho y alto fijos de 600 * 480 porque está en el teléfono móvil, al cargar la imagen. Tiene un tamaño de varios megabytes, por lo que no hay problema. El problema ocurrió al modificar el avatar. Las imágenes cargadas durante la prueba eran todas pequeñas, y luego las imágenes comprimidas no se mostraban por completo y la mayoría estaban en blanco porque no se consideraron durante la compresión. y altura de la imagen.

El segundo error. La forma de resolver el primer error es obtener el ancho y el alto de la imagen después de cargarla (cargarla) y luego asignarla al lienzo. Sin embargo, esta operación se realiza de esta manera. El problema es que la carga de la imagen es asincrónica, cuando regresa, lo que se devuelve puede no estar definido en lugar del base64 comprimido que necesita. La solución aquí es crear una nueva Promesa, luego devolver el resultado resolve() y obtener el resultado al llamar a .then().

• canvas's toDataURL('image/png', 0.9); Convierte la imagen dibujada por canvas a base64. El primer parámetro representa el tipo de imagen y el segundo parámetro representa la claridad de la imagen.
• Especifique un tamaño máximo. Si el ancho y el alto de la imagen en sí son mayores que este tamaño, se escalará el lado más grande y el otro lado se establecerá de acuerdo con la proporción de la imagen y luego se establecerá en el lienzo.

miniImagen.js

 exportar la función asíncrona predeterminada miniSize(imgData, maxSize = 200*1024){ // const maxSize = 200 * 1024; if(imgData && imgData.files && imgData.files.size < maxSize) { return imgData.url }else{ console; .log('----------------Imagen comprimida------------------'); const canvas = document.createElement('canvas'); let img = new Image(); img.src = imgData.url; let ctx = canvas.getContext('2d'); return new Promise((resolve =>{ img.addEventListener( 'load', function(){ // Tamaño original de la imagen let originWidth = this.width; let originHeight = this.height // Límite de tamaño máximo let maxWidth = 400, maxHeight = 400; // Tamaño objetivo let targetWidth = originWidth, targetHeight = originHeight; // El tamaño de la imagen excede el límite de 400x400 if (originWidth > maxWidth || originHeight > maxHeight) { if (originWidth / originHeight > maxWidth / maxHeight) { // Más ancho, límite de tamaño según el ancho targetWidth = maxWidth targetHeight; = Math.round(maxWidth * (originHeight / originWidth)); } else { targetHeight = maxHeight; targetWidth = Math.round(maxHeight * (originWidth / originHeight)); ctx.drawImage(img, 0, 0, targetWidth, targetHeight let base64 =); canvas.toDataURL('imagen/png', 0.9); resolver(base64 }, falso })) }}

Llamar:

prueba.js

 onChangeImg = async (archivos, tipo, índice) => { let anterior = this.props.imagePicker.files; if(type === add) { let result = miniSize(files[files.length-1]); Utilice .then() para llamar await result.then(res => { anterior.push({url: res}); }); else if(type === remove) { anterior.splice(index,1); } await this.props.dispatch({ tipo: 'imagePicker/saveImage', carga útil: { archivos: anterior } }) }

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.