angularjs trước khi tải lên

Question

Tôi đang bẻ một trang web cho thiết bị di động, sử dụng angular-file-upload.min.js để tải lên hình ảnh từ thư viện hình ảnh trên thiết bị di động.

mã 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> 

mã:

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

Việc tải rất chậm trong các thiết bị di động. Làm thế nào tôi có thể nén tập tin?

Answer 1

Bạn có thể thử lưu trữ hình ảnh trên canvas, sau đó chuyển đổi thành dữ liệu64 và sau đó tải lên chuỗi dữ liệu. Tôi đã thực hiện loại này trong một POC, có một lỗi trong ios liên quan đến hình ảnh lớn như là một trong những bạn có thể đi với máy ảnh khi trong vải, nhưng các công trình ngang đẹp ... một cái gì đó như;

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

Stringifying hình ảnh sang một định dạng văn bản cơ sở-64 là tất cả tốt và tốt, nhưng nó sẽ mất một lượng nhỏ thời gian và chắc chắn không nén nó. Trong thực tế, nó sẽ có khả năng lớn hơn đáng kể so với hình ảnh thô. Rất tiếc, trình duyệt của bạn cũng sẽ không tải lên một lần tải lên. Họ tất nhiên có thể xử lý tải xuống gzipped. Bạn chắc chắn có thể thử làm một gzip của văn bản bằng cách sử dụng một số giải pháp JS thuần túy. Nhìn vào github bạn có thể tìm thấy những thứ như vậy - https://github.com/beatgammit/gzip-js Tuy nhiên, điều đó cũng sẽ mất một chút thời gian và không đảm bảo rằng phiên bản văn bản nén của hình ảnh nhỏ hơn JPEG thô bạn đính kèm.

Ứng dụng di động gốc có thể quyết định sử dụng một số mã JPEG hoặc PNG gốc trước khi gửi (về cơ bản resample hình ảnh) nếu thích hợp, nhưng thực hiện điều này trong JavaScript dường như có khả năng có vấn đề tại thời điểm này. Do Atwood của pháp luật (viết tất cả mọi thứ cuối cùng trong JavaScript) nó chắc chắn có thể được thực hiện nhưng vào thời điểm này vào giữa năm 2014 nó không phải là.

Answer 3

Là giải pháp thay thế cho giải pháp có lập trình - nếu hình ảnh của bạn đang được máy ảnh thiết bị tạo để tải lên thì tại sao không chỉ thay đổi độ phân giải của máy ảnh. Độ phân giải nhỏ nhất có thể nhỏ hơn 10x lớn nhất và điều này có thể phù hợp với nhiều tình huống.

Answer 4

Có một số thư viện thực hiện việc này cho bạn ở phía máy khách.

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