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;
                });
        }
    };

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

Answer 1

将图像字符串化为base-64文本格式都很好，但是它会花费少量时间，当然也不会压缩它。事实上，它可能会明显大于原始图像。不幸的是，您的浏览器也不会gzip上传。他们当然可以处理gzip压缩下载。您当然可以尝试使用一些纯JS解决方案来执行文本本身的gzip。在github上查找你可以找到这样的东西 - https://github.com/beatgammit/gzip-js但是，这也需要一些时间，并且无法保证图像的压缩文本版本比你附加的原始JPEG小。

本机移动应用可能会在发送之前决定使用某些本机代码JPEG或PNG优化（基本上重新采样图像），但在JavaScript中执行此操作似乎可能会出现问题。鉴于Atwood的定律（最终用JavaScript编写所有内容），它当然可以完成，但在2014年中期，它不是。

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);
    };
  }, 
}

Answer 3

有几个库在客户端为您执行此操作。

Answer 4

作为程序化解决方案的替代方案 - 如果您的图像是由设备相机创建的，那么为什么不简单地更改相机的分辨率。最小分辨率可能比最大分辨率小10倍，这可能适用于许多情况。

angularjs在上传之前压缩图像

4 个答案: