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

【问题标题】：javascript- unable to convert canvas to image datajavascript-无法将画布转换为图像数据
【发布时间】：2016-12-15 06:05:53
【问题描述】：

伙计们！

我正在尝试制作一个演示，用户将能够使用该演示从通过其浏览器启用的网络摄像头捕获图像，并且该图像将通过使用 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;
}

我对这个领域很陌生。我还有一个问题。这适用于最新的浏览器吗？谁能帮我找出我犯的错误？

FIDDLE

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

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

【问题讨论】：

标签： javascript jquery html canvas

【解决方案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
@SajeevC 定义“质量差”？质量取决于您的网络摄像头
是的，您可以使用 canvas.toDataURL("image/png", qualityValue); .

【解决方案2】：

这可能会有所帮助。

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

        }
    });
}

【讨论】：

1.0 在 var imageData = canvas.toDataURL('image/png',1.0); 中表示什么@chirag
表示生成图像的图像分辨率
是 1.0 可以取的最高值吗？ @chirag
是的 1.0 是最高值。
它所采用的质量默认值为0.92。所以你可以使用 1.0 来获得更好的质量。

【解决方案3】：

传递canvas 对象而不是cann

var img= convertCanvasToImage(canvas);

【讨论】：

【解决方案4】：

如果您可以尝试避免使用 dataURL 并改用 blob - 它会为您节省更多内存和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)
})

&lt;canvas id="$canvas"&gt;

你可以使用 polyfills 来支持 canvas#toBlob

【讨论】：