Javascript Girl
  1. Javascript Girl
  3. Redimensionnement d'image par Javascript
Intereting Posts
Comment intégrer Stripe Connect avec Node.js? Un moyen approprié de réinitialiser les données dans VueJs 2.0 Link_to syntaxe avec rails3 (link_to_remote) et javascript de base ne fonctionne pas dans une application rails3? Laisser entrer si sans accolades Trop de récurrence lors de la mise à jour de l'état en réaction L'événement ne se déclenche qu'une seule fois lors de la demande d'Ajax dans jQuery Bootgrid refresh button pour ne pas dimensionner Index d'accès du parent ng-repeat de child ng-repeat Javascript: Utilisation de la contre-valeur courante en cours dans une fonction () {}? Le bouton de retour dans le navigateur ne fonctionne pas correctement après avoir utilisé pushState (en Chrome) Valider la date au format dd / mm / aaaa en utilisant JQuery Valider PHP a lu Javascript array HTML5, JavaScript: Faites glisser et déposez un fichier à partir d'une fenêtre externe (Explorateur Windows) Comment fonctionne jsPerf? Devrais-je encapsuler ma bibliothèque javascript?

Redimensionnement d'image par Javascript

J'ai une application Web en cours d'exécution. Et il utilise le téléchargement d'ajax. Le problème est que les utilisateurs téléchargent des images trop grandes. Donc ça prend un peu plus de temps. Les utilisateurs s'en plaignent. Donc, ce que je pensais, c'est ceci: «Si je récolte et redimensionne l'image via js, puis envoyez-la au serveur via un téléchargement ajax, puis le temps sera réduit». Donc, y a-t-il un moyen de le faire? Une idée pour cela?

Une solution consiste à utiliser des méthodes modernes comme FileReader et Canvas (mais cela ne fonctionne que sur les derniers navigateurs modernes).

http://caniuse.com/filereader

http://caniuse.com/canvas

Dans cet exemple, je montre comment laisser le client redimensionner une image avant de télécharger en définissant un rapport d'aspect maximum de taille et de hauteur.

Dans cet exemple, widthHeight maximum = 64; Votre image finale est c.toDataURL (); 

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script> var h=function(e){ var fr=new FileReader(); fr.onload=function(e){ var img=new Image(); img.onload=function(){ var MAXWidthHeight=64; var r=MAXWidthHeight/Math.max(this.width,this.height), w=Math.round(this.width*r), h=Math.round(this.height*r), c=document.createElement("canvas"); c.width=w;c.height=h; c.getContext("2d").drawImage(this,0,0,w,h); this.src=c.toDataURL(); document.body.appendChild(this); } img.src=e.target.result; } fr.readAsDataURL(e.target.files[0]); } window.onload=function(){ document.getElementById('f').addEventListener('change',h,false); } </script> </head> <body> <input type="file" id="f"> </body> </html>

Dans la partie toile du code, vous pouvez également ajouter une fonction de recadrage.

Modifier comme demandé dans les commentaires 

 c.toDataURL();

Est l'image base64_string, vous pouvez l'enregistrer dans une entrée cachée, ajouter à un new FormData() ou où vous voulez.

Sur le serveur 

 $data=explode(',',$base64_string); $image=base64_decode($data[1]);

Écrire au fichier 

 $f=fopen($fileName,"wb"); fwrite($f,$image); fclose($f);

ou 

 $gd=imagecreatefromstring($image);

Vous pouvez également stocker l'ensemble de la chaîne d'image base64 dans la base de données et l'utiliser toujours.