Javascript angularjs在上传前压缩图像

我正在为移动设备建立一个网站，它使用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=函数（$files）{
对于（变量i=0；i<$files.length；i++）{
var file=$files[i]；
如果（！file.type.match（/image.*/）{
//此文件不是图像。
};
$scope.upload=$upload.upload({
url:BASE_url+“upload.php”，
数据：{myObj:$scope.myModelObj}，
档案：档案
}).进度（功能（evt）{
//log（'percent:'+parseInt（100.0*evt.loaded/evt.total））；
//$scope.fileProgress=evt.loaded/evt.total*100.0；
}).success（函数（数据、状态、标题、配置）{
//文件已成功上载
$scope.fileName=数据；
});
}
};

---

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

您可以尝试将图像存储在画布上，然后转换为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);
    };
  }, 
}

---

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

---

如果合适的话，本机移动应用程序可能会决定在发送之前使用一些本机代码JPEG或PNG优化（基本上是对图像进行重采样），但是在JavaScript中这样做在此时似乎有潜在的问题。考虑到阿特伍德定律（最终用JavaScript编写所有内容），这当然是可以做到的，但在2014年年中的这一点上，情况并非如此。

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

在客户端有多个库可以为您这样做

---

如果您未使用本机应用程序，则无法压缩文件。据我所知，大多数图像（如jpg）都已压缩。如果您在上传之前正在寻找图像处理，这可能会有所帮助：

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