javascript- unable to convert canvas to image data

Question

guys!

I'm trying to make a demo using which a user will be able to capture an image from the web camera enabled through his browser and this image will be saved in the backend by passing it to a PHP service using AJAX call.

I'm able to capture as canvas but not being to convert it into image data. I'm getting canvas is undefined error

Setup is pretty simple.

HTML

<video id="videoElement"  autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" style="display:none" ></canvas>

JAVASCRIPT

    // Grab elements, create settings, etc.
    var video = document.getElementById('videoElement');

    // Get access to the camera!
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        // Not adding `{ audio: true }` since we only want video now
        navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
            video.src = window.URL.createObjectURL(stream);
            video.play();
        });
    }

    // Elements for taking the snapshot
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var video = document.getElementById('videoElement');

    // Trigger photo take
    document.getElementById("snap").addEventListener("click", function() {
      var cann= context.drawImage(video, 0, 0, 640, 480); //draw canvas
    //then convert canvas to image so i can obtain dataurl
    //and pass it to another function using AJAX
      var img= convertCanvasToImage(cann);
    console.log(img);
    });

// Converts canvas to an image
function convertCanvasToImage(canvas) 
{
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

I'm pretty new to this field. I have one more question. Will this work on latest browsers? Can anyone help me figure out the mistake I made?

FIDDLE

Reference: https://davidwalsh.name/browser-camera

https://davidwalsh.name/convert-canvas-image

score 5 · Accepted Answer · answered Dec 15 '16 at 06:12

5

Just call this

 var img= convertCanvasToImage();

function convertCanvasToImage() 
{
  var image = new Image();
  image.src = canvas.toDataURL("image/png");
  return image;
}

No need to pass canvas as you defined canvas above. But if you have convertCanvasToImage function in another file then you can use

var img= convertCanvasToImage(canvas);

answered Dec 15 '16 at 06:12

Manoj Lodhi

978
4
10

It's in the same file. – Smokey Dec 15 '16 at 06:17
Then first solution is best for you :) . Hope it heloped you – Manoj Lodhi Dec 15 '16 at 06:18
Is there a way to improve the quality of the captured shot? It's of poor quality now. @Manoj Lodhi – Smokey Dec 15 '16 at 06:19
@SajeevC define "poor quality"? The quality depends on your webcam – Oscar Siauw Dec 15 '16 at 06:20
1

yes you can do with canvas.toDataURL("image/png", qualityValue); . – Manoj Lodhi Dec 15 '16 at 06:21
Image is blurry. I have used the same web camera to capture better quality image @Oscar Siauw – Smokey Dec 15 '16 at 06:21
The default value of quality it takes is 0.92. So you can use 1.0 for some better quality. – Manoj Lodhi Dec 15 '16 at 06:28

score 1 · Answer 2 · edited Jan 06 '17 at 06:18

1

This may help.

function demoFromHTML() {
    html2canvas(document.getElementById("talltweets"), {
        onrendered: function(canvas) {
            var imageData = canvas.toDataURL('image/png',1.0); 

        }
    });
}

edited Jan 06 '17 at 06:18

Pang

9,564
146
81
122

answered Dec 15 '16 at 06:15

Chirag Patel

187
2
17

What does 1.0 indicate in var imageData = canvas.toDataURL('image/png',1.0); @chirag – Smokey Dec 15 '16 at 06:20
It is indicate a image resolution of genrating images – Chirag Patel Dec 15 '16 at 06:22
is 1.0 the highest value it can take? @chirag – Smokey Dec 15 '16 at 06:25
Yes 1.0 is the highest value. – Smokey Dec 15 '16 at 06:26
1

The default value of quality it takes is 0.92. So you can use 1.0 for some better quality. – Manoj Lodhi Dec 15 '16 at 06:28
Yes, you can adjust as per your required. – Chirag Patel Dec 15 '16 at 08:32

score 0 · Answer 3 · answered Dec 15 '16 at 06:09

0

Pass canvas object instead of cann

var img= convertCanvasToImage(canvas);

answered Dec 15 '16 at 06:09

Oscar Siauw

483
2
8

Endless · Answer 4 · 2016-12-15T20:39:20.017

0

If you can try to avoid dataURL and use blob instead - it will save you more memory and load images faster

$canvas.toBlob(function(blob){
  var url = URL.createObjectURL(blob)
  var img = new Image

  img.onload = function() {
    URL.revokeObjecURL(this.src)
  }
  img.src = url
  
  console.log(blob)
  console.log(url)
})

<canvas id="$canvas">

there is polyfills you can use to support canvas#toBlob

edited Dec 15 '16 at 20:39

answered Dec 15 '16 at 20:33

Endless

34,080
13
108
131

javascript- unable to convert canvas to image data

4 Answers4

Linked