Código de muestra para compresión de imágenes usando lienzo

Autor：Eve Cole Fecha de actualización：2025-02-01 10:36:02

Al realizar el reconocimiento de tarjetas de identificación en el proyecto, es necesario transmitir la codificación de la imagen en formato base64, pero las fotos tomadas con el teléfono móvil son demasiado grandes y convertirlas a base64 es simplemente terrible, así que encontré una solución.

Puntos de conocimiento involucrados

El evento onchange se activa después de cargar el archivo.
Utilice el atributo de archivos para obtener el objeto de archivo cargado
readAsDataURL se utiliza para convertir a codificación base64
Distinga entre lienzo y entorno de pintura:
- Lienzo: correspondiente a cvs en el código, puede establecer el ancho y el alto del lienzo;
- Entorno de pintura: correspondiente a ctx en el código, puede configurar fillStyle, fillRect, etc.;
Utilice el método drawImage() que viene con el lienzo para dibujar imágenes en el lienzo.
Si desea obtener la base64 de la imagen comprimida, puede utilizar el método toDataURL() que viene con el lienzo.

código completo

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho del dispositivo, escala inicial=1.0> <meta http-equiv=X-UA -Contenido compatible=es decir=edge> <título>Documento</título></head><body> <tipo de entrada=archivo onchange=loadImg(this)> <hr> <div>800×449, 544KB</div> <img src= <hr> <div>400×224, 157KB</div> <canvas></canvas> <script> // Función de carga de imagen loadImg(me) { dejar img = document.querySelector('img'); dejar cvs = document.querySelector('canvas'); me.files[0] // Obtener el objeto del archivo // Solo comprime la imagen cargada si tiene más de 500 KB if (file && (file.size / 1024 > 500)) { let Reader = new FileReader(); .readAsDataURL( archivo); // Convertir a codificación base64 lector.onload = función (e) { let naturalBase64 = e.target.result // Obtener base64; Codificación, esta es la imagen original img.src = naturalBase64; img.onload = function () { let ratio = img.naturalWidth / img.naturalHeight // Obtenga la proporción de la imagen original para comprimirla en cvs de igual proporción. ancho = 400; cvs .height = cvs.width / ratio; let ctx = cvs.getContext('2d'); ctx.drawImage(img, 0, 0, cvs.width, cvs.height); // Dibujar en el lienzo // Base64 de la nueva imagen después de la compresión let zipBase64 = cvs.toDataURL(); </cuerpo></html>

representaciones

Acerca del tamaño de la imagen comprimida

Aquí hay un método listo para usar. baseStr es una codificación Base64 completa, que incluye

base64

Código:

 función calcBase(baseStr){ var tag = 'base64,'; baseStr = baseStr.substring(baseStr.indexOf(tag)+tag.length; var eqTagIndex = baseStr.indexOf('='); 1?baseStr.substring(0,eqTagIndex):baseStr; var strLen = baseStr.length var fileSize = strLen; - (strLen / 8) * 2; console.log(tamaño de archivo: + (fileSize / 1024).toFixed(1) + 'KB');}

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.