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

Lors du téléchargement de photos sur le terminal mobile, les utilisateurs téléchargent généralement des photos à partir de l'album du téléphone mobile. Désormais, la qualité de prise de vue des téléphones mobiles est de plus en plus élevée. Généralement, la taille d'une seule photo est d'environ 3 M, c'est donc nécessaire. pour effectuer un traitement local avant le téléchargement. Ci-dessous, l'éditeur de Script House vous propose la fonction de compression et de téléchargement d'images de développement mobile HTML5. Les amis qui sont intéressés par la fonction de compression et de téléchargement d'images html5 devraient y jeter un œil

Les activités H5 sont devenues très courantes. les formulaires permettent aux utilisateurs de participer en téléchargeant des images. Lors du téléchargement de photos sur le terminal mobile, les utilisateurs téléchargent généralement des photos à partir de l'album du téléphone mobile. De nos jours, la qualité de prise de vue des téléphones mobiles est de plus en plus élevée et la taille d'une seule photo est généralement d'environ 3 Mo. Si vous le téléchargez directement, cela consomme beaucoup de trafic et l'expérience n'est pas bonne. Par conséquent, une compression locale doit être effectuée avant le téléchargement.

Ensuite, nous résumerons la fonction de compression et de téléchargement d'images dans le développement des activités h5, marquerons plusieurs pièges que nous avons rencontrés et les partagerons avec tout le monde :

Une lecture incontournable pour les débutants

Si vous n'avez aucune idée du téléchargement d'images mobiles, vous devez ajouter les trois concepts FileReader, Blob et FormData.

1.FileReader

Définition

À l'aide de l'objet FileReader, une application Web peut lire de manière asynchrone le contenu de fichiers (ou de tampon de données brutes), vous pouvez utilisez l'objet File ou l'objet Blob pour spécifier le fichier ou les données à traiter

Méthode

Gestionnaire d'événements

<.>

Utilisez

var fileReader = new FileReader();
fileReader.onload = function() {
    var url = this.result;
}
//or
fileReader.onload = function(e) {
    var url = e.target.result;
}

2.Blob

BLOB(binary large object), un grand objet binaire , est un conteneur qui peut stocker des fichiers binaires.

3.FormData

À l'aide de l'objet FormData, vous pouvez utiliser une série de paires clé-valeur pour simuler un formulaire complet, puis utiliser XMLHttpRequest pour envoyer ceci " formulaire".

Sujet principal

Processus de téléchargement de compression d'image mobile :

1) fichier d'entrée pour télécharger l'image et utilisez FileReader pour lire les images téléchargées par l'utilisateur ;

2) Transmettez les données de l'image dans l'objet img, dessinez l'image sur le canevas, puis utilisez canvas.toDataURL pour la compression

3) Obtenez les données d'image compressées au format base64, convertissez-les en binaire, insérez les données de formulaire et enfin soumettez les données de formulaire via xmlHttpRequest

1. Obtenez les données d'image

fileEle.onchange = function() {
    if (!this.files.length) return;
    //以下考虑的是单图情况
    var _ua = window.navigator.userAgent;
    var _simpleFile = this.files[0];
    //判断是否为图片
    if (!/\/(?:jpeg|png|gif)/i.test(_simpleFile.type)) return;
    //插件exif.js获取ios图片的方向信息
    var _orientation;
    if(_ua.indexOf('iphone') > 0) {
        EXIF.getData(_simpleFile,function(){
            _orientation=EXIF.getTag(this,'Orientation');
        });
    }
    //1.读取文件，通过FileReader，将图片文件转化为DataURL，即data:img/png;base64，开头的url，可以直接放在image.src中;
    var _reader = new FileReader(),
        _img = new Image(),
        _url;
    _reader.onload = function() {
        _url = this.result;
        _img.url = _url;
        _img.onload = function () {
            var _data = compress(_img);
            uploadPhoto(_data, _orientation);
        };
    };
    _reader.readAsDataURL(_simpleFile);
};

2. Compresser les images

/**
 * 计算图片的尺寸，根据尺寸压缩
 * 1. iphone手机html5上传图片方向问题，借助exif.js
 * 2. 安卓UC浏览器不支持 new Blob()，使用BlobBuilder
 * @param  {Object} _img         图片
 * @param  {Number} _orientation 照片信息
 * @return {String}              压缩后base64格式的图片
 */
function compress(_img, _orientation) {
    //2.计算符合目标尺寸宽高值，若上传图片的宽高都大于目标图，对目标图等比压缩；如果有一边小于，对上传图片等比放大。
    var _goalWidth = 750,                  //目标宽度
        _goalHeight = 750,                 //目标高度
        _imgWidth = _img.naturalWidth,     //图片宽度
        _imgHeight = _img.naturalHeight,   //图片高度
        _tempWidth = _imgWidth,            //放大或缩小后的临时宽度
        _tempHeight = _imgHeight,          //放大或缩小后的临时宽度
        _r = 0;                            //压缩比
    if(_imgWidth === _goalWidth && _imgHeight === _goalHeight) {
    } else if(_imgWidth > _goalWidth && _imgHeight > _goalHeight) {//宽高都大于目标图，需等比压缩
        _r = _imgWidth / _goalWidth;
        if(_imgHeight / _goalHeight < _r) {
            _r = _imgHeight / _goalHeight;
        }
        _tempWidth = Math.ceil(_imgWidth / _r);
        _tempHeight = Math.ceil(_imgHeight / _r);
    } else {
        if(_imgWidth < _goalWidth && _imgHeight < _goalHeight) {//宽高都小于
            _r = _goalWidth / _imgWidth;
            if(_goalHeight / _imgHeight < _r) {
                _r = _goalHeight / _imgHeight;
            }
        } else {
            if(_imgWidth < _goalWidth) {         //宽小于
                _r = _goalWidth / _imgWidth;
            } else{                              //高小于
                _r = _goalHeight / _imgHeight;
            }
        }
        _tempWidth = Math.ceil(_imgWidth * _r);
        _tempHeight = Math.ceil(_imgHeight * _r);
    }
    //3.利用canvas对图片进行裁剪，等比放大或缩小后进行居中裁剪
    var _canvas = e._$get(&#39;canvas-clip&#39;);
    if(!_canvas.getContext) return;
    var _context = _canvas.getContext(&#39;2d&#39;);
    _canvas.width = _tempWidth;
    _canvas.height = _tempHeight;
    var _degree;
    //ios bug，iphone手机上可能会遇到图片方向错误问题
    switch(_orientation){
       //iphone横屏拍摄，此时home键在左侧
        case 3:
            _degree=180;
            _tempWidth=-_imgWidth;
            _tempHeight=-_imgHeight;
            break;
        //iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
        case 6:
            _canvas.width=_imgHeight;
            _canvas.height=_imgWidth; 
            _degree=90;
            _tempWidth=_imgWidth;
            _tempHeight=-_imgHeight;
            break;
        //iphone竖屏拍摄，此时home键在上方
        case 8:
            _canvas.width=_imgHeight;
            _canvas.height=_imgWidth; 
            _degree=270;
            _tempWidth=-_imgWidth;
            _tempHeight=_imgHeight;
            break;
    }
    if(window.navigator.userAgent.indexOf(&#39;iphone&#39;) > 0 && !!_degree) {
        _context.rotate(_degree*Math.PI/180);
        _context.drawImage(_img, 0, 0, _tempWidth, _tempHeight); 
    } else {
        _context.drawImage(_img, 0, 0, _tempWidth, _tempHeight);
    }
    //toDataURL方法，可以获取格式为"data:image/png;base64,***"的base64图片信息；
    var _data = _canvas.toDataURL(&#39;image/jpeg&#39;);
    return _data;
}

3. >

Plug-in pour déterminer la direction des photos prises par iPhone : exif

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!