Изменение размера и размера холста до размера

Мне нужно воспроизвести файл локального видео в CANVAS. CANVAS находится внутри div, который имеет максимальную ширину и высоту. Если я попытаюсь изменить размер видео и CANVAS на этот размер, вместо изменения размера видео обрезается. Как изменить размер?Изменение размера и размера холста до размера

HTML

<div> 
<video id="video" controls> 
<source id="videoSource" type="video/ogg"> 
</video> 
</div>

if (videoInfo.height > 480)  
    { 
     var AR = videoInfo.width/videoInfo.height; 
     videoInfo.height = 480; 
     videoInfo.width = 480*AR; 
    } 

if (videoInfo.whidth > 848) 
{ 
    var AR = videoInfo.width/videoInfo.height; 
    videoInfo.width = 848; 
    videoInfo.height = 848/AR; 
} 

video.setAttribute('width', videoInfo.width); 
video.setAttribute('height', videoInfo.height + VIDEO_HEIGHT_SHIFT); 

displayedCanvas.setAttribute('width', videoInfo.width); 
displayedCanvas.setAttribute('height', videoInfo.height);

источник

2014-12-02 Raúl Gombru

У вас есть опечатка на> 848 линии 'whidth' должен быть' width'. Dunno, если это произошло, когда вы набрали вопрос или если это фактический код. – K3N

Упс, да, правда, спасибо. В любом случае, это не проблема –

К сожалению, здесь слишком мало кода (что такое видеоинформация, как рисовать кадр, где находится элемент холста, как создается холст ..). Не могли бы вы создать скрипку (или встроенную демонстрацию), показывающую ваш сценарий? (Я знаю, что ссылка на видео может быть немного сложной, но есть видео с открытым исходным кодом, которые вы можете использовать вместо своего фактического видео) – K3N

Я уже решил! Вы должны использовать новые размеры видео при рисовании его на холсте, как это:

ctx.drawImage(video, 0, 0, videoInfo.width, videoInfo.height);

источник

2014-12-02 15:51:14

Изменение размера и размера холста до размера

ответ

Смежные вопросы