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

伙计们！

我正在尝试制作一个演示，用户可以通过他的浏览器从网络摄像头捕获图像，这个图像将通过使用AJAX调用传递给PHP服务保存在后端。

我能够捕获canvas但不能将其转换为图像数据。 我得到的canvas is undefined error

安装非常简单。

HTML

  Snap Photo  

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

JavaScript Canvas Image Conversion

Answer 1

请打个电话

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

无需像上面定义的canvas那样传递canvas。 但是如果你在另一个文件中有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) })