How to upload a canvas to the server for QR code decoding - HTML5, jquery

Question

1.00/5 (1 vote)

See more:

, +

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.

ASP.NET

<%@ 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>

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.

Posted 23-Aug-16 4:47am

dinesh_redhawk

Updated 24-Aug-16 1:55am

Add a Solution

Comments

Richard Deeming 23-Aug-16 10:54am

What does "not working" mean?

Are you getting an error in the browser's error console?

Are you getting an error response from the server?

Have you looked at the network requests to try to diagnose the problem?

[no name] 23-Aug-16 11:05am

Hi Richard, thanks for response. Nothing is happening on call of UploadImage. Its also not converting and saving the image. What could be the issues. No error response.

Richard Deeming 23-Aug-16 11:23am

So what errors are shown in the browser's error console?

[no name] 23-Aug-16 13:05pm

WebForm1.aspx:66 Uncaught TypeError: Cannot set property 'src' of null

[no name] 23-Aug-16 13:07pm

can u provide the code to covert
document.querySelector('img').src = canvas.toDataURL('image/png');

into image and upload to server.??

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2016-08-24T01:55:00

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.