angularjs縮小手機圖片

Question

如果我們想為參賽者管理一些統計信息，那么我正在為錦標賽開發一個非常簡單的角度應用程序。 到目前為止，一切都很好，並且已經隨着角度和火力的發展而發展。

現在，我想為參賽者使用圖片，然后縮小圖片，然后再轉換為Base64，最后將其上傳到Firebase。 我正在現場使用我的智能手機從參賽者那里拍照。

我的問題是如何將智能手機拍攝的照片縮放到盡可能小的外觀，並最大限度地減少我和用戶在現場使用3g / 4g的情況。

您在這種情況下有經驗嗎？ Firebase將其定為長字符串是否可以（我對Firebase服務還很陌生）？

Answer 1

如果將上載的圖像放在canvas元素上，調整畫布的大小，然后將其轉儲到base64數據URL，則應該可以輕松地將其發布到后端。

要獲取文件輸入內容並將其放在畫布上，您將：

var tempImage  = new Image();
var fileReader = new FileReader();
var canvas     = angular.element('canvas').eq(0);

// Step: 3: Once the image is loaded, set up the contents on a canvas, resize, and export to data url for storage.
tempImage.onload = function() {
  canvas.width  = tempImage.width;
  canvas.height = tempImage.height;

  var canvasContext = canvas.getContext('2d');
  canvasContext.drawImage(tempImage, 0, 0, 400, 400);

  // Send this to firebase
  console.log(canvasContext.toDataURL('image/png'));
};

// Step 2: Once the file is selected, we'll load the result into a temporary image.
fileReader.onload = function() {
  tempImage.src = fileReader.result;
};

// Step 1: Wait for file to be selected via the input.
angular.element('input[type="file"]').on('change', function() {
  var image = angular.element(this).eq(0).input.files[0];
  fileReader.readAsDataURL(image);
});

這不能處理調整為不同寬高比的大小，但是您可以算出該寬高比的數學值。 如果您需要更復雜的裁剪界面，則不妨引入http://fengyuanchen.github.io/cropper之類的庫的幫助，該庫可以以更優雅的方式完成相同的工作。

在移動方面，您可能希望文件輸入支持相機，因此在編寫標記時可以執行以下操作：

<input type="file" accept="image/*" capture="camera" />

而且，您不必讓臨時畫布或圖像出現在任何地方都可以正常工作，它們只是存在以獲取尺寸並在圖像上進行操作。