2

Estou utilizando uma função que captura um frame do vídeo para posteriormente defini-la como thumbnail.

function thumbnail()
    {
        var canvas = document.getElementById('thumb');
        $('#thumb').css('width',$('#video').css('width'));
        $('#thumb').css('height',$('#video').css('height'));

        var video = document.getElementById('video');
        canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, canvas.width, canvas.height);
    }

Este frame será definido pelo usuário, então toda vez que ele clicar em um determinado botão, essa função será chamada.

A função funciona corretamente, mas acontece que quando o determinado frame é replicado para o canvas, a imagem perde a qualidade e não fica como é no vídeo. Eis a imagem de exemplo: inserir a descrição da imagem aqui

Na esquerda é o vídeo sendo reproduzido, enquanto na direita é a thumb gerada depois do clique no botão. (A qualidade do vídeo não é das melhores, mas reparem na legenda que está bem definida e olhem como ela fica na imagem gerada pelo canvas).

Como faço para que a qualidade da imagem gerada seja fiel ao frame do meu vídeo?

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .