canvas imageDraw（）不工作

Question

我想使用toDataURL（）獲取圖像數據，但是我的Imagedraw（）方法不起作用。

var video = document.getElementById('media-video'); 
      var videoCurrentTime = document.getElementById('media-video').currentTime; 
      var canvasWidth = $('video').width(); 
      var canvasHeight = $('video').height(); 
      var c = $('body').append($('<canvas>',{id: 'myCanvas', width:canvasWidth, height:canvasHeight})); 

    var ctx; 

    $(document).ready(function() { 
     c = document.getElementById('myCanvas');       
     ctx = c.getContext("2d");    
    }); 
    c.onload=function(){ 
     ctx.drawImage(video, 0, 0,canvasWidth , canvasHeight); 
    } 
    imageData = c.toDataURL("image/jpeg",1.0); 

    window.open(imageData, "toDataURL() image", "width=600, height=200"); 
} 

我可以看到imageData中返回的空白畫布。

Answer 1

Becouse c.onload=是acyns。 onload之後，您最多可以訪問DataURL。

c.onload=function(){ 
    ctx.drawImage(video, 0, 0,canvasWidth , canvasHeight); 
    imageData = this.toDataURL("image/jpeg",1.0); 
    window.open(imageData, "toDataURL() image", "width=600, height=200"); 
}