如何将画布上传到服务器进行QR码解码 - HTML5，jquery

本文介绍了如何将画布上传到服务器进行QR码解码 - HTML5，jquery的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何将画布上传到服务器进行二维码解码？

函数快照正在拍照，上传图像应该将画布作为图像上传到服务器。但是UploadImage（）不起作用。

请指导。

How to upload a canvas to the server for QR code decoding?
The function snapshot is taking photo and the uploadimage should upload the canvas as image to server. But UploadImage() is not working.
Please guide.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Webscanner.WebForm1" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Display Webcam Stream</title>
    <style>
        #container {
            margin: 0px auto;
            width: 500px;
            height: 375px;
            border: 10px #333 solid;
        }
 
        #videoElement {
            width: 500px;
            height: 375px;
            background-color: #666;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
        <video autoplay="true" id="videoElement"></video>
    </div>
    </form>
        <canvas id="canvas" width="800" height="600"></canvas> <!--Canvas to draw image -->
        <button id="startsnap" onclick="snapshot()">Snap Photo</button>
    <button id="stopsnap" onclick="myStopFunction()">Stop Photo</button>
    <script>
        var video = document.querySelector("#videoElement");

        var canvas = document.querySelector('canvas');
        var ctx = canvas.getContext('2d');
        var localMediaStream = null;

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

        if (navigator.getUserMedia) {
            navigator.getUserMedia({ video: true }, handleVideo, videoError);
        }
        else
            alert('HTML5 getUserMedia() is not supported on your browser');

        function handleVideo(stream) {
            video.src = window.URL.createObjectURL(stream);
            localMediaStream = stream;
        }

        function snapshot() {
            if (localMediaStream) {
                ctx.drawImage(video, 0, 0);
                // "image/webp" works in Chrome.
                // Other browsers will fall back to image/png.
                document.querySelector('img').src = canvas.toDataURL('image/png');
                UploadImage();
            }
        }

        function UploadImage()
        {
            var image = document.getElementById("canvas").toDataURL("image/png");
            image = image.replace(', '');

            $.ajax({
                type: 'POST',
                url: "../../Home/UploadImage",
                data: '{ "imageData" : "' + image + '" }',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (msg) {
                    alert('Image saved successfully !');
                }
            });
        }
        function videoError(e) {
            // do something
        }
        //setInterval(snapshot, 200);
    </script>
</body>
</html>

我的尝试：

函数快照正在拍照，uploadimage应该将画布作为图像上传到服务器。但是UploadImage（）无效。

What I have tried:

The function snapshot is taking photo and the uploadimage should upload the canvas as image to server. But UploadImage() is not working.

UploadImage

如何将画布上传到服务器进行QR码解码 - HTML5，jquery

问题描述

推荐答案