asp mvc .net6 拍照

CREATE TABLE ExampleTable (
    ID int PRIMARY KEY,
    LongText nvarchar(max)
);

INSERT INTO ExampleTable (ID, LongText) VALUES (1, REPLICATE('a', 600000));



    public IActionResult CameraCapture()
    {
        return View("CameraCapture");
    }



    public IActionResult ProcessPhoto([FromBody] PhotoData data)
    {
        try
        {
            if (data != null && !string.IsNullOrEmpty(data.Photo))
            {
                int i =data.Photo.Length;
                string base64WithoutHeader = data.Photo.Substring(22);

                // Convert photo data from base64 string to byte array
                byte[] imageBytes = Convert.FromBase64String(base64WithoutHeader);

                // Save image to server (for example)
                string imagePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "images", "captured_photo.png");
                System.IO.File.WriteAllBytes(imagePath, imageBytes);

                return Ok("Photo received and saved successfully.");
            }
            else
            {
                return BadRequest("Photo data is empty.");
            }
        }
        catch (Exception ex)
        {
            return StatusCode(500, $"An error occurred while processing the photo: {ex.Message}");
        }
    }




@{
    ViewData["Title"] = "Camera Capture";
}

<h1>Camera Capture</h1>

<div>
    <video id="video" width="640" height="480" autoplay></video>
    <button id="capture">Capture</button>
    <canvas id="canvas" width="640" height="480" style="display: none;"></canvas>
    <img id="photo" src="" alt="Your captured photo will appear here." />
</div>

@section Scripts {
    <script>
        const video = document.getElementById('video');
        const canvas = document.getElementById('canvas');
        const photo = document.getElementById('photo');
        const captureButton = document.getElementById('capture');

        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function (stream) {
                video.srcObject = stream;
            })
            .catch(function (err) {
                console.log("An error occurred: " + err);
            });

        captureButton.addEventListener('click', function () {
            let context = canvas.getContext('2d');
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
            let photoData = canvas.toDataURL('image/png');

            // Display captured photo
            photo.src = photoData;

            // Send photo data to controller via AJAX
            fetch('/Home/ProcessPhoto', {
                method: 'POST',
                body: JSON.stringify({ photo: photoData }), // 发送 JSON 格式的数据
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(response => {
                    if (response.ok) {
                        console.log('Photo captured and sent successfully.');
                    } else {
                        console.error('Error sending photo: ' + response.statusText);
                    }
                })
                .catch(error => {
                    console.error('Error sending photo:', error);
                });
        });
    </script>
}

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值