Fonction de téléchargement de compression d'image de développement mobile HTML5 Mobile

L'activité H5 est très courante, un formulaire consiste à permettre aux utilisateurs de télécharger des images pour participer. Les images de téléchargement des terminaux mobiles. Si le téléchargement est téléchargé directement, il consomme beaucoup de trafic et l'expérience n'est pas bonne. Par conséquent, avant le téléchargement, vous devez comprimer la zone locale.

District de Xiaobai doit-voir

S'il n'y a pas de concept de téléchargement d'images mobiles, vous devez compléter les trois concepts de FileReader, Blob et FormData.

définition

À l'aide de l'objet FileReader, l'application Web peut être asynchrone pour lire le fichier (ou le tampon de données bruts) stocké sur l'ordinateur utilisateur.

méthode

Procédure de traitement des événements

utiliser

 Var fileReader = new fileReader ();

Blob (grand objet binaire), un objet binaire, est un conteneur qui peut stocker des fichiers binaires.

En utilisant l'objet FormData, vous pouvez utiliser une série de valeurs de clés pour simuler un formulaire complet, puis utiliser XMLHTTPRequest pour envoyer ce formulaire.

Sujet

1) Entrer des images de téléchargement de fichiers et lire l'image téléchargée par les utilisateurs avec FileReader;

2) Les données d'image sont transmises dans l'objet IMG, dessinent IMG sur Canvas, puis utilisent Canvas.Todataurl pour la compression;

3) Obtenez les données d'image du format Base64 compressées, transformez-la en binaire, branchez-en FormData et enfin soumettez FormData via XMLHttpRequest

 Fileele.Onchange = function () {if (! This.files.length) return; .Test (_SimpleFile.Type)) return; .getTag (ceci, «orientation»);} // 1. Lire les fichiers, utilisez FileReader pour soumettre le fichier photo. .src; compress (_img);

 / ** * Calculez la taille de l'image, compressez la taille en fonction de la taille * 1. Le téléphone mobile iPhone html5 Téléchargez le problème de direction de l'image, utilisez exif.js * 2. Le navigateur Android UC ne prend pas en charge le nouveau blob (), Utilisez BlobBuilder * @param {objet} _IMG Image * @param {nombre} _ontation Informations photo * @return {String} Image Images in Base64 Format * / Function Compress (_img, _orientation) {// 2. La taille de la cible, si la hauteur élevée de l'image télécharge, l'image de l'image est plus grande que le graphique cible et compresse la carte cible et d'autres compressions; Var _goalWidth = 750, // cible width_goalHeight = 750, // cible height_imgwidth = _img.naturwidth, // Image width_imgheight = _img.naturalheight, // Photo Height_Tempwi dth = _imgwidth, // Zoom ou Shrink Width_Tempheight = _IMGHEGO La largeur temporaire après zoom ou réduction _r = 0; que le tableau cible, et la compression égale est compressée _r = _imgWidth / _GoalWidth; / _imgheight;}} else {if (_imgwidth <_goalwidth) {// petit que _r = _goalwidth / _imgwidth;} else {// petit est moins que _r = __r = __r = _ __r = __goalHeight / _ imgheight;} } _tempwidth = math.ceil (_imgwidth * _r); Get ('Canvas-Clip'); Interrupteur du problème d'erreur de direction (_ORIENTATION) {// L'écran horizontal iPhone, à ce moment, la touche d'accueil est le cas 3: _Degree = 180; du téléphone mobile normalement). Height = _imgwidth; _Degree = 270; PI / 180); = _Canvas.todataurl ('image / jpeg');

 / ** * Téléchargez l'image sur nos * @param {objet} _Blog Blob Format Photo * @return {void} * / fonction uploadPhoto (_data) {// 4. Obtenez les informations d'image dans canvas //window.atoB la méthode sera L'image du format Base64 est convertie en une chaîne binaire; Split (',') [1]; _data.length); ne prend pas en charge new blob (), utilisez BlobBuilder var _blob; Windows.webkitBlobBuilder || () $ requestdwrbyget, param: [_Suffix, '', '', '', '1'], onload: function (_tokens) {_tokens = _tokens || []; ||! _Token.ObjectName ||! '); Return false;} // Téléchargez l'image sur le NO )); (_xhr.readystate === 4) {if (_xhr.status> = 200 && _xhr.status <300) || _BucketName + / + _ObjectName +? / taxiu? Op = Effect & OrigiMGurl = '+ _Newurl;

Déterminez la direction de l'image de prise de vue de l'iPhone: exif

Ce qui précède est la fonction de développement mobile HTML5 compressé et de téléchargement introduit par Xiaobian pour réaliser l'effet de la connexion des données de simulation. tout le monde dans le temps. Merci beaucoup pour votre soutien pour le site Web VEVB Wulin!