Rumah > hujung hadapan web > tutorial js > Pelanggan Angularjs melaksanakan pemampatan fail imej dan memuat naik examples_AngularJS

Pelanggan Angularjs melaksanakan pemampatan fail imej dan memuat naik examples_AngularJS

WBOY
Lepaskan: 2016-05-16 15:51:22
asal
1667 orang telah melayarinya

Terutamanya gunakan kanvas HTML5 untuk memampatkan imej, kemudian tukarkannya kepada dataURL, dan kemudian tukar dataURL menjadi fail Blob Objek Blob boleh diberikan terus kepada 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
  };

});
Salin selepas log masuk


Memandangkan angualrjs pada masa ini tidak menyokong muat naik fail melalui data pelbagai bentuk, anda boleh menggunakan kod berikut untuk memuat naik fail dalam 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);
    });


}
Salin selepas log masuk


Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan