Изменить размер Canvas

111

08 июня 2019, 17:20

Цель:

Сделать приложение для снимка с веб-камеры. По нажатию кнопки оно будет работать через video, отрисовывать на canvas текущий кадр из video и передавать его в base64 изображению.

Проблема:

Приложение должно работать на разных платформах. Ширина блока video варьируется в зависимости от размера экрана.

Тег canvas нормально работает только если указать внутри тега параметры width и height, иными способами он меняет свой размер, но при этом все равно рисует изображение 300х150.

Вопрос:

Можно ли какими либо методами заставить canvas изменить свой размер и при этом он бы изменил свою максимальную площадь для отрисовки изображения.

При обычной изменении $( 'canvas' ).height( value ).width( value ) размер канваса меняется (при просмотре элемента в браузере), но площадь для рисования остается у него 300х150.

Answer 1

У меня есть проверка, которой я пользуюсь каждый раз, когда делаю что-то на canvas.

    var width = window.innerWidth;
    var height = window.innerHeight;
    var normal_width = 1000;
    var normal_height = 800;
    if(width/height > normal_width / normal_height){
        $('canvas').css('height', height);
            $('canvas').css('width', height / normal_width * normal_height);
        }
    else{
        $('canvas').css('width', width);
        $('canvas').css('height', width / normal_height * normal_width);
    }

Не забывайте, что это надо запускать в цикле и подключить Jquery!