H5 Mobile End Image compression upload development process _javascript skills

H5 activities have been very common, one of the forms is to allow users to upload pictures to participate. Mobile End upload pictures, users are generally uploading photos of mobile phone albums, and now the quality of mobile phones are more and more high, the general single picture of the size of the 3M or so. If the direct upload, very consumption of traffic, and experience the effect is not good. So you need to compress it locally before uploading.

Next summarizes in the development of the H5 activity picture compression upload function, and mark one of the several pits, share to everybody:

Little white areas must see

There is no concept of mobile image upload, you need to add FileReader, Blob, formdata three concepts.

1.FileReader

Defined

With the FileReader object, a Web application can asynchronously read the contents of a file (or raw data buffer) stored on a user's computer, and you can use a file object or Blob object to specify the files or data that you want to work with.

Method

Event handlers

Use

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), binary large objects, is a container in which binary files can be stored.

3.FormData

With the Formdata object, you can use a series of key-value pairs to simulate a complete form, and then use the XMLHttpRequest to send the "form."

Business

Moving end image compression upload process:
1 input file upload picture, use FileReader to read the user upload picture;
2 image data into the IMG object, the IMG will be drawn to the canvas, and then use the canvas.todataurl for compression;
3) Obtain the compressed base64 format picture data, turn into binary system, plug into the formdata, finally through the XMLHttpRequest submitted formdata;

1. Get Picture data

Fileele.onchange = function () {
  if (!this.files.length) return;

  The following considerations are a single map of the situation
  var _ua = window.navigator.userAgent;
  var _simplefile = this.files[0];

  Determine if the picture if
  (!/\/(?: jpeg|png|gif)/i.test (_simplefile.type)) return;

  Plugin Exif.js Get the direction information of iOS images
  var _orientation;
  if (_ua.indexof (' iphone ') > 0) {
    exif.getdata (_simplefile,function () {
      _orientation=exif.gettag (this, ' Orientation ');}

  1. Read the file, through the FileReader, the picture file into the Dataurl, that is, data:img/png;base64, the beginning of the URL, can be directly placed in the 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. Compress pictures

/** * Calculate the size of the picture, compressed according to the size of * 1. iphone HTML5 upload picture direction problem with the help of Exif.js * 2. Android UC Browser does not support new Blob (), use Blobbuilder * @param {Object} _img picture * @param {number} _orientation photo information * @return {String The picture in compressed Base64 format/function compress (_img, _orientation) {//2. The calculation conforms to the target size wide and high value, if the upload picture's width high All is bigger than the target graph, to the target graph and so on compression; if there is less than one side, upload the picture
  Equal magnification.
    var _goalwidth = 750,//target width _goalheight = 750,//target height _imgwidth = _img.naturalwidth,//Picture width     _imgheight = _img.naturalheight,//Picture height _tempwidth = _imgwidth,//The temporary width of enlarged or narrowed _tempheight = _imgheight,              Enlarged or narrowed temporary width _r = 0; Compression ratio if (_imgwidth = = _goalwidth && _imgheight = = _goalheight) {} else if (_imgwidth > _goalwidth &
    & _imgheight > _goalheight) {//wide height is larger than the target map, need to be compressed _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) {//wide height is less than _r = _goalwidth/_imgwidth;
      if (_goalheight/_imgheight < _r) {_r = _goalheight/_imgheight;
      } else {if (_imgwidth < _goalwidth) {//width less than _r = _goalwidth/_imgwidth;
      } else{//Gaoxiao _r = _goalheight/_imgheight;
    } _tempwidth = Math.ceil (_imgwidth * _r);
  _tempheight = Math.ceil (_imgheight * _r);
  //3. Use canvas to crop the picture, and then zoom in or out of the center to cut the 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 phone may encounter picture direction error problem switch (_orientation) {//iphone horizontal screen shooting, at this time the home key on the left case 3: _degree=180;
      _tempwidth=-_imgwidth;
      _tempheight=-_imgheight;
    Break
      iphone vertical screen shot, at this time the home button below (normal take the direction of the phone) Case 6: _canvas.width=_imgheight;_canvas.height=_imgwidth;
      _degree=90;
      _tempwidth=_imgwidth;
      _tempheight=-_imgheight;
    Break
      iphone vertical screen shot, at this time the home button on the top 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 method, you can get Base64 picture information formatted as "data:image/png;base64,***"; var _data = _canvas.todataurl (' image/jpeg ');
return _data;

 }

3. Upload picture

/** * Upload pictures to Nos * @param {Object} _blog blob format picture * @return {Void}/function Uploadphoto (_data) {//4. Get pictures in canvas The information//window.atob method converts the picture in the Base64 format into a binary string, and if the converted value is assigned directly to the BLOB, an error is required to uint8array the conversion: The last to create a blob object; _data = _data.split (', ') [
  1];

  _data = Window.atob (_data);
  If you do not use Arraybuffer, send to the server picture format is [object Uint8array], upload failed ... var _buffer = new Arraybuffer (_data.length);
  var _ubuffer = new Uint8array (_buffer);
  for (var i = 0; i < _data.length i++) {_ubuffer[i] = _data.charcodeat (i);
  }//Android UC Browser does not support new Blob (), using 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 '; //Get 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 get failed!
      ');
    return false; //Upload picture to nos var _objectname = _token.objectname, _uploadtoken = _token.uploadtoken, _bucketname = _t

    Oken.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 >= &&am P _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);
}});

 }

To determine the iphone photo orientation of the plugin: EXIF

This is the end of the H5 picture compression upload process.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.