的WebRTC和帆布：爲什麼它始終顯示爲300像素* 150像素

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 * 150像素。大小！

如何讓它變大？

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;