Exemple de code pour Canvas et la compression d'images

J'ai déjà écrit un article sur le traitement d'images Canvas. Aujourd'hui, nous allons parler de la façon d'utiliser Canvas pour compresser des images.

Ensuite, j'expliquerai le processus spécifique de compression d'image Canvas avec des exemples spécifiques.

1. Obtenez des fichiers locaux

 <!--HTML--><input type=file id=choose-img />

 // JSvar ChooseImg = document.getElementById(choose-img); ChooseImg.onchange = function(e){ var file = this.files[0]; // ... (Une partie du code est omise et sera affichée dans séquence, la même ci-dessous)} ;

C'est très simple, il suffit de récupérer le fichier local via le bouton de type fichier.

 <!--HTML--><div id=result></div>

 // JSvar result = document.getElementById(result); // Utilisé pour afficher les résultats de sortie d'image ou les invites d'erreur if(/image/.test(file.type)){ // Détermine si le type de fichier est une image // ... }else{ result.innerHTML = '<span style=color: red;>Mauvais type de fichier ! </span>';}

 var img = new Image(), // Créer un objet image pour placer l'image d'origine reader = new FileReader();reader.readAsDataURL(file); // Lire au format base64 et le stocker dans l'attribut result de l'objet FileReader lecteur .onload = function(){ img.src = this.result; Attribuez directement la chaîne image base64 à document.body.insertBefore(img,chooseImg) dans le src de l'objet Image ; // Insérez l'image de sortie avant le bouton de fichier img.onload = function(){ // ... }; } ;

 var canvas = document.createElement('canvas');canvas.width = img.clientWidth;canvas.height = img.clientHeight;var context = canvas.getContext('2d');

Remarque : La taille du canevas est la même que la largeur et la hauteur de l'image d'entrée.

 contexte.drawImage(img,0,0,canvas.width,canvas.height);

 <!--HTML-->Taux de compression des images : <input id=rate type=number min=0 max=100 /> %

 // JSvar rate = document.getElementById(rate).value || 100; // Entrez le taux de compression de l'image, la valeur par défaut est 100 % var imgUrl = canvas.toDataURL(file.type,rate/100); le paramètre est le type d'image de sortie, et le second est le taux de compression result.innerHTML = 'Après compression : <img src='+ imgUrl +' />'; Afficher l'image compressée dans le résultat img.style.display = 'none'; // Masquer l'image originale

Affichez à nouveau l'image dessinée dans le canevas au format base64.

 <!--HTML-->Taux de compression d'image : <input id=rate type=number min=0 max=100 /> %<input type=file id=choose-img /><div id=result></div >

 // JSvar ChooseImg = document.getElementById(choose-img), result = document.getElementById(result);chooseImg.onchange = function(e){ var file = this.files[0]; file.type)){ var img = new Image(), reader = new FileReader(); reader.readAsDataURL(file); function(){ img.src = this.result; document.body.insertBefore(img,chooseImg); img.onload = function(){ var canvas = document.createElement('canvas'); ; toile.hauteur = img.clientHeight; var contexte = toile.getContext('2d'); context.drawImage(img,0,0,canvas.width,canvas.height); var rate = document.getElementById(rate).value || var imgUrl = canvas.toDataURL(file.type,rate/100); result.innerHTML = 'Après compression : <img src='+ imgUrl +' />'; result.style.display = 'block'; img.style.display = 'none'; }; }; else{ result.innerHTML = '<span style=color: red;>Mauvais type de fichier ! </envergure>'; }} ;

Après des tests, il a été constaté que l'effet de compression d'image au format JPEG est meilleur via Canvas, tandis que l'effet de compression PNG n'est pas évident et devient parfois plus important.

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.