angularjs在上传前压缩图像答案

【问题标题】：angularjs compress image before uploadangularjs在上传前压缩图像
【发布时间】：2014-04-23 14:06:39
【问题描述】：

我正在为移动设备构建一个网站，它使用 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;
                });
        }
    };

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

【问题讨论】：

如果您不使用本机应用程序，则无法压缩文件，据我所知，大多数图像（如 jpg）已经被压缩，您无能为力。
如果您在上传之前正在寻找图像处理，这可能会有所帮助：stackoverflow.com/questions/2434458/…

标签： javascript angularjs html file-upload compression

【解决方案1】：

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

如果合适的话，原生移动应用可能会决定在发送之前使用一些原生代码 JPEG 或 PNG 优化（基本上是对图像进行重新采样），但在 JavaScript 中这样做似乎可能会出现问题。鉴于 Atwood 定律（最终用 JavaScript 编写所有内容）当然可以做到，但在 2014 年年中的这一点上还不行。

【讨论】：

【解决方案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);
    };
  }, 
}

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：