Exemple de code pour la compression d'images à l'aide de Canvas

Auteur：Eve Cole Date de mise à jour：2025-02-01 10:36:02

Lors de la reconnaissance de carte d'identité dans le projet, le codage au format base64 de l'image doit être transmis, mais les photos prises par le téléphone portable sont trop volumineuses et les convertir en base64 est tout simplement terrible, j'ai donc trouvé une solution.

Points de connaissances impliqués

L'événement onchange est déclenché après le téléchargement du fichier.
Utilisez l'attribut files pour obtenir l'objet fichier téléchargé
readAsDataURL est utilisé pour convertir en codage base64
Distinguer toile toile et environnement peinture :
- Canvas : correspondant aux CV dans le code, vous pouvez définir la largeur et la hauteur du canevas ;
- Environnement de peinture : correspondant à ctx dans le code, vous pouvez définir fillStyle, fillRect, etc.
Utilisez la méthode drawImage() fournie avec Canvas pour dessiner des images sur Canvas.
Si vous souhaitez obtenir la base64 de l'image compressée, vous pouvez utiliser la méthode toDataURL() fournie avec Canvas.

Code complet

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Document</title></head><body> <input type=file onchange=loadImg(this)> <hr> <div>800×449, 544 Ko</div> <img src= <hr> <div>400×224, 157 Ko</div> <canvas></canvas> <script> // Fonction de téléchargement d'image loadImg(me) { let img = document.querySelector('img'); let cvs = document.querySelector('canvas'); me.files[0]; // Obtenir l'objet fichier // Compresser l'image téléchargée uniquement si elle est supérieure à 500 Ko if (file && (file.size / 1024 > 500)) { let reader = new FileReader(); .readAsDataURL( file); // Convertir en codage base64 reader.onload = function (e) { let naturalBase64 = e.target.result; Encodage, c'est l'image originale img.src = naturalBase64; img.onload = function () { let ratio = img.naturalWidth / img.naturalHeight; // Obtenez le rapport de l'image originale, afin de la compresser dans un rapport cvs égal. largeur = 400 ; cvs .hauteur = cvs.largeur / ratio ; laissez ctx = cvs.getContext('2d'); ctx.drawImage(img, 0, 0, cvs.width, cvs.height); // Dessiner sur le canevas // Base64 de la nouvelle image après compression let zipBase64 = cvs.toDataURL(); </body></html>

rendus

À propos de la taille de l'image compressée

Voici une méthode prête à l'emploi baseStr est un encodage Base64 complet, qui inclut.

base64

Code:

 function 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(taille du fichier : + (fileSize / 1024).toFixed(1) + 'KB');}

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.