Как реализовать возможность выделения области при фотографировании и затем ее сохранения?

Question

[burtellbee]

Добрый день!
При использовании метода getUserMedia(), можно захватывать изображение с камеры, т.е. как бы фото делать. Вот пример - Захват кадров.
Как можно реализовать функционал захвата кадра только выделенной области как например CROP API (обрезка картинок)?

Comments

[twobomb]

https://www.html5canvastutorials.com/tutorials/htm...

[burtellbee]

twobomb, т.е. например поверх видеопотока наложить елемент с возможностью изменения размера и основываясь на его размере резать канвас, а затем сохранять как изображение?

[twobomb]

burtellbee, Элементы выбора рамки для обрезки можно как угодно сделать, наложить сверху еще один канвас или сделать на html элементах не важно.
Вот у вас пример из документации

function takepicture() {
    var context = canvas.getContext('2d');
    if (width && height) {
      canvas.width = width;
      canvas.height = height;
      context.drawImage(video, 0, 0, width, height);
    
      var data = canvas.toDataURL('image/png');
      photo.setAttribute('src', data);
    } else {
      clearphoto();
    }
  }

По сути тут создаем канвас размера нашей области обрезки и рисуем на нём нашу область обрезки. Тоесть в drawImage еще 4 аргумента области передаем, а canvas.width и canvas.height также должны быть теми же агрументами ширины и высоты которые передаем в drawImage.

[twobomb]

burtellbee, Еще один вариант скрываем элемент video и показываем элемент canvas, полностью передаем видеопоток на canvas и по сути тут уже мы можем поверх потока рисовать рамки.
P.S. Когда то так помоему делал когда игрался с либой распознавания лиц, просто квадрат вокруг лица рисовал на потоке.

Answer 1

[Владимир Коротенко]

Вы создаёте картинку на основе File потом делаете интерфейс для обрезки, потом получаете битовый поток, который и отправляете на сервер. Браузер сам заботится об упаковке и прочем. Подробности на mdn