javascript-無法將畫布轉換爲圖像數據

我試圖做一個演示，用戶將能夠從通過他的瀏覽器啓用的網絡攝像頭捕獲圖像，並且該圖像將通過將其傳遞到使用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

來源

2016-12-15 John Doe

只需撥打這個

var img= convertCanvasToImage(); 

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

無需像上面定義的畫布那樣通過畫布。但是，如果你有另一個文件轉換CanvasToImage功能，那麼你可以使用

var img= convertCanvasToImage(canvas);

來源

2016-12-15 06:12:44

它在同一個文件中。 –

然後第一個解決方案最適合你:)。希望它給你帶來了好處 –

有沒有辦法提高拍攝鏡頭的質量？現在質量很差。 @Manoj Lodhi –

通canvas對象，而不是cann

var img= convertCanvasToImage(canvas);

來源

2016-12-15 06:09:55

這可能有所幫助。

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

     } 
    }); 
}

來源

2016-12-15 06:15:25

什麼是1.0在var imageData = canvas.toDataURL（'image/png'，1。0）; @chirag –

它表明genrating圖像的圖像分辨率 –

是1.0它可以取最高值？ @chirag –

如果可以儘量避免dataURL和使用一滴，而不是 - 它會爲您節省更多的內存和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) 
 
})

<canvas id="$canvas">

有polyfills你可以用它來支持畫布＃ toBlob

來源

2016-12-15 20:33:15 Endless

javascript-無法將畫布轉換爲圖像數據

回答

相關問題