AngularJS 在上传之前压缩图片

Question

我正在为移动设备构建一个网站，使用angular-file-upload.min.js从移动设备图库上传图片。

html代码：

<div>
    <div class="rating-camera-icon">
        <input type="file" accept="image/*" name="file" ng-file-
         select="onFileSelect($files)">
    </div>
    <img ng-show="fileName" ng-src="server/{{fileName}}" width="40"
     style="margin-left:10px">
</div>

代码：

$scope.onFileSelect = function($files) {
        for (var i = 0; i < $files.length; i++) {
            var file = $files[i];
            if (!file.type.match(/image.*/)) {
                // this file is not an image.
            };
            $scope.upload = $upload.upload({
                url: BASE_URL + 'upload.php',
                data: {myObj: $scope.myModelObj},
                file: file
            }).progress(function(evt) {
                    // console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
                    // $scope.fileProgress = evt.loaded / evt.total * 100.0;
                }).success(function(data, status, headers, config) {
                    // file is uploaded successfully
                    $scope.fileName = data;
                });
        }
    };

移动设备上上传速度非常慢。我该如何压缩文件？

- ben ezra

---

如果您没有使用本机应用程序，则无法压缩文件，而且大多数像jpg这样的图像已经被压缩了，据我所知，您无法做任何事情。 - Onur Topal

如果您正在寻找上传前的图像处理，这可能会有所帮助：https://dev59.com/mHE95IYBdhLWcg3wJKl_ - Matt Way

Answer 1

将图像转换为base-64文本格式是可以的，但会花费一些时间，而且并不会压缩它。实际上，它可能比原始图像更大。不幸的是，您的浏览器也不会对上传文件进行gzip压缩，当然它们可以处理经过gzip压缩的下载。您可以尝试使用纯JS解决方案对文本本身进行gzip压缩。在github上，您可以找到这样的东西-https://github.com/beatgammit/gzip-js。但是，这也需要一些时间，并且不能保证图像的压缩文本版本比您上传的原始JPEG更小。

本地移动应用程序可能会在发送之前使用一些本机代码JPEG或PNG优化（基本上重新采样图像），但在JavaScript中执行此操作似乎存在潜在问题。鉴于Atwood定律（最终所有内容都将用JavaScript编写），当时的2014年中期肯定可以做到，但现在还没有。

- TAP

Answer 2

您可以尝试将图像存储在画布上，然后转换为data64格式，再上传数据字符串。我在POC中做了类似的事情，但是在iOS中存在有关大型图像（例如在画布中拍摄的相机图像）的错误，但总体效果不错... 大致如下：

file = files[0];
try {
  var URL = window.URL || window.webkitURL,
      imgURL = URL.createObjectURL(file);
  showPicture.src = imgURL;
  imgBlobToStore = imgURL;
  if(AppData.supports_html5_storage()) {      
    var canvas = document.getElementById('storingCanvas') ,
        ctx = canvas.getContext('2d'),
        img = new Image(),
        convertedFile;
    img.src = imgBlobToStore;
    img.onload = function () {    
        canvas.width = img.width;
        canvas.height= img.height;
        ctx.drawImage(img, 0,0,img.width, img.height);
        convertedFile = canvas.toDataURL("image/jpeg"); //or png
        //replace with angular storage here
        localStorage.setItem( $('.pic').attr('id'), convertedFile);
    };
  }, 
}

- Santiago Rebella

Answer 3

有几个客户端库可以为您完成这项工作。

• https://github.com/oukan/angular-image-compress
• https://github.com/sammychl/ng-image-compress
• http://angularscript.com/client-side-image-compress-directive-with-angular/

- Zapnologica

Answer 4

作为编程解决方案的替代方案 - 如果您的图像是由设备相机创建以进行上传，则为什么不简单地更改相机的分辨率。最小分辨率可能比最大分辨率小10倍，这在许多情况下可能是合适的。

- Roger Layton