angularjs уменьшит картинку с мобильного телефона

Question

angularjs уменьшит картинку с мобильного телефона

0

Я разрабатываю очень простое угловое приложение для турнира, потому что мы хотим управлять статистикой для участников. До сих пор так хорошо, и он развивается с угловой и огневой базой.

Теперь я хочу использовать изображение для конкурсантов, масштабируя его до перехода на Base64 и, наконец, загружаю его в firebase. Я использую на своем смартфоне, чтобы делать снимки у участников.

Мой вопрос заключается в том, как отсканировать снимок, сделанный смартфоном, до такой степени, насколько это возможно, увидеть лицо и свести к минимуму использование 3g/4g для моего и пользователя на сайте.

есть ли у вас некоторый опыт в такой ситуации? И это нормально для Firebase для taka long string (я совершенно новый для Firebase-сервисов)?

imalik8088 28 июнь 2015, в 23:28

Источник

Теги:

javascript

firebase

angularjs

image

mobile

1 ответ

Ещё вопросы

Alexander Hripak · Answer 1 · 2015-06-29T16-31-00.000Z

Если вы поместили загруженное изображение в элемент canvas, измените размер холста и затем выгрузите его на URL-адрес данных 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" />

И вам не нужно, чтобы временные холсты или изображения появлялись где угодно, чтобы все это работало, они просто присутствуют, чтобы захватить размеры и делать манипуляции на изображении.