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: /browser-camera

/convert-canvas-image

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

• javascript
• jquery
• html
• canvas

4 Answers 4

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);

This may help.

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

        }
    });
}

Pass canvas object instead of cann

var img= convertCanvasToImage(canvas);

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