Picture returns low res after uploading.

[SimonIoa]

Hello i have a script that lets the user to take a photo and then upload it -this was the thread i created https://www.daniweb.com/programming/web-development/threads/508651/how-to-open-camera-and-take-a-photo-scriptBut the photo returns in low res all blurry etc.

I think this is the part i should change

var context = snapshot.getContext('2d');
            // Draw the video frame to the canvas.
            context.drawImage(player, 0, 0, snapshotCanvas.width, 
            snapshotCanvas.height);

any ideas?

[rproffitt]

This may be working as designed. That is, you put the image in that canvas, width and height so that's all the pixels your are going to get when you upload. Try a much larger width and height.

[SimonIoa]

ok should i try that on the Jquery script right? The one that uploads the image? Because i change it in html -the preview of the photo- from <canvas id="snapshot" width="120px" height="80px"></canvas> to <canvas id="snapshot" width="1024px" height="860px"></canvas>
and the resolution is good but i dont want the user to see that big of a preview - in width that is.

jquery

var player = document.getElementById('player'); 
            var snapshotCanvas = document.getElementById('snapshot');
            var captureButton = document.getElementById('takeSnap');

            var handleSuccess = function(stream) {
            // Attach the video stream to the video element and autoplay.
            player.srcObject = stream;
            document.getElementById("takeSnap").style.display = "block"; 
        };

        captureButton.addEventListener('click', function() {
            var context = snapshot.getContext('2d');
            // Draw the video frame to the canvas.
            context.drawImage(player, 0, 0, snapshotCanvas.width, 
            snapshotCanvas.height);

            //start webcam upload
            var webcamURL=apiBaseUrl+'api/webcamImageCreate';
            var canvas = document.getElementById('snapshot');
            $.post(webcamURL, {uid:uid, token:token,group_id:groupID, type: "data", image: canvas.toDataURL("image/png")},
            function(data)
            {
            if(data)
            {
                 var values=$("#uploadvalues").val();
                $("#webcam_preview").prepend(data);
                var X=$('.webcam_preview').attr('id');
                if($.trim(values).length>0)
                {
                var Z= X+','+values;   
                }
                else
                {
                var Z= X;  
                }

                if(Z!='undefined,')
                {
                $("#uploadvalues").val(Z);
                }

                var canvas = document.getElementById('snapshot');
                var context = canvas.getContext('2d');
                context.clear();
            }
            else
            {
                alert("error");
                return false;
            }
            });
            //end webcam upload

        });
        navigator.mediaDevices.getUserMedia({video: true})
      .then(handleSuccess);

[rproffitt]

@S, you can test my theory by doubling the width and height. If that works, well, back to the drawing board.

[SimonIoa]

doubling where?

[rproffitt]

A quick glance finds "<canvas id="snapshot" width="120px" height="80px"" so if you were to take a screen capture the image may be just that. 120 by 80.