1

我正在使用 jQuery 在页面加载时捕获网络摄像头提要。

var video = document.querySelector("#videoElement");
var media;
var canvas = document.querySelector('canvas');
var x = 0.5;
var y = 0.30;
var ctx = canvas.getContext('2d');
ctx.scale(x, y);
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

var xurl = 'http://localhost:8080/xxx/';

function snapshot() {
    if (media) {
        ctx.drawImage(video, 0, 0);
        var rdata=canvas.toDataURL('image/png');

        $.ajax({
            url: xurl,
            type: "POST",
            crossDomain: true,
            data: rdata,
            dataType: "json",
            success: function(response) {
                var resp = JSON.parse(response)
                console.log(resp.status);
            },
            error: function(xhr, status) {
                console.log("error");
            }
        });

    }
}
canvas.addEventListener('click', snapshot, false);
if (navigator.getUserMedia) {
    navigator.getUserMedia({
        video: true
    }, handleVideo, videoError);
}

function handleVideo(stream) {
    media = stream;
    video.src = window.URL.createObjectURL(stream);
}

function videoError() {
}

我无法解决以下问题：

  • 提取到画布的图像，我需要将图像重新缩放到与画布相同的大小。但只显示了图像的一部分。即使增加了画布的大小，图像也会按比例放大，但部分仍然相同。我需要在同一帧中显示完整的图像。
  • 当我尝试使用 AJAX 通过网络发送图像时，图像有点失真（水平拉伸）

任何人都可以在正确的方向上给我一个很好的推/踢我做错了什么..？

4

0 回答 0