HTML5挪动开发设计照片缩小提交作用

日期:2021-01-20 类型:科技新闻 

关键词:公众号小程序,小程序正规价格表,微信群签到小程序,网络抽签小程序,个人做小程序需要什么

H5主题活动已10分广泛,在其中1种方式是让客户提交照片开展参加。挪动端提交照片,客户1般全是提交手机上相册中的照片,而如今手机上的拍攝品质愈来愈高,1般单张相片的规格都在3M上下。若立即提交,10分耗总流量,而且体验实际效果也不佳。因而必须在提交以前,优秀行当地缩小。

接下来总结在h5主题活动的开发设计中照片缩小提交的作用,并标识在其中踩过的几个坑,共享给大伙儿:

小白区必看

针对挪动端照片提交没什么定义的话,必须填补FileReader、Blob、FormData3个定义。

1.FileReader

界定

应用FileReader目标,web运用程序流程能够多线程的载入储存在客户测算机上的文档(或初始数据信息缓存)內容,可使用File目标或Blob目标来特定所要解决的文档或数据信息.

方式

恶性事件解决程序流程

应用

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),2进制大目标,是1个能够储存2进制文档的器皿。

3.FormData

运用FormData目标,你可使用1系列的键值对来仿真模拟1个详细的表单,随后应用XMLHttpRequest推送这个”表单”.

正题

挪动端照片缩小提交全过程:

1)input file提交照片,应用FileReader载入客户提交的照片;

2)照片数据信息传入img目标,将img绘图到canvas上,再应用canvas.toDataURL开展缩小;

3)获得缩小后的base64文件格式照片数据信息,转成2进制,塞入formdata,最终根据xmlHttpRequest递交formdata;

1.获得照片数据信息

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.缩小照片

/**
 * 测算照片的规格,依据规格缩小
 * 1. iphone手机上html5提交照片方位难题,依靠exif.js
 * 2. 安卓系统UC访问器不适用 new Blob(),应用BlobBuilder
 * @param  {Object} _img         照片
 * @param  {Number} _orientation 相片信息内容
 * @return {String}              缩小后base64文件格式的照片
 */
function compress(_img, _orientation) {
    //2.测算合乎总体目标规格宽高值,若提交照片的宽高都超过总体目标图,对总体目标图等比缩小;假如有1边小于,对提交照片等比变大。
    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('canvas-clip');
    if(!_canvas.getContext) return;
    var _context = _canvas.getContext('2d');
    _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('iphone') > 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('image/jpeg');
    return _data;
}

3.提交照片

/**
 * 提交照片到NOS
 * @param  {Object} _blog Blob文件格式的照片
 * @return {Void}
 */
function uploadPhoto(_data) {
    //4.获得canvas中的照片信息内容
    //window.atob方式将在其中的base64文件格式的照片变换成2进制标识符串;若将变换后的值立即取值给Blob会出错,需Uint8Array变换:最终建立Blob目标;
    _data = _data.split(',')[1];
    _data = window.atob(_data);
    //假如无需ArrayBuffer,推送给服务器的照片文件格式是[object Uint8Array],提交不成功...
    var _buffer = new ArrayBuffer(_data.length);
    var _ubuffer = new Uint8Array(_buffer);
    for (var i = 0; i < _data.length; i++) {
        _ubuffer[i] = _data.charCodeAt(i);
    }
    // 安卓系统 UC访问器不适用 new Blob(),应用BlobBuilder
    var _blob;
    try {
        _blob = new Blob([_buffer], {type:'image/jpeg'});
    } catch(ee) {
        window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
        if (ee.name == 'TypeError' && window.BlobBuilder) {
            var _bb = new BlobBuilder();
            _bb.append(_buffer);
            _blob = _bb.getBlob('image/jpeg');
        }
    }
    var _suffix = 'jpg';
    if(_blob.type === 'image/jpeg') {
        _suffix = 'jpg';
    }
    //获得NOStoken
    this.__cache._$requestDWRByGet({url: 'ImageBean.genTokens',param: [_suffix,'','','','1'],onload: function(_tokens) {
        _tokens = _tokens || [];
        var _token = _tokens[0];
        if(!_token || !_token.objectName || !_token.uploadToken){
            alert('token获得不成功!');
            return false;
        }
        //提交照片到NOS
        var _objectName = _token.objectName,
            _uploadToken = _token.uploadToken,
            _bucketName = _token.bucketName;
        var _formData = new FormData();
        _formData.append('Object', _objectName);
        _formData.append('x-nos-token', _uploadToken);
        _formData.append('file',_blob);
        var _xhr;
        if (window.XMLHttpRequest) {
            _xhr = new window.XMLHttpRequest();
        } else if (window.ActiveXObject) {
            _xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        _xhr.onreadystatechange = function() {
            if(_xhr.readyState === 4) {
                if((_xhr.status >= 200 && _xhr.status < 300) || _xhr.status === 304) {
                    var _imgurl = "http://nos.netease.com/" + _bucketName + "/" + _objectName + "?imageView";
                    var _newUrl = mb.x._$imgResize(_imgurl, 750, 750, 1, true);
                    window.location.href = 'http://www.lofter.com/act/taxiu?op=effect&originImgUrl=' + _newUrl;
                }
            }
        };
        _xhr.open('POST', 'http://nos.netease.com/' + _bucketName, true);
        _xhr.send(_formData);
    }});
}

分辨iphone拍攝照片方位的软件:exif

以上所述是网编给大伙儿详细介绍的HTML5挪动开发设计照片缩小提交作用,完成1个仿真模拟后台管理数据信息登入的实际效果,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:H5仿手机微信页面实例教程(1) 返回下一篇:没有了