javascript-无法将画布转换为图像数据

Question

伙计们！

我正在尝试制作一个演示，利用该演示，用户将能够从通过浏览器启用的网络摄像机中捕获图像，并将该图像通过使用AJAX调用传递给PHP服务而保存在后端。

我能够捕获为画布，但不能将其转换为图像数据。 我收到canvas is undefined error

设置非常简单。

的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;
}

我是这个领域的新手。 我还有一个问题。 可以在最新的浏览器上使用吗？ 谁能帮助我找出我犯的错误？

小提琴

参考： https : //davidwalsh.name/browser-camera

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

Answer 1

叫这个

 var img= convertCanvasToImage();

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

在上面定义画布时，无需传递画布。 但是，如果您在另一个文件中具有convertCanvasToImage函数，则可以使用

var img= convertCanvasToImage(canvas);

Answer 2

这可能会有所帮助。

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

        }
    });
}

Answer 3

传递canvas对象而不是cann

var img= convertCanvasToImage(canvas);

Answer 4

如果您可以避免使用dataURL并改用blob-这样可以节省更多内存并更快地加载图像

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

有可以用来支持canvas＃toBlob的polyfill