HTML 5 Canvas drawImage正在降低原始视频的质量

时间:2017-08-02 09:48:05

标签: javascript html5 video canvas

我想在应用程序的两个区域中显示相同的视频。所以使用canvas工作正常,但原始视频的质量下降但画布视频质量很好。

var canvas = document.getElementById('shrinkVideo');
var context = canvas.getContext('2d');
var video = document.getElementById('mainVideo');

video.addEventListener('play', () => {
            // canvas.width = 270;
            // canvas.height = 480;
           this.draw(video, context, canvas.width,canvas.height);
        }, false);

   draw(v, c, w, h) {
        if (v.paused || v.ended) return false;
        c.drawImage(v, 0, 0, w, h);
        setTimeout(this.draw, 20, v, c, w, h);
    }

这是我的同步两个视频的代码,它工作正常,但主视频'质量下降。

但如果我删除所有画布代码并只播放主视频'质量得到保持,但使用帆布质量下降。

Expected Result这是未添加画布代码时视频的输出

Actual Result这是我在添加画布代码后得到的输出

提前致谢

1 个答案:

答案 0 :(得分:1)

我之所以回答这个问题,是因为我以为自己遇到了同样的问题。

  • 我在一个元素上具有1080p信号源(来自HDMI捕获设备的高清内容,该设备在浏览器中注册为网络摄像头)
  • 我有一块1920x1080的画布,并且使用的是classs = int(result1[1]); health = int(result1[2]); mana = int(result1[3]); defense = int(result1[4]); attack = int(result1[7]); critical = int(result1[8]) -正如上面的评论者所提到的,我认为至关重要的是,您只能绘制原始高度/宽度值的良好倍数。
  • 我尝试在Chrome / Brave中反复使用ctx.drawImage(video, 0, 0, 1920, 1080)和各种imageSmoothingEnabled设置;最终,我发现这些设置没有太大差异。
  • 我的Web应用程序上的画布仍然模糊不清-甚至无法读取 屏幕上的〜24pt字体,基本上根本无法使用视频

我对模糊的视频感到沮丧,因此我在“干净的套件”中重新创建了完整的测试,现在我又遇到 no 扩展问题了-我不知道我的主要应用程序是什么所做的工作有所不同,但是在此示例中,您可以连接任何1080p / 720p设备,并看到它很好地缩放到1080p(如果要缩放到720p,请在JS文件中更改分辨率)

https://playcode.io/543520

imageSmoothingQuality

在下面,您可以使用 const WIDTH = 1920; const HEIGHT = 1080; const video = document.getElementById('video1'); // Video element const broadcast = document.getElementById('broadcast'); // Canvas element broadcast.width = video.width = WIDTH; broadcast.height = video.height = HEIGHT; let ctx = broadcast.getContext('2d') onFrame = function() { ctx.drawImage(video, 0, 0, broadcast.width, broadcast.height) window.requestAnimationFrame(onFrame); } navigator.mediaDevices .getUserMedia({ video: true }) .then(stream => { window.stream = stream console.log('got UM') video.srcObject = stream; window.onFrame(); }) 绘制我的视口,其中包含“视频”和“画布”元素(均为1080p,缩放至〜45%,因此适合)。内容被缩小,因此您可以看到抗锯齿,但是如果您加载示例并单击“画布”,它将进入“全屏”状态,并且质量还不错-我在源计算机上播放了1080p Youtube视频,并且在全屏1080p画布元素上看不到任何区别。 enter image description here