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

在移动设备上上传非常慢。如何压缩文件？

Answer 1

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

如果合适，原生移动应用程序可能会决定在发送之前使用一些原生代码 JPEG 或 PNG 优化(基本上是对图像重新采样)，但此时在 JavaScript 中执行此操作似乎存在潜在问题。鉴于阿特伍德定律(最终用 JavaScript 编写所有内容)它当然可以完成，但在 2014 年年中的这个时候还不能。