Question

我正在为锦标赛开发一个非常简单的角度应用程序，我们想要为参赛者管理一些统计数据。到目前为止一直很好，并且有角度和火焰基地的发展。

现在我想使用图片让参赛者在转换到Base64之前将其缩小，最后将其上传到firebase。我在网站上使用智能手机拍摄参赛者的照片。

我的问题是如何将智能手机拍摄的照片向下扫到尽可能小的面部，并尽量减少我和现场用户使用的3g / 4g

你有这方面的经验吗？这对Firebase来说是否可以使用长串（我对Firebase服务很新）？

Answer 1

如果您将上传的图片放到canvas元素上，调整画布大小，然后将其转储到base64数据网址，您应该可以将其发布到后端而不会有太多麻烦。

要获取文件输入内容并将它们放到画布上，您将：

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" />

并且您无需在任何地方显示临时画布或图像，以便全部工作，它们只是用来抓取尺寸并对图像进行操作。

angularjs从手机缩小图片

1 个答案: