javascript-无法将画布转换为图像数据 [英] javascript- unable to convert canvas to image data

问题描述

伙计们！

我正在尝试演示一个示例，用户可以使用该示例从通过其浏览器启用的网络摄像头捕获图像，并将该图像通过使用AJAX调用传递给PHP服务而保存在后端.

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.

我能够捕获为画布，但不能将其转换为图像数据. 我正在canvas is undefined error

I'm able to capture as canvas but not being to convert it into image data. I'm getting 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;
}

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

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?

字段

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

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

推荐答案

只需调用此

 var img= convertCanvasToImage();

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

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

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

这篇关于javascript-无法将画布转换为图像数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！