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

이미지를 캔버스에 저장 한 다음 data64로 변환 한 다음 데이터 문자열을 업로드 할 수 있습니다. POC에서 이런 종류의 사진을 만들었습니다. 캔버스에있을 때 카메라로 찍을 수있는 큰 이미지와 관련된 버그가 있습니다.하지만 오버런은 훌륭합니다.

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 2

이미지를 기본 64 텍스트 형식으로 문자열로 만드는 것은 괜찮은 편이지만 잘 수행되지만 시간이 오래 걸리고 확실히 압축되지 않습니다. 사실 그것은 원시 이미지보다 눈에 띄게 클 것입니다. 불행히도 브라우저는 gzip을 업로드하지 않습니다. 그들은 물론 gzipped 다운로드를 처리 할 수 ​​있습니다. 순수한 JS 솔루션을 사용하여 텍스트 자체의 gzip을 확실히 시도 할 수 있습니다. github에서 당신은 그런 것들을 찾을 수 있습니다. - https://github.com/beatgammit/gzip-js 그러나 시간이 좀 걸릴 것이고 이미지의 압축 된 텍스트 버전이 당신이 첨부 한 원시 JPEG보다 더 작다는 보장은 없습니다.

네이티브 모바일 앱은 적절한 경우 기본 코드 JPEG 또는 PNG 최적화를 사용하여 보내기 전에 (기본적으로 이미지 리샘플링을 수행 할 수 있음) JavaScript에서이 작업을 수행하는 것이 잠재적으로 문제가 될 수 있습니다. Atwood의 법칙 (결국 JavaScript로 모든 것을 작성하는 법)을 감안할 때 확실히 할 수 있지만, 2014 년 중반의 시점에서는 그렇지 않습니다.

Answer 3

프로그래밍 방식 솔루션의 대안 - 업로드를 위해 장치 카메라에서 이미지를 만드는 경우 카메라의 해상도 만 변경하면 안됩니다. 최소 해상도는 최대 해상도보다 10 배 작을 수 있으며, 이는 많은 상황에 적합 할 수 있습니다.

Answer 4

클라이언트 측에서이 작업을 수행하는 여러 라이브러리가 있습니다.

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