C# MVC 站点 - 将画布保存到服务器上的图像文件 - 正在裁剪图像

Question

我正在创建一个管理员系统，用户（管理员）可以在其中创建用户。系统要求用户有照片。

我已经实现了文件上传，但我也在尝试提供使用网络摄像头拍摄图像并使用它的选项。

除了我设法保存在服务器上的图像在底部被裁剪之外，我几乎可以正常工作。

我认为这与我使用的画布/视频元素的大小有关。我尝试对更大的尺寸进行硬编码，但没有效果。

在 UI 中，图像是从视频元素中捕获的，并按照我想要的方式显示在画布上。 我添加了一个绑定到我的模型的文本框，因此我可以将画布作为文本传递给服务器。

代码如下：

<video id='v' class="employee-image-display"></video>
@Html.TextBoxFor(m => m.WebcamImageData, new { id = "tbWebcamImage" })
<a class="btn btn-block red" id="btnTakePhoto">
    <i class="fa fa-camera"></i>
</a>
<canvas id="canvas"></canvas>

Javascript：

function TakePhoto() {

    var canvas = $('#canvas')[0];
    //set canvas width/height
    canvas.width = 600;//v.videoWidth;
    canvas.height = 600;//v.videoHeight;

    canvas.getContext('2d').drawImage(v, 0, 0, 600, 600, 0, 0, 600, 600);

    //get image data from canvas
    var imgData = canvas.toDataURL("img/png");
    imgData = imgData.replace(/^data:image\/(png|jpg);base64,/, "");


    $('#tbWebcamImage').val(imgData);

}

function StartWebCam() {
    navigator.getUserMedia = (navigator.getUserMedia ||
                  navigator.webkitGetUserMedia ||
                  navigator.mozGetUserMedia ||
                  navigator.msGetUserMedia);
    if (navigator.getUserMedia) {
        navigator.getUserMedia(
           {
               video: true,
               audio: false
           },
 function (stream) {
     var url = window.URL || window.webkitURL;
     v.src = url ? url.createObjectURL(stream) : stream;
     v.play();
 },
 function (error) {
     alert('Something went wrong. (error code ' + error.code + ')');
     return;
 }
        );
    }
    else {
        alert('Sorry, the browser you are using doesn\'t support getUserMedia');
        return;
    }
}

$(document).ready(function () {

    $('#btnTakePhoto').on('click', function () {
        TakePhoto();
    });
    StartWebCam();
});

控制器动作：

if (!string.IsNullOrWhiteSpace(model.WebcamImageData))
{
    using (var stream = new MemoryStream())
    {
        using (var writer = new BinaryWriter(stream))
        {
            writer.Write(bytes);
            stream.Seek(0, SeekOrigin.Begin);

            string filepath = "~/Content/Images/Employees/test.png";

            System.IO.File.WriteAllBytes(Server.MapPath(filepath), bytes);
        }
    } 
}

如您所见 - 图像被裁剪（您应该能够看到我的胸部，如下图所示）。这是我单击“拍照”按钮时 UI 的样子：

如您所见 - 未裁剪。

谁能告诉我为什么我的图片被裁剪了？ - 错误是客户端还是服务器端？

Answer 1

你用的是什么浏览器？

尝试以下方法正确设置视频和画布尺寸。

var v = document.getElementById('v');
var c = document.getElementById('c');
var canvasWidth = 600;
var canvasHeight = 600;

// Wait until the video stream can play
v.addEventListener('canplay', function (e) {
    if (!isStreaming) {
        // videoWidth isn't always set correctly in all browsers
        if (v.videoWidth > 0) {
            canvasHeight = v.videoHeight / (v.videoWidth / canvasWidth)
        }
        v.setAttribute('width', canvasWidth);
        v.setAttribute('height', canvasHeight);
        c.setAttribute('width', canvasWidth);
        c.setAttribute('height', canvasHeight);
        isStreaming = true;
    }
}, false);

还可以让您的代码更跨浏览器友好...

// Cross browser
navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

if (navigator.getUserMedia) {
    // Request access to video only
    navigator.getUserMedia(
                {
                    video: true,
                    audio: false
                },
                function (stream) {
                    // Cross browser checks
                    var url = window.URL || window.webkitURL;
                    v.src = url ? url.createObjectURL(stream) : stream;
                    // Set the video to play
                    v.play();
                },
                function (error) {
                    alert('Something went wrong. (error code ' + error.code + ')');
                }
    );
}
else {
        alert('Sorry, the browser that you are using isn\'t supported.');
        return;
     }

编辑：对于上下文，请尝试以下操作：

var con = c.getContext('2d');
con.drawImage(v, 0, 0, canvasWidth, canvasHeight);