Question

我正在使用一个简单的webrtc快照片段

function snap() {
    var snapshot = document.getElementById("snapshot"),
         video = document.querySelector("video");
    snapshot.getContext("2d").drawImage(video, 0, 0, snapshot.width, snapshot.height);
    console.log(snapshot.toDataURL("image/png"));
}

来自：https://lincolnloop.com/blog/what-webrtc/

我的问题是snpashot总是300x * 150px大小！

如何让它更大？

Answer 1

HTML画布的默认大小为300px x 150px。

无论您在drawImage函数中放置什么参数大小，快照都只能填充画布的大小。如果将画布设置为不同的大小，则此代码将填充该空间（只要纵横比相同）。试试这个画布尺寸，例如：

<canvas id="snapshot" style="width:500px; height:250px;"></canvas>

Answer 2

调整画布元素本身的大小：

// for example, resize the canvas element to 640x480
snapshot.width=640;
snapshot.height=480;

webrtc和canvas：为什么它总是显示为300px * 150px

2 个答案: