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

그런 다음, dataURL로 이미지를 얻을 BLOB/이진 파일로 얻을 안

출처

2017-10-11 Rasik

는 FormData을 사용하여 업로드 와 약간의 아약스 (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 (기능 (BLOB) { var에 FD = 새로운 FormData(); fd.append ('이미지'방울 '의 image.png'); var에 hiddenControl = '<% = hidden1.ClientID %>'; document.getElementById (hiddenControl) .value = fd; 바이트 단위로이 데이터를 변환하는 방법은 무엇입니까? – Rasik

당신은'getElementById (hiddenControl) .value = fd' 할 수 없습니다 FormData는 아약스와 함께 제출할 수 있습니다 – Endless

asp.net C#에서 이미지 바이트 HTML5 캔버스 이미지를 변환하는 방법?

답변

관련 문제