Téléchargement de la compression d'image sur le navigateur mobile HTML5 Canvas_Compétences du didacticiel HTML5

Lors de la conception récente de la fonction de téléchargement d'avatar sur le terminal mobile, elle a été initialement téléchargée directement via formData avec . Cependant, l'utilisation réelle est la suivante : pour les images trop grandes (photos prises). par les téléphones mobiles à pixels élevés), etc.) Un temps de téléchargement trop long entraînera l'échec du téléchargement, et télécharger la taille originale de l'image à chaque fois (compression de traitement en arrière-plan) affectera grandement l'expérience utilisateur, j'ai donc étudié la méthode de compression l'image à travers Canvas et en la téléchargeant. Voici quelques idées et réflexions :

1. Obtenez l'image locale et dessinez l'image dans le canevas. La difficulté ici est : en raison du mécanisme de protection du navigateur, le chemin de l'image du fichier local ne peut pas être obtenu directement, donc l'image locale doit être compilée au format base64 puis téléchargée , le code est le suivant :

Code JavaScriptCopier le contenu dans le presse-papiers

1. var result = document.getElementById("/* Bloc d'affichage du message d'erreur */"
2. var input = document.getElementById("/* Balise de téléchargement du fichier */"
4. if(typeof FileReader === 'undefined'){
result.innerHTML =
5. "

   Désolé, votre navigateur ne prend pas en charge FileReader

   " ;
input.setAttribute(
6. 'désactivé','désactivé' );
}
7. autre{
input.addEventListener(
8. 'change',readFile,false );
}
11. fonction readFile(){
12. var fichier = ce.files[0]
13. if(!/image/w /.test(file.type)){
alert(
14. "Veuillez vous assurer que le fichier est de type image" );
15. retour faux ;
}
17. var reader = nouveau FileReader();
reader.readAsDataURL(fichier);
reader.onload =
19. fonction(e){
20. // this.result L'encodage de l'image compilée peut être affiché directement avec src
}
}

2. Traitement d'image en toile

Code JavaScript

Copier le contenu dans le presse-papiers

1. var c=document.getElementById("/* ID de balise Canvas */");
2. var cxt=c.getContext("2d" );
3. var img=nouveau Image(); img.src=
4. /* Adresse d'encodage de l'image obtenue */
5. var width = img.width;
6. var hauteur = img.hauteur dic = hauteur / largeur
7. c.width = 200;
8. //La norme de compression d'image, ici est calculée sur la base du dépôt de 200px c.hauteur = 200 * dic
9. cxt.clearRect(0,0,200,200*dic);
10. cxt.drawImage(img,0,0,200,200*dic);
12. var finalURL = c.toDataURL();
13. // L'URL finale obtenue est l'encodage de l'image compressée, qui peut être utilisée pour télécharger ou générer directement des balises img

Quelques points à noter ici sont :

1. Il y aura une erreur lors du débogage local. La raison est un problème inter-domaines et doit être débogué côté serveur ;

2. La méthode drawImage() dans canvas a la fonction de recadrage de l'image, mais si l'étirement et le recadrage de l'image sont écrits en même temps, la méthode de recadrage sera exécutée en premier ;

3. Lorsque vous utilisez AJAX pour télécharger l'encodage d'image, le signe plus dans l'encodage sera converti en espace, provoquant l'échec de la compilation en arrière-plan

;

4. La méthode de sélection et de téléchargement des zones d'image est encore en phase d'essai, et j'ajouterai mon expérience plus tard.

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.

Texte original :

http://www.cnblogs.com/liaojh/p/5209433.html