如何将画布上传到服务器进行QR码解码 - HTML5,jquery [英] How to upload a canvas to the server for QR code decoding - HTML5, jquery

查看:90
本文介绍了如何将画布上传到服务器进行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('data:image/png;base64,', '');

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

推荐答案

.ajax({
type:' POST'
url: .. /../ Home / UploadImage
data:' {imageData: ' + image + ' }'
contentType:' application / json; charset = utf-8'
dataType:' json'
success:function(msg){
alert(' 图片保存成功!');
}
});
}
函数videoError(e){
// 做点什么
}
// setInterval(snapshot,200);
< / script >
< / body >
< / html >
.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.


再一次, document.querySelector() [ ^ ]返回第一个匹配元素。如果没有匹配元素,则返回 null



您的文档不包含< img> 元素,所以 document.querySelector('img')将返回 null



然后尝试在返回的值上设置 .src 属性,然后获取错误,因为值 null



这与你的问题完全相同昨天 [ ^ ],修复正好是相同:在文档中添加< img> 标记,或删除该行脚本。
Once again, document.querySelector()[^] returns the first matching element. If there is no matching element, it returns null.

Your document does not contain an <img> element, so document.querySelector('img') will return null.

You then attempt to set the .src property on the returned value, and get an error because the value is null.

This is exactly the same problem you had yesterday[^], and the fix is exactly the same: add an <img> tag to your document, or remove that line of script.


这篇关于如何将画布上传到服务器进行QR码解码 - HTML5,jquery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆