どのようにasp.net C＃で画像のバイトでHTML5のキャンバス画像を変換する？

-1

次のコードの助けを借りてキャンバスに画像をキャプチャしました（外部ウェブカムを使用）。次に、キャンバスイメージをフォルダに保存しようとしました。しかし、私はそれが適切なフォーマットではなかったので、保存されたイメージを開くことができませんでした。どのようにasp.net C＃で画像のバイトでHTML5のキャンバス画像を変換する？

キャンバスイメージからイメージバイトを取得してイメージをフォルダに保存する方法、またはキャンバスイメージを直接フォルダに保存する方法はありますか？

MyCam.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>

MyCam.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); 
    } 
}

出典

2017-10-11 Rasik

あなたは、dataURLとして画像を得るブロブ/バイナリファイルとして取得し、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}) 
})

出典

2017-10-11 20:41:45 Endless

私はaspxページ上の画像コントロールのイメージを持って、がどのようにバイト単位でこの画像を変換するには？私はまた、あなたのコードを試してみました – Rasik

... canvas.toBlob（機能（ブロブ）{ するvar FD =新しいいるFormData（）; fd.append（ 'イメージ'、ブロブ、 'image.png'）; のvar hiddenControl = '％= hidden1.ClientID％>'; document.getElementById（hiddenControl）.value = fd; このデータをバイト単位で変換する方法はありますか？ – Rasik

'getElementById（hiddenControl）.value = fd'できませんFormDataはajaxでのみ提出できます – Endless

どのようにasp.net C＃で画像のバイトでHTML5のキャンバス画像を変換する？

答えて

関連する問題