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

Question

大家好！

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

我能够捕获画布，但无法将其转换为图像数据。我得到了“canvas未定义错误”的提示。

设置非常简单。

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

我在这个领域还比较新，还有一个问题。最新版本的浏览器能否支持这个？有人能帮我找出我所犯的错误吗？

FIDDLE

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

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

- Smokey

Answer 1

只需调用此功能。

 var img= convertCanvasToImage();

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

不需要传递画布，因为您已经在上面定义了画布。但是，如果您有另一个文件中的convertCanvasToImage函数，则可以使用。

var img= convertCanvasToImage(canvas);

- Manoj Lodhi

---

那么第一个解决方案最适合您 :) 希望它对您有所帮助。 - Manoj Lodhi

@SajeevC 定义“质量差”是什么意思？质量取决于您的网络摄像头。 - Oscar Siauw

是的，您可以使用canvas.toDataURL("image/png", qualityValue)来实现。 - Manoj Lodhi

图像模糊。我已经使用同一网络摄像头拍摄了更好的质量图像@Oscar Siauw - Smokey

质量的默认值为0.92。因此，您可以使用1.0来获得更好的质量。 - Manoj Lodhi

Answer 2

这可能会有所帮助。

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

        }
    });
}

- Chirag Patel

---

在 var imageData = canvas.toDataURL('image/png',1.0); 中，1.0 表示什么意思？ - Smokey

这表示生成图像的图像分辨率。 - Chirag Patel

1.0是它可以取的最高值吗？@chirag - Smokey

是的，1.0 是最高的值。 - Smokey

quality的默认值为0.92。因此，您可以将其设置为1.0以获得更好的质量。 - Manoj Lodhi

是的，您可以根据您的要求进行调整。 - Chirag Patel

Answer 3

使用 canvas 对象替代 cann

var img= convertCanvasToImage(canvas);

- Oscar Siauw

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

有一些 polyfills 可以用来支持 canvas#toBlob

- Endless