Home > Web Front-end > JS Tutorial > body text

Angularjs client implements compression of image files and uploads examples_AngularJS

WBOY
Release: 2016-05-16 15:51:22
Original
1640 people have browsed it

Mainly use HTML5 canvas to compress the image, and then convert it into dataURL, and then convert the dataURL into a Blob file. The Blob object can be directly assigned to Formdata.

app.service('Util', function($q) {
  var dataURItoBlob = function(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
      byteString = atob(dataURI.split(',')[1]);
    else
      byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {
      type: mimeString
    });
  };

  var resizeFile = function(file) {
    var deferred = $q.defer();
    var img = document.createElement("img");
    try {
      var reader = new FileReader();
      reader.onload = function(e) {
        img.src = e.target.result;

        //resize the image using canvas
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        var MAX_WIDTH = 800;
        var MAX_HEIGHT = 800;
        var width = img.width;
        var height = img.height;
        if (width > height) {
          if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
          }
        } else {
          if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
          }
        }
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);

        //change the dataUrl to blob data for uploading to server
        var dataURL = canvas.toDataURL('image/jpeg');
        var blob = dataURItoBlob(dataURL);

        deferred.resolve(blob);
      };
      reader.readAsDataURL(file);
    } catch (e) {
      deferred.resolve(e);
    }
    return deferred.promise;

  };
  return {
    resizeFile: resizeFile
  };

});
Copy after login


Since angualrjs currently does not support uploading files through multiform data, you can use the following code to upload files in formdata

app.controller('CompanyCtrl', function($http, Util) {

    Util.resizeFile(input.files[0]).then(function(blob_data) {
      var fd = new FormData();
      fd.append("imageFile", blob_data);
      $http.post('http://your.domain.com/upload', fd, {
        headers: {'Content-Type': undefined },
        transformRequest: angular.identity
      })
        .success(function(data) {
          $scope.model.company_pict = data[0];
        })
        .error(function() {
          console.log("uploaded error...")
        });
    }, function(err_reason) {
      console.log(err_reason);
    });


}
Copy after login


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template