如何在 asp.net C# 中以图像字节转换 HTML5 画布图像？

Question

我借助以下代码（使用外部网络摄像头）在画布中捕获了一张图像。 然后，我尝试将该画布图像保存在一个文件夹中。 但是，我无法打开该保存的图像，因为它的格式不正确。

那么，如何从画布图像中获取图像字节以便将图像存储在文件夹中，或者直接将画布图像保存在文件夹中？

我的相机.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="myCam.aspx.cs" Inherits="html_Web_Cam_test.simpleWebCam.myCam" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">    <title></title> </head>

<body>    <form id="form1" runat="server">    <div style="border:solid">

<video id="video" width="400" height="300"></video>

<%--onserverclick="savePhoto"--%>
<input runat="server" type="button" id="startBtn" value="Start WebCam" onclick="startWebcam();"/>
<input runat="server" type="button" id="stopBtn" value="Stop WebCam" onclick="stopWebcam();"/>
<input runat="server" type="button" id="capture" value="Take Photo"/>

<asp:Button runat="server" ID="saveBtn" Text="Save Photo" OnClick="saveBtn_Click"/>

<canvas id="canvas" width="400" height="300" controls autoplay></canvas>

<img runat="server" src="" id="img1" width="300" height="250" alt="no Image"/>

<asp:Label runat="server" ID="lbl1"></asp:Label>

<asp:HiddenField runat="server" ID="hidden1"/>
</div>    </form>

<%--<script src="takePhoto.js"></script>--%>
</body>

<script>
var video;
var webcamStream;
var video = document.getElementById('video'),
canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
vendorUrl = window.URL || window.webkitURL;

navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

navigator.getMedia({
    video: true,
    audio: false
}, function (stream) {
    video.src = vendorUrl.createObjectURL(stream);
    video.play();
}, function (error) {
});

document.getElementById('capture').addEventListener('click', function() {
    context.drawImage(video, 0, 0, 400, 300);
    //convertCanvasToImage(canvas);

    var image = document.getElementById('img1');
    image.src = canvas.toDataURL("image/png");

    var dataURL = canvas.toDataURL("image/png");

    var vrrr = canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, '');
    var hiddenControl = '<%= hidden1.ClientID %>';
    document.getElementById(hiddenControl).value = vrrr;

    return vrrr;
});

function startWebcam() {
    if (navigator.getUserMedia) {
        navigator.getUserMedia({
            video: true,
            audio: false
        }, function (localMediaStream) {
            video = document.querySelector('video');
            video.src = window.URL.createObjectURL(localMediaStream);
            webcamStream = localMediaStream;
        }, function (err) {
            console.log("The following error occured: " + err);
        });
    } else {
        console.log("getUserMedia not supported");
    }
}

function stopWebcam() {
    webcamStream.stop();
}
</script> </html>

我的相机.aspx.cs

private static byte[] ConvertHexToBytes(string hex)
{
    byte[] bytes = new byte[hex.Length / 2];
    for (int i = 0; i < hex.Length; i += 2)
    {
        bytes[i / 2] = Convert.ToByte(hex.Substring(i, 2), 16);
    }
    return bytes;
}

protected void saveBtn_Click(object sender, EventArgs e)
{
    using (StreamReader reader = new StreamReader(Request.InputStream))
    {
        string str1 = Server.UrlEncode(reader.ReadToEnd());

        string imageName = "Image_" + DateTime.Now.ToString("dd-MM-yy hh-mm-ss");
        string imagePath = string.Format("~/SavedPics/{0}.png", imageName);

        File.WriteAllBytes(Server.MapPath(imagePath), ConvertHexToBytes(str1));

        byte[] visImageBytes = ConvertHexToBytes(str1);
    }
}

Answer 1

您不应该将图像作为 dataURL 获取，将其作为 blob/二进制文件获取，然后使用FormData和一些 ajax (xhr / fetch ) 上传它。 由于无法将文件附加到文件输入^{[ 1 ]}

canvas.toBlob(function(blob){
  var fd = new FormData()
  fd.append('image', blob, 'image.png')
  // fetch(uploadUrl, {method: 'post', body: fd})
})

如何在 asp.net C# 中以图像字节转换 HTML5 画布图像？

问题描述

1 个解决方案

解决方案1
0 2017-10-11 20:41:45

如何在 asp.net C# 中以图像字节转换 HTML5 画布图像？

问题描述

1 个解决方案

解决方案1 0 2017-10-11 20:41:45

解决方案1
0 2017-10-11 20:41:45